Design tokens

Tokens map to Tailwind steps where a close match exists. signal is brand-specific — the nearest step, violet-800, is far more saturated.

Headings

Six levels, all from UiHeading. Sans throughout — never serif. Pass as when the semantic tag differs from the visual level.

Inter everywhere, self-hosted — Latin, Latin Extended and Cyrillic, so en, ru and tr are covered. The native iOS app keeps SF Pro. One face per platform: no display cut, no heading-only family.

Heading hints

A muted line under a heading is part of that heading. Pass hint rather than writing a <p> after it — the mt-1 lives in the component.

level="group" — a bold label above muted copy is a heading, so it lands in the outline as an <h3>:

The hint slot instead of the prop, when the copy carries markup:

Not a hint — a value under a label is a pair of data lines and keeps its own tighter spacing:

In context

Radius

Two radii. Pills for things you toggle or dismiss, xl for everything else.

Buttons

White on signal 6.0:1 · signal on wash 5.5:1

Pill buttons — same styles, rounded-full:

Pills need a little more horizontal padding to look balanced.

Navigation chrome

Circular icon buttons, size-10, on a neutral fill. Back sits left, close sits right.

HeaderToolbar — back left, title centre, actions right:

FullDialog — centred title, close right:

Sheet and Modal — drag handle, title left, no close on mobile:

Icon button states:

size-10 keeps the tap target at 40px. Every icon button needs an aria-label — there is no text to read.

Alerts

Inline notices. Same tints as status badges, so a colour means the same thing everywhere.

With a title, for anything longer than one line:

Dismissible:

Errors get role="alert" so screen readers interrupt; the rest use role="status".

Loader

Three dots bouncing in sequence, brand colour, no fade. Inside a filled button they inherit the text colour instead.

In buttons:

On a signal fill the dots must inherit text colour — brand on brand is invisible.

Dates

Relative up to a month, then the day and month. The year appears only when it differs.

Renders a real <time> element and updates itself while on screen.

Prices

Thousands separated by a comma, no decimals. Never tabular-nums — numbers stay in the typeface's proportional figures.

Use useMoney() — never format a price inline.

List rows

UiList owns the spacing; rows carry no margins of their own. UiListRow is the row — label, optional leading icon, optional trailing value, chevron by default. Renders a link when given to, otherwise a button.

plain — bare rows on a section:

divided — a rule between rows. Never hand-write the hr, and never suppress the last one with an index check:

as="div" — the row is not itself the control, so it must not be a button wrapping the switch:

variant="card" — standalone bordered rows:

variant="joined" — rows sharing one bordered container:

Empty states

No background of its own — edge-faded grid rules on the back, floating cards above the copy. pattern picks the cards: list (default) or grid. Always name the next action.

Without a hint:

Compact — inside a card or section:

A search with no results is not an empty state — keep the query visible and offer a way back:

pattern="grid" — tiles, for galleries and card layouts:

pattern="list" — rows, for feeds and lists (the default):

Skeletons

Bars use mist on white, pulsing on the whole row rather than each bar. Mirror the real layout so nothing jumps when content lands.

List row — thumbnail, title, two meta lines.

Detail header:

Chip row:

Text block — last line short, like real copy:

Skeletons are decorative — mark the container aria-hidden="true" and announce loading in one live region.

Loadable

UiLoadable owns the loading → empty → content chain, so a finished fetch with no rows never shows a skeleton. It marks the skeleton aria-hidden, puts animate-pulse on the container rather than each bar, and announces loading once in a live region.

Gate on the request status, never on the row count alone — an empty array reads the same before the fetch starts and after it returns nothing.

Status badges

The six booking statuses. Tinted background, no border — badges label, they don't invite a tap.

With a dot, when the badge sits in a dense row:

In a booking row:

Confirmed carries the brand colour, completed goes green. All sit on the 100 wash with 800 text, so no badge looks lighter than its neighbours. Lowest is confirmed at 5.1:1.

Counter badges

Counts use danger so they read as "needs attention" regardless of the accent.

Cap at 99+. The bare dot is for "something is new" when the exact count doesn't help.

Inline counts, beside a label rather than over an icon:

Neutral for a plain total, danger only when it wants action.

Chips and filters

Selected state uses signal fill, not just a border.

Inline links

ink link in muted body · 3.8:1 against surrounding text, underline matches the text

Standalone link, outside body copy:

Input

Borders use mist. Focus is the browser default.