Every color, radius, shadow, and type step is a CSS variable in @theme. Change one variable and the entire surface follows. Dark mode flips values under [data-theme=dark] — no component-level branching.
Colors
CSS custom properties bridged to Tailwind utilities
--color-bg
Page background
--color-bg-subtle
Sidebar, subtle surface
--color-bg-muted
Muted surface, inputs
--color-fg
Primary text, headings
--color-fg-muted
Secondary text
--color-fg-subtle
Tertiary text, captions
--color-fg-faint
Placeholder, disabled
--color-accent
Interactive emphasis
--color-develop
Pipeline · develop
--color-preview
Pipeline · preview
--color-ship
Pipeline · ship
--color-success
Semantic · ok
--color-warn
Semantic · warn
--color-error
Semantic · error
Type scale
Geist Sans · Geist Mono
h1
Display · 28/1.15 · -0.03em
h2
Section · 20/1.2 · -0.02em
h3
Heading · 15 · -0.015em
body
Body · 14 · 1.5
small
Small · 13 · 1.5
kicker
KICKER · mono · 11 · +0.08em
mono
12.5px mono · 1.7
Radii
--radius-xs
4px
--radius-sm
6px
--radius-md
8px
--radius-lg
12px
--radius-xl
16px
--radius-pill
9999px
Shadow recipes
The shadow-as-border system
--shadow-ring-1
inset 0 0 0 1px var(--color-line)
--shadow-ring-2
inset 0 0 0 1px var(--color-line-strong)
--shadow-card
0 0 0 1px line, 0 2px 2px rgb(0 0 0/0.02)
--shadow-card-lifted
card + 0 8px 16px -8px rgb(0 0 0/0.06)
Spacing scale
Available as var(--s-N) or arbitrary Tailwind values like p-[var(--s-4)]