Design tokens

Tokens live in matcha-ui/styles/matcha.css as CSS variables and @theme inline mappings. Use Tailwind utilities (bg-primary, text-heading-lg, p-section, rounded-2xl) or var(--primary) / cssVar from matcha-ui.

Color

background

bg-background

foreground

bg-foreground

primary

bg-primary

primary-foreground

bg-primary-foreground

secondary

bg-secondary

muted

bg-muted

accent

bg-accent

destructive

bg-destructive

border

bg-border

success

bg-success

warning

bg-warning

info

bg-info

chart-1

bg-chart-1

chart-2

bg-chart-2

chart-3

bg-chart-3

chart-4

bg-chart-4

chart-5

bg-chart-5

Radius

rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-4xl
rounded-full

Spacing

Semantic spacing: p-*, m-*, gap-* with token names.

tight
snug
comfortable
relaxed
loose
gutter
section
page

Type scale

The quick brown foxtext-caption
The quick brown foxtext-body-sm
The quick brown foxtext-body-md
The quick brown foxtext-body-lg
The quick brown foxtext-heading-sm
The quick brown foxtext-heading-md
The quick brown foxtext-heading-lg
The quick brown foxtext-heading-xl
The quick brown foxtext-heading-2xl
The quick brown foxtext-heading-3xl
The quick brown foxtext-display-sm
The quick brown foxtext-display-md
The quick brown foxtext-display-lg

Also: tracking-tight tracking-widest, font-medium, font-semibold.