Style guide
Rendered from the live design tokens — what you see here is what every block uses. Flip the theme toggle to check dark mode.
Color families
primitives & surfaces
–white
–black
–surface-raised
–white / –black never flip in dark mode (text on colored surfaces); –surface-raised does (cards, header, panels).
primary
ultra-light
light
semi-light
medium
semi-dark
dark
ultra-dark
hover
secondary
ultra-light
light
semi-light
medium
semi-dark
dark
ultra-dark
hover
tertiary
ultra-light
light
semi-light
medium
semi-dark
dark
ultra-dark
hover
accent
ultra-light
light
semi-light
medium
semi-dark
dark
ultra-dark
hover
base
ultra-light
light
semi-light
medium
semi-dark
dark
ultra-dark
hover
neutral
ultra-light
light
semi-light
medium
semi-dark
dark
ultra-dark
hover
Typography
Heading one
Heading two
Heading three
Heading four
Body text — the quick brown fox jumps over the lazy dog. A text link, bold and italic.
Small text (–text-sm) for captions and meta lines.
Spacing scale
–space-3xs
–space-2xs
–space-xs
–space-sm
–space-md
–space-lg
–space-xl
–space-2xl
–space-3xl
Radii & shadows
sm
md
lg
xl
2xl
full
xs
sm
md
lg
xl
Components
Eyebrow line
Primary button Secondary button Badge
Card
Surface-raised background, token border, spring hover lift.