Built to feel familiar.

Semantic colour tokens, light and dark values, and contrast against the page background.

System fonts for the interface, Literata for reading, and monospace for code. A consistent scale for size, weight and line height.

Tailwind’s 4px scale. Controls from 20 to 44: buttons 24 / 30 / 32 / 36, inputs 35, composer 44.

Corner radii from small controls to large panels; larger surfaces use larger corners.

Four shadows in light only (all transparent in dark: surface steps and thin edges do the work); tooltips and hover cards get a 0.5px inner edge; dialogs and settings have none. Four border tiers.

Press play to compare curves and durations.

Lucide at stroke 1.75: 14 in menus, 16 in buttons, 18 in rail rows; four colours.

Keyboard focus is a 2px --focus outline, offset 1. Inputs only darken their edge one step, no ring. Press Tab to try.

Eleven variants. Text buttons are pills at 24 / 30 / 32 / 36; icon buttons 20–44, square (radius 6) or circle. Pressed adds a 12% tint, no scaling; loading keeps the width.

Status badges in two sizes (20, 24) and count badges for unread (22, 18); coloured ones pair a soft background with readable text.

35 high, radius 8, 1px edge; focus only darkens the edge, no ring. Type a single letter in “Name” to see the error state.

A 32-high pill (36 large); the clear button appears once there’s text.

Trigger 35 (28 small, used in settings), same edge as inputs; the list uses the menu look with a check on the right.

On and checked use the accent blue. The switch is 32 × 20; off is a faint fill with a thin edge.

Segmented picks a value; tabs switch content. Both are pills (26 small, 32 default): the current one gets a faint fill and primary text.

Compact filter chips with clear selected states, in horizontally scrollable rows.

Eight sizes: 13, 16, 22, 24, 36, 44, 60, 96. Stacks overlap by 6 with a ring in the background colour.

4-high progress bars (accent by default), spinners, and skeletons on surface-l2 with a 2.2s shimmer, shaped like what they replace.

One line of status in the page. No border; soft background and text pairs.

Use a quiet inline message in small regions, or an icon and action for an empty page or panel.

Elevated floats (card shadow plus a 1px edge in light, just the edge in dark); group is the settings card; inset sits in the page.

Compact (40, radius 8) for members and menu-like lists; card (64, radius 16) for apps, skills and routines.

A page header with back, title, description and actions; section and group titles.

For details, billing and usage. Stacks on narrow screens.

Breadcrumbs for nested places; a back link when there's one way back.

A bordered table with rounded corners and a distinct header surface, also used in conversations.

Orange only means needs-you; “new” is accent blue; the brand colour is the main agent's blue.

Every menu is the same: radius 12, padding 6, 30-high items at 13/18, 14 icons, a 0.5px edge, popover shadow in light only.

Right-click, long-press or Shift+F10 opens the same menu at the pointer.

Popovers share the menu surface. Tooltips are 24 high, radius 6, edge only, 8 below the trigger.

Radius 14, elevated surface, 1px edge, no shadow; the scrim is black 50% / 70%. Title 14/22 600.

Side drawers sit on surface-base with a hairline edge; the phone bottom drawer has 24 corners and a handle.

Follow the theme: elevated surface, thin edge, radius 9, 12.5 text; popover shadow in light only.