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 never flip in dark mode (text on colored surfaces); –surface-raised does (cards, header, panels).
primary
secondary
tertiary
accent
base
neutral
Typography
Display one
Display two
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
Radii & shadows
Components
Eyebrow line
Primary button Secondary button Badge
Card
Hairline box on the canvas. No fill, no lift. Brand skins may add both through tokens.
Wireframe primitives
Every rule, border and placeholder line.
Label · Meta · 01
System mono stack for labels, meta lines, indices, nav and buttons.
Empty media slot. Sizes to its container.
Press G or the # button bottom-left to overlay the 12-column grid.