Foundations
Tokens that render the same on a phone and in a browser.
Two neutral ramps, one accent, three faces, one spring and 414 glyphs. Every value lives in src/style/tokens.ts.
Color · Ion spectrum
oklch
285
205
165
20
75
primary
success
warning
destructive
primary-soft
success-soft
warning-soft
destructive-soft
chart-1
series order is fixed
chart-8
primary: oklch(.74 .17 var(--hue)) dark
primary: oklch(.5 .22 var(--hue)) light
colorsFor(palette, scheme).primary → #a298ff
Color · Neutrals
dark / light
background
#0a0a0f
#f2f2f7
surface-sunken
#0e0e15
#fafafd
card
#12121a
#ffffff
secondary
#1e1e29
#f1f1f6
surface-raised
#282836
#e4e4ee
foreground
#f4f4f8
#111118
muted-foreground
#a4a4b6
#5a5a70
subtle-foreground
#7f7f93
#6c6c82
Neutrals carry 1–2% blue chroma. Hairlines are alpha white / alpha ink, never a fixed grey.
Type · Scale
Bricolage Grotesque · Instrument Sans · JetBrains Mono
Charged surfaces
display · 56/56 · 500 · −4%
One API, three native looks
h1 · 44/46.2 · 500 · −3%
Section title sets the room
h2 · 34/37.4 · 500 · −2.5%
Card title, dialog title, stat label
h3 · 26/29.9 · 500 · −2%
Row title, control label, button
label · 13/16.9 · 500 · Instrument
Body. Every visual variation is a boolean prop, named for what it means. Passing the prop turns it on.
body · 15/23.25 · 400
Small. Descriptions, helper text, table cells, toasts.
small · 13/19.5 · 400
Meta · 0x3DA3F5 · 12:04 · ⌘K
eyebrow · 11/11 · 500 · Mono · +10%
<Typography display> · <Typography h3> · <Typography body muted> · <Typography tiny> · <Text numberOfLines> for truncation
Shape · Radius
nested ≤ container
10 · control
12 · tile
16 · card
20 · dialog
22 · sheet
full · pill
shape.web = { control: 10, tile: 12, card: 16, dialog: 20, sheet: 22 }
Depth · Elevation
ambient, no offset
flat
card
heroShadow
raised
the shade tokens: shade · shade-md · shade-lg · ≤ .2 α in light
Motion · Spring
transform + opacity only
Glass surfaces
Spinner keeps spinning under reduced motion; it carries information.
reveal ease-out cubic · 460ms (brisk 260ms)
hover cubic-bezier(0.25, 0.1, 0.25, 1) · 150–180ms
<Reveal> · <RevealGroup> rise 16px once, then stay
Icon · 414 glyphs
outline · 1.75 stroke
default
primary
success
warning
destructive
muted
16
20
24
32
<Icon search /> · <Icon trash2 destructive /> · <Icon bell primary size={20} /> · one weight, everywhere