Get started / Foundations
Foundations
The shared visual language. Preserve these tokens and dimensions when composing new interfaces.
Color & surfaces
Quiet surfaces, readable type, and a clear next action. White leads; mint marks selected or active state.
Canvas
--background
Page background
Text
--foreground
Primary text
Surface
--card
Panels and cards
Elevated
--popover
Menus and overlays
Field
--field
Text controls
Muted
--muted-foreground
Supporting text
Primary
--primary
Primary actions
Selected
--accent-commit
Active and selected states
Danger
--destructive
Destructive actions and errors
Border
--border
Quiet boundaries
Geist Sans
Product titles: 20–24px. Section titles: 16px. UI labels: 14px. Metadata: 12px. Composer copy: 18px with 28px line height. Use Geist Mono sparingly for identifiers and small labels.
Spacing: 4 · 8 · 12 · 16 · 20 · 24 · 32px
Desktop fields use 36px rows. Primary touch targets use at least 44px. Dashboard cards use 8px corners and 20px content padding. Respect user font preferences and reduced motion.