Design Tokens

The visual language of the playground. Based on Gruvbox.

Colors

Light Mode

Token	Value	Usage
`background`	`hsl(43 58% 80%)`	Page background
`foreground`	`hsl(21 7% 29%)`	Primary text
`primary`	`hsl(189 88% 24%)`	Actions, links
`secondary`	`hsl(58 70% 34%)`	Alt actions
`accent`	`hsl(332 33% 53%)`	Highlights
`destructive`	`hsl(2 75% 45%)`	Errors, delete
`border`	`hsl(35 17% 58%)`	Borders
`muted`	`hsl(43 58% 80%)`	Disabled, secondary bg

Dark Mode

Toggle with the theme button or data-theme="dark" on <html>.

Token	Value	Usage
`background`	`hsl(195 6% 12%)`	Page background
`foreground`	`hsl(40 38% 73%)`	Primary text
`primary`	`hsl(157 15% 58%)`	Actions
`secondary`	`hsl(59 70% 34%)`	Alt actions
`accent`	`hsl(332 33% 53%)`	Highlights
`destructive`	`hsl(2 75% 45%)`	Errors
`border`	`hsl(21 7% 29%)`	Borders
`muted`	`hsl(20 5% 22%)`	Disabled

Category Colors

Used for project category badges.

Category	Light	Dark
`category-generative`	`hsl(160 50% 35%)`	`hsl(160 40% 45%)`
`category-color`	`hsl(280 40% 50%)`	`hsl(280 35% 55%)`
`category-image`	`hsl(15 60% 45%)`	`hsl(15 50% 50%)`
`category-data-viz`	`hsl(200 60% 40%)`	`hsl(200 50% 50%)`

Doc Category Colors

Used for documentation section badges (tutorial, how-to, explanation, reference).

Category	Light	Dark
`category-tutorial`	`hsl(160 50% 35%)`	`hsl(160 40% 45%)`
`category-how-to`	`hsl(280 40% 50%)`	`hsl(280 35% 55%)`
`category-explanation`	`hsl(15 60% 45%)`	`hsl(15 50% 50%)`
`category-reference`	`hsl(200 75% 45%)`	`hsl(200 50% 50%)`

Typography

Uses JetBrains Mono for all text (monospace-first design).

Token	Stack
`font-sans`	JetBrains Mono
`font-serif`	JetBrains Mono
`font-mono`	JetBrains Mono

Prose Tokens

Tailwind Typography plugin tokens for prose-gruvbox utility:

Token	Value
`--tw-prose-body`	`var(--foreground)`
`--tw-prose-headings`	`var(--foreground)`
`--tw-prose-links`	`var(--primary)`
`--tw-prose-bold`	`var(--foreground)`
`--tw-prose-bullets`	`var(--border)`
`--tw-prose-hr`	`var(--border)`
`--tw-prose-pre-bg`	`var(--card)`
`--tw-prose-th-borders`	`var(--border)`
`--tw-prose-td-borders`	`var(--border)`

Border Radius

Token	Value
`radius-sm`	`calc(var(--radius) - 4px)`
`radius-md`	`calc(var(--radius) - 2px)`
`radius-lg`	`0.5rem`
`radius-xl`	`calc(var(--radius) + 4px)`

Usage

// Colors
<div className="bg-primary text-primary-foreground">Action</div>
<div className="text-muted-foreground">Secondary</div>

// Typography
<p className="font-mono text-sm">Code</p>

// Radius
<button className="rounded-lg">Rounded</button>

Source

Design tokens live in packages/tailwind-config/gruvbox-styles.css.