Token reference

Below is a list of all tokens. The current values are those associated with the currently selected theme. You can change the current theme with the dropdown in the top-right corner. Each token shows its light value over its dark value, with a swatch of each.

Contrast: the --<x>-foreground on --<x> pairs and the text-on-background tokens are checked against WCAG AA (4.5:1) on every build. --primary, --destructive, --success, --warning and --sidebar-primary with their white foregrounds, and --muted-foreground on --muted in the light, are below it and listed in contrast-exceptions.json; the --<hue>-text tokens are the AA-safe way to show a hue as small text on --background.

Surfaces

Token	Light / dark
--background	#ffffff#0a0a0a
--foreground	#0a0a0a#fafafa
--border	#e4e4e7#a1a1aa
--input	#e4e4e7#27272a
--input-dirty	#fffbeb#1a1808
--ring	#27272a#d4d4d8

Semantic colour pairs

Each pair is a background and the text colour that sits on it.

Token	Light / dark
--primary	#2563eb#2563eb
--primary-foreground	#ffffff#ffffff
--primary-text	#1d4ed8#60a5fa
--primary-glow	rgba(59, 130, 246, 0.3)rgba(59, 130, 246, 0.4)
--secondary	#f4f4f5#27272a
--secondary-foreground	#18181b#fafafa
--muted	#f4f4f5#27272a
--muted-foreground	#65656d#a1a1aa
--accent	#f4f4f5#27272a
--accent-foreground	#18181b#fafafa
--accent-glow	rgba(244, 244, 245, 0.5)rgba(39, 39, 42, 0.7)
--destructive	#dc2626#dc2626
--destructive-foreground	#ffffff#ffffff
--destructive-text	#b91c1c#f87171
--success	#15803d#15803d
--success-foreground	#ffffff#ffffff
--success-text	#166534#4ade80
--warning	#b45309#b45309
--warning-foreground	#ffffff#ffffff
--warning-text	#b45309#fbbf24
--info	#f9fafb#1f2937
--info-foreground	#0a0a0a#fafafa
--info-border	#e4e4e7#27272a
--popover	#ffffff#18181b
--popover-foreground	#0a0a0a#fafafa
--card	#ffffff#18181b
--card-foreground	#0a0a0a#fafafa

Sidebar

Token	Light / dark
--sidebar-background	#f4f4f5#18181b
--sidebar-foreground	#18181b#fafafa
--sidebar-primary	#2563eb#2563eb
--sidebar-primary-foreground	#ffffff#ffffff
--sidebar-accent	#e4e4e7#27272a
--sidebar-accent-foreground	#18181b#fafafa
--sidebar-border	#e4e4e7#27272a
--sidebar-ring	#2563eb#2563eb

Gradients

Tailwind exposes these as background images: bg-gradient-primary, bg-gradient-subtle, bg-gradient-card, bg-gradient-hero.

Token	Light / dark
--gradient-primary	linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)
--gradient-subtle	linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%)linear-gradient(180deg, #0a0a0a 0%, #18181b 100%)
--gradient-card	linear-gradient(135deg, rgba(59,130,246,.05), rgba(37,99,235,.05))linear-gradient(135deg, rgba(59,130,246,.1), rgba(37,99,235,.1))
--gradient-hero	linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%)

Shadows

Token	Light / dark
--shadow-soft	0 1px 2px 0 rgba(0,0,0,.05)0 1px 2px 0 rgba(0,0,0,.3)
--shadow-medium	0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06)0 4px 6px -1px rgba(0,0,0,.5), 0 2px 4px -1px rgba(0,0,0,.3)
--shadow-large	0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -2px rgba(0,0,0,.3)
--shadow-card	0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06)0 1px 3px 0 rgba(0,0,0,.5), 0 1px 2px 0 rgba(0,0,0,.3)
--shadow-elevated	0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04)0 20px 25px -5px rgba(0,0,0,.7), 0 10px 10px -5px rgba(0,0,0,.4)
--shadow-glow	0 0 20px rgba(59,130,246,.4)0 0 20px rgba(59,130,246,.5)

Radii

Declared on :root in light-tokens.css, so they are part of tokens.css and need no Tailwind. One knob, --radius, and the steps derive from it. The same in both modes.

Token	Value
--radius	0.5rem
--radius-sm	calc(var(--radius) - 2px) = 0.375rem
--radius-md	var(--radius) = 0.5rem
--radius-lg	calc(var(--radius) + 4px) = 0.75rem
--radius-xl	calc(var(--radius) + 8px) = 1rem
--radius-2xl	calc(var(--radius) + 16px) = 1.5rem
--radius-3xl	calc(var(--radius) + 24px) = 2rem
--radius-full	9999px

The Tailwind utilities carry the derivation themselves (.rounded-md { border-radius: var(--radius) }, .rounded-lg { border-radius: calc(var(--radius) + 4px) }), so --radius is resolved at the element: --radius: 0 squares everything below it whether it is set on :root or on a subtree (.panel { --radius: 0 }). The --radius-* steps are the same derivation for plain CSS (border-radius: var(--radius-md)); a plain-CSS consumer may override a step on its own, the utilities do not read the steps.

Type, density and motion

Also on :root in light-tokens.css; the same in both modes.

Token	Value
--font-sans / --font-mono	system stacks; body uses --font-sans
--text-xs … --text-3xl, --text-*-line-height	0.75rem … 1.875rem
--font-weight-normal / -medium / -semibold / -bold	400 / 500 / 600 / 700
--spacing	0.25rem; every spacing utility is a multiple of it (p-4 = 4 × it)
--control-height-sm / -md / -lg	2rem / 2.5rem / 3rem
--control-padding-x-sm / -md / -lg	0.75rem / 1rem / 1rem (Input, Select, Textarea, Listbox, Combobox)
--button-padding-x-sm / -md / -lg	0.75rem / 1rem / 1.5rem (Button)
--card-padding-sm / -md / -lg	--spacing × 4 / 6 / 8 (Card)
--table-cell-padding-x-sm / -md, --table-cell-padding-y-sm / -md	--spacing × 2 / 3, × 1.5 / 2.5 (Table cell, per size)
--drawer-size-sm / -md / -lg	20rem / 28rem / 40rem (Drawer panel width or height)
--container-width-sm … -2xl, --container-padding	40 / 48 / 64 / 80 / 96rem, --spacing × 4 (Container)
--duration-fast / -normal / -slow	150ms / 200ms / 300ms; -fast is the default of transition-*
--ease-standard	cubic-bezier(0.4, 0, 0.2, 1); the default of transition-*
--ease-out	cubic-bezier(0, 0, 0.2, 1); the .animate-* entrances and exits

In Tailwind, reach a scalar token with the arbitrary-value form: h-(--control-height-md), px-(--button-padding-x-md), duration-(--duration-fast).

Animations

Keyframes, one --animate-* token per animation and the .animate-* classes that apply them ship in tokens.css, so they need no Tailwind. With Tailwind the same tokens back the animate-* utilities and their variants (group-hover:animate-pulse). Override the token to retime one.

Class (token)	Keyframes	Timing
animate-fade-in / animate-fade-out (--animate-fade-in / -out)	fade-in / fade-out	--duration-normal (0.2s) --ease-out
animate-slide-in-from-top / -bottom / -left / -right (--animate-slide-in-from-*)	slide-in-from-* (10px travel)	--duration-normal --ease-out
animate-scale-in / animate-scale-out (--animate-scale-in / -out)	scale-in / scale-out (0.95 ↔ 1)	--duration-normal --ease-out
animate-spin (--animate-spin)	zui-spin	1s linear, infinite
animate-pulse (--animate-pulse)	zui-pulse (opacity 1 ↔ 0.5)	2s cubic-bezier(0.4, 0, 0.6, 1), infinite
animate-bounce (--animate-bounce)	zui-bounce (10px)	1s ease-in-out, infinite
animate-shake (--animate-shake)	shake (±5px)	0.5s ease-in-out
animate-skeleton-wave (--animate-skeleton-wave)	skeleton-wave (sheen sweep)	1.6s linear, infinite
animate-progress-indeterminate (--animate-progress-indeterminate)	progress-indeterminate (bar sweep)	1.5s --ease-standard, infinite