Unify

Foundations

The tokens every component is built from. Switch the theme in the header: every swatch below is the live variable.

Colour

OKLCH, light and dark in one declaration each. Status colours are fixed across apps so an error looks the same everywhere; only the accent belongs to the app.

Surfaces & ink

--background

--surface

--surface-raised

--foreground

--muted-foreground

--border

--border-strong

--hover-tint

Accent (per app)

--accent

--accent-foreground

--accent-tint

--selection

Status

--success

--warning

--warning-ink

--danger

--success-tint

--warning-tint

--danger-tint

--info-tint

Typography

Geist and Geist Mono, self-hosted with next/font. Tight tracking on headings, tabular figures for numbers, mono uppercase for eyebrows.

text-displayThe quick brown foxclamp(44–72px) · One per page, marketing only

text-h1The quick brown fox30px · Page title

text-h2The quick brown fox24px · Section title

text-h3The quick brown fox18px · Card and dialog title

text-bodyThe quick brown fox16px · Reading text

text-body-smThe quick brown fox15px · Descriptions

text-uiThe quick brown fox14px · Controls, tables, default

text-metaThe quick brown fox13px · Secondary info, hints

text-microThe quick brown fox12px · Eyebrows, badges, table heads

Eyebrow · u-eyebrow

Spacing & layout

A 4px grid (Tailwind's own spacing scale). Content column 1152px, sidebar 240px, top bar 56px, rows and touch targets 44px.

Radius

Concentric: a shape inside another always takes the next smaller step.

sm · 6pxBadges, kbd

md · 10pxButtons, fields

lg · 14pxCards, menus

xl · 20pxDialogs, sheets

icon · 22.37%App icons

Elevation & glass

Cards have no shadow — a hairline border does the work. Only floating chrome is lifted, and only floating chrome is glass.

Card · border, no shadow

u-glass · menus, top bar, toasts

Motion

Short and functional; everything collapses to instant with prefers-reduced-motion.

--dur-press150msHover, press, colour changes

--dur-pop200msMenus, popovers, toasts appearing

--dur-modal300msDialogs and sheets

--ease-entercubic-bezier(0.2, 0, 0, 1)Things arriving

--ease-exitcubic-bezier(0.4, 0, 1, 1)Things leaving

Blueprint layer

Decorative hairlines for marketing and docs surfaces: never behind data, at most two per section, always faded at the edges.

u-bp-grid

u-bp-grid-lg

u-bp-dots

u-bp-hatch

u-bp-glow

u-rails