Design system
Every component in every state, in both themes and both densities. Soft studio, approved on 15 September 2026.
Foundations
ColourNeutral surfaces carry the interface. Colour marks exceptions only: a tint means something needs attention, and blue is kept for links, focus and the live timer. Switch the theme to see every token resolve for dark.5 examplesShape and depthRadius is concentric: an outer radius equals the inner radius plus its padding. Borders describe structure; shadows describe elevation.4 examplesTypographyGeist for the interface and Spline Sans Mono for codes, hex values and keyboard hints. 13px base, three weights, and tabular figures wherever numbers line up.4 examples
Actions
ButtonOne primary action per view. Secondary for everything else on the surface, ghost inside toolbars and dense rows. Press scales to 0.96.5 examplesToggleA button that stays on or off. Pressed is a quiet selected fill, never colour. Use it for view options and formatting; use a Switch for settings that save straight away.4 examplesToggle groupSegmented control. A sunken track holds the options and the chosen one lifts on a card shadow. Single select keeps one option pressed; multiple select suits formatting.5 examplesToolbarA row of related controls with one tab stop. Arrow keys move between items, disabled items stay reachable. Raised for floating bars, plain for page headers.4 examples
Inputs
AutocompleteA text input that suggests values without forcing a choice. Use it for names and references where a new value is fine; use Combobox when the value must come from the list.5 examplesCheckboxA 16px box for independent yes or no choices. Ticked fills with the text colour, not blue, and the tick fades in with a short blur. The mixed dash means some of a group is ticked.5 examplesCheckbox groupSeveral related checkboxes sharing one value. A parent checkbox selects or clears the whole set and shows the mixed dash when only some are ticked.5 examplesComboboxSearchable select for lists too long to scan: clients, projects, people. Typing filters the list, the selection is marked with a check, and one quiet line explains an empty result.6 examplesInputSingle-line text entry on a raised surface with a hairline border. Focus draws a soft blue ring, errors turn the border red and always come with a sentence saying what to fix.6 examplesNumber fieldNumeric entry with stepper buttons. Arrow keys step by one, Shift steps by ten, and values format with Intl so pounds, dollars and units read correctly.5 examplesOTP fieldOne box per character for verification codes. Typing moves forward, Backspace moves back, and pasting the whole code fills every box.5 examplesRadio groupOne choice from a short list. Arrow keys move the selection. Selected fills with the text colour and a small inverse dot, never blue.5 examplesSelectPick one or several options from a short, known list. The popup matches the trigger width and marks the selection with a check, not a fill. Use Combobox when the list needs search.6 examplesSliderPicks a value or a range along a track. The fill uses the text colour, never blue, and the value is always shown as text beside the label.5 examplesSwitchOn or off for settings that apply straight away. On fills the track with the text colour and slides the thumb, so position carries the state, not colour alone.5 examplesTextareaMulti-line text entry with the Input frame. Resizes vertically by default; autoResize grows with the text for notes and comments.4 examples
Forms
Overlays
Alert dialogConfirmation for actions that are hard to undo. Outside clicks never dismiss it. Focus starts on Cancel, the confirm button names the action, and a returned promise shows a spinner until it settles.2 examplesContext menuThe row actions menu on right click or long press, opening at the pointer. Same items, surface and motion as Menu. Always offer the same actions through a visible button too.2 examplesDialogFocused task on top of the page. Title and description always, one primary action at the right of the footer. Fades and rises 4px over 200ms; focus is trapped and returns to the trigger.2 examplesDrawerRight-side detail sheet, 440px and full height. Slides in over 250ms and out over 180ms, swipe right to dismiss. Opening another record replaces the content instead of stacking a second sheet.2 examplesMenuDropdown of actions. Items carry a muted icon and an optional shortcut; destructive items sit last, behind a separator, in red. Arrow keys, typeahead and Escape all work.4 examplesMenubarA row of menus for dense editors such as the invoice builder. Left and right arrows move across menus, and once one is open, hovering its neighbours switches between them.2 examplesPopoverAnchored panel for a small amount of rich content. 12px radius with a 4px gutter, shadow-pop, and a 150ms scale from 0.96 at the trigger. Non-modal: the page stays usable.2 examplesPreview cardHover card for a client or person named in running text or a table. Opens after 500ms on hover or focus, and the link still works on click.3 examplesToastBrief confirmation stacked at the bottom right. Tone shows only as a small icon, never a coloured background. Hover the stack to expand it, swipe right or down to dismiss.3 examplesTooltipShort inverse label for icon buttons, with an optional shortcut. Fades in over 100ms after the provider delay; neighbours in the same provider then open instantly.2 examples
Navigation
Navigation menuTop level navigation with menus that open on hover or click and share one popup, which resizes and slides between them. Neutral throughout: the current page gets a fill, not a colour.3 examplesTabsSwitch between views of one record. Pill tabs fill the selected tab for page sections; underline tabs slide a 2px indicator for panels inside a card. Arrow keys move between tabs.5 examples
Display
AccordionStacked sections that expand in place. One open at a time by default. Height animates over 200ms and the chevron turns, so the state reads without motion too.4 examplesAvatarInitials on neutral grey for people and clients. Never tinted: in a table full of owners, colour would compete with the one status that matters.3 examplesAvatarGroupOverlapping neutral avatars for a team or watchers. The ring matches the surface so each overlap reads as a clean cut, and the overflow count names the hidden people for assistive tech.4 examplesCollapsibleOne section that shows and hides, for secondary detail such as archived items or advanced settings. Height animates over 200ms and the chevron turns.4 examplesKbdKeyboard hints beside the action they trigger. Quiet by design: the action is the focal point, the key is a reminder.3 examplesPillTinted text label for categories and states. Neutral by default; watch, risk and good are reserved for things that need attention. Never add a dot.3 examplesProgressA neutral bar for how much of a task is done: uploads, imports, onboarding steps. It does not judge good or bad; use TickMeter where the direction matters.4 examplesScroll areaNative scrolling with thin overlay scrollbars that fade in on hover and while scrolling. Give it a fixed or max height. The viewport is keyboard focusable when it overflows.4 examplesSeparatorA hairline in the border colour. Use it for structure between groups, never for decoration.3 examplesSkeletonHolds the shape of content while it loads so the layout does not jump. The sweep is faint and switches off for reduced motion.3 examplesSpinnerFor short waits with no known shape. Use a Skeleton when the layout is known and Progress when the amount is. It takes the text colour and announces a label unless marked decorative.3 examplesTick meterSegmented meter with a colour ramp along the track. Direction is set per metric: progress and win chance run red to green, hours used runs green to red. Always shown beside a text value.4 examples
Composites
App shellThe Nyto layout: a 236px sidebar on the app ground with search, navigation, pinned clients and the timer, and the page in an inset panel. Below 768px the sidebar moves into a drawer.3 examplesCommand paletteJump to any client, project or action. Grouped results, arrow keys and Enter, Escape to close. The dialog enters with a 150ms fade and scale from 0.96.3 examplesData tableDense client and invoice lists. Hairline grid, 34px rows, sticky header and totals, sortable headers and a floating selection bar. Rows virtualise past 200.6 examplesDuration inputLogged time in whole minutes. Reads 1h 30m, 1.5, 90m or 1:30 and settles on 1h 30m when you leave the field.6 examplesEmpty stateWhat a surface says before it has content: a heading, one sentence and one primary action. The soft wash tile is optional and is one of the few places the wash appears.4 examplesEntity logoInitials on a client's brand colour. Radius is 28 percent of the size at every scale, text flips between white and ink for contrast, and a 1px inner outline holds pale colours.4 examplesFilter barSits above a table: view picker, Sort and Filter, the active filters as neutral chips, and Columns on the right. Presentational, so menus and state belong to the screen.4 examplesKanban boardDeal pipeline with neutral stage pills, column totals and tick meters for win chance. Drag with the pointer, or focus a title and use Space, the arrow keys and Escape.3 examplesMoney inputAmounts in integer minor units with a currency prefix. Parses as you type, formats with grouping on blur, and uses tabular figures.6 examplesPage headerThe top of a record or index page: breadcrumb, title, one line of context and the page actions. One primary action at most; the caption truncates instead of wrapping.4 examplesPanelThe inside of the shell's panel: a 48px bar with the breadcrumb and page actions, then a sunken body of bordered section cards with an optional 344px rail. Section cards have a 42px header with the title on the left and quiet meta on the right, and 44px rows divided by hairlines.2 examplesProperty listLabel and value rows for record pages. Editable rows show a pencil on hover or focus; on touch screens it is always visible. Values can swap to an inline editor.4 examplesStat stripThe client hub KPI strip: one bordered card split into equal cells, each with a label, a figure and a caption. Figures stay in text colour; a pill or icon beside the caption marks the exception.4 examplesSwatchA Brand Kit colour: the colour with its role and name, then HEX, RGB, CMYK and OKLCH, each with a copy button. Every format is worked out from the hex.5 examplesTimer controlThe tracking card at the foot of the sidebar. The live dot is one of the few blue things in the app. The parent owns the clock and passes elapsed seconds in.5 examples