Foundations
Tokens live in globals.css with a .dark scope for the dashboard. Light defaults exist on :root for marketing surfaces.
Color
Semantic colors map into Tailwind via @theme inline. Aim for WCAG AA contrast on primary actions and alert text.
Primary--co-primary
Secondary--co-secondary
Accent--co-accent
Success--co-success
Warning--co-warning
Error--co-error
Info--co-info
Neutral scale
Typography
Inter via next/font; Geist Mono for code. Line-height ~1.5 on body; tighter tracking on headings.
12 / label — The quick brown fox jumps over the lazy dog.
14 / small — The quick brown fox jumps over the lazy dog.
16 / body — The quick brown fox jumps over the lazy dog.
18 / lead — The quick brown fox jumps over the lazy dog.
20 / h3 — The quick brown fox jumps over the lazy dog.
24 / h2 — The quick brown fox jumps over the lazy dog.
32 / h1 — The quick brown fox jumps over the lazy dog.
48 / display — The quick brown fox jumps over the lazy dog.
Spacing (4px grid)
Use 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px for margin and padding.
4
8
12
16
24
32
48
64
Radius
- xs 4px · sm 6px · md 8px · lg 12px · xl 16px · full for pills
Shadows & layout
Elevation 1–4 + modal shadow. Main content max width 1280px. 12-column grid utility: .co-grid-12.
Do / Don’t
- Do use semantic tokens (
primary,muted-foreground) instead of raw zinc classes in new UI. - Don’t mix ad-hoc border radii; pick from the scale.