Design system & style guide

Tokens live in styles.css (:root). Everything below uses them.

Colour

--ink-900

#0e1330

--ink-500

#5b6190

--paper-50

#f8f7fc

--paper-200

#e1def1

--violet-500

#6d4aff

--violet-600

#5b3df0

--coral-500

#ff6b4a

--mint-500

#1fbf8f

Typography

Display 800

Heading XL 800

Heading MD 700

Body copy, Inter 400, 17px with 1.6 line height for comfortable reading.

Muted small text for hints and secondary information.

Buttons

Form controls

Select

Slider

Checkbox option

Rules

Use tokens only; no hard-coded colours, sizes or radii.
One accent (coral) action per view; everything else primary or ghost.
Keep AA contrast, 44px targets and visible focus rings.
Voice: plain, confident, short sentences.