Foundation
Design tokens
All tokens are OKLCH and adapt between light and dark modes. Tailwind utility classes map to them via @theme inline.
Semantic colors
background
--background
foreground
--foreground
card
--card
card-foreground
--card-foreground
popover
--popover
popover-foreground
--popover-foreground
primary
--primary
primary-foreground
--primary-foreground
secondary
--secondary
secondary-foreground
--secondary-foreground
muted
--muted
muted-foreground
--muted-foreground
accent
--accent
accent-foreground
--accent-foreground
destructive
--destructive
destructive-foreground
--destructive-foreground
border
--border
input
--input
ring
--ring
Status colors
Use as Tailwind classes: text-status-green, bg-status-amber, etc.
status-green
--status-green
status-amber
--status-amber
status-red
--status-red
status-purple
--status-purple
Secondary accents
Filled accent variants paired with the secondary-* button variants. The secondary-green variant reuses the existing --secondary token shown above.
secondary-coral
--secondary-coral
Chart colors
chart-1
--chart-1
chart-2
--chart-2
chart-3
--chart-3
chart-4
--chart-4
chart-5
--chart-5
Sidebar palette
sidebar
--sidebar
sidebar-foreground
--sidebar-foreground
sidebar-primary
--sidebar-primary
sidebar-accent
--sidebar-accent
sidebar-border
--sidebar-border
sidebar-ring
--sidebar-ring
Typography
font-heading · Poppins
The quick brown fox
font-sans · DM Sans (base page font)
The quick brown fox jumps over the lazy dog
"DM Sans", ui-sans-serif, system-ui, sans-serif
font-mono · IBM Plex Mono
const greeting = "Hello, world!";
Radii
--radius-sm
0.6 × radius
--radius-md
0.8 × radius
--radius-lg
1 × radius (0.625rem)
--radius-xl
1.4 × radius
--radius-2xl
1.8 × radius
--radius-3xl
2.2 × radius
--radius-4xl
2.6 × radius