Skip to main content

Design System

Live showcase of tokens and primitives. Hidden route — not linked from nav.

Preview theme

Colour tokens

Semantic pairs bridged from CSS vars. Never use raw hex in app code.

background / foreground
page canvas
card / card-foreground
raised surfaces
popover / popover-foreground
floating menus
muted / muted-foreground
hover tint, secondary text
accent / accent-foreground
interactive hover fills
primary / primary-foreground
main CTA
secondary / secondary-foreground
alternative CTA
destructive
danger, delete

Typography

Ten-step scale. Use semantic names; avoid inline text-[Npx].

TYPOGRAPHY.display
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.h1
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.h2
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.h3
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.bodyLg
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.body
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.label
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.caption
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.mono
The quick brown fox jumps over the lazy dog
TYPOGRAPHY.tiny
The quick brown fox jumps over the lazy dog

Radius

One radius scale. Constant across states — never change radius on :active.

none
sm
md
lg
xl
pill

Elevation

Border-first; shadows only when the theme casts them.

flat
ELEVATION.flat
raised
ELEVATION.raised
floating
ELEVATION.floating
overlay
ELEVATION.overlay

Buttons — variants × sizes

Interact to see hover, active (translate-y-px), and focus ring.

default
secondary
outline
ghost
link
destructive

Icon buttons

Square sizes for pure-icon controls.

Toggle button

aria-pressed flips the visual. Same radius in both states — only fill and border change.

aria-pressed=false

Inputs

Same radius + focus treatment as Button.

Badges

DefaultSecondaryOutlineDestructiveGhostLink

Cards

Card title
Cards use ELEVATION.raised by default.
Body content sits inside CardContent and inherits card-foreground.
Another card
Pair with Button primitives for actions.

Spacing scale

4px grid. Numbers map to Tailwind spacing units.

SPACING.xs
4px
SPACING.sm
8px
SPACING.md
12px
SPACING.lg
16px
SPACING.xl
24px
SPACING.xxl
32px

Z-index scale

Numeric so arithmetic works in style objects.

Z.base = 0
Z.dropdown = 40
Z.overlay = 50
Z.dialog = 60
Z.toast = 70
Z.tooltip = 80