Design System

Colour tokens

Change --_hue on :root to retheme entirely. Accent is independently configurable via --_hue-accent.

Surfaces

--color-bg

--color-surface

--color-raised

--color-sunken

Text

--color-text

--color-text-2

--color-text-3

Primary & Accent

--color-primary

--color-primary-subtle

--color-accent

--color-accent-subtle

Status

--color-success

--color-warning

--color-error

--color-info

Hue wheel

--_hue 258 indigo

--_hue-accent 42 amber

Typography

Fluid scale — no breakpoints. All sizes interpolate smoothly between 320px and 1280px viewports.

text-3xl — Display

text-2xl — Heading 1

text-xl — Heading 2

text-l — Heading 3

text-m — Body (default). The quick brown fox jumps over the lazy dog.

text-s — Small. The quick brown fox jumps over the lazy dog.

text-xs — Label / Overline

Buttons

Badges

Primary Accent Success Warning Error Info Neutral

Cards

Default card

White surface, subtle shadow, large radius.

Raised card

Stronger shadow for elevated content.

Inset card

Sunken background for secondary panels.

Flat tight card

No shadow, tighter padding.

Form elements

Full name As it appears on your passport.

Email

Role

Notes

Shadows

shadow-s

shadow-m

shadow-l

shadow-xl

Prose block

The .prose class applies comfortable reading styles to a block of rich text. It handles spacing between headings, paragraphs, lists, code blocks, and images automatically.

A sub-heading

Fluid typography means you never need to write a media query for font sizes. The scale interpolates smoothly between a 320px and 1280px viewport, matching the spacing scale exactly.

OKLCH colour space — perceptually uniform palettes
Single --_hue variable rethemes everything
No build step required

Design is the intermediary between information and understanding.

Surface tints

Utility classes for tinted backgrounds using system colours.

surface-primary

surface-accent

surface-success

surface-warning

surface-error