Colors
Every color in Grade DS comes from the active theme's three-hue OKLCH generator. Switch themes in the top nav to see these update live.
Ramps
Three 11-stop OKLCH ramps are generated from the theme's hues. Every component color resolves back to one of these stops.
Neutral
hue 85°Backgrounds, borders, text. Subtly tinted toward the neutral hue for warmth or coolness.
Primary
hue 85°Brand color. Used for primary actions, links, focus rings, and the default button.
Accent
hue 85°Secondary brand color. Used for accents, highlights, and a second visual thread.
Semantic tokens
Purpose-based tokens derived from the ramps above. These swap values per brightness mode automatically.
| Token | Usage | Swatch | Hex |
|---|---|---|---|
| --background | Page background | — | |
| --foreground | Primary text | — | |
| --card | Elevated surface background | — | |
| --card-foreground | Text on card | — | |
| --primary | Primary actions, links | — | |
| --primary-foreground | Text on primary | — | |
| --secondary | Secondary surfaces | — | |
| --secondary-foreground | Text on secondary | — | |
| --muted | Muted backgrounds | — | |
| --muted-foreground | Subtle text | — | |
| --accent | Hover states, highlights | — | |
| --accent-foreground | Text on accent | — | |
| --border | Default borders | — | |
| --input | Form input borders | — | |
| --ring | Focus ring | — |
Fixed semantic colors
Status colors are deliberately not hue-derived — they stay consistent across themes so users always read green as success, red as destructive, etc. Accessibility wins over brand cohesion here.
| Token | Usage | Swatch | Hex |
|---|---|---|---|
| --destructive | Destructive actions, errors | — | |
| --success | Success states | — | |
| --warning | Warning states | — | |
| --info | Informational states | — | |
| --highlight | Emphasis, new features | — |
Chart palette
A 5-stop categorical palette derived from the theme's hues. Primary leads, then two well-separated hue rotations, neutral as a quiet step, and accent closes — each adjacent slot is visibly distinct. Use via var(--chart-1)…var(--chart-5) or Tailwind utilities bg-chart-1.
Usage
{/* Semantic tokens — adapt to active theme + mode */}
<div className="bg-background text-foreground" />
<div className="bg-primary text-primary-foreground" />
<div className="bg-card text-card-foreground" />
{/* With opacity (Tailwind shortcut, works with any color) */}
<div className="bg-primary/50 hover:bg-primary/80" />
<div className="border-border/40" />
{/* Fixed semantic status colors */}
<div className="bg-success text-success-foreground" />
<div className="bg-destructive" />
<div className="text-warning" />
{/* Chart palette (generator-derived) */}
<Bar dataKey="x" fill="var(--chart-1)" />
<Bar dataKey="y" fill="var(--chart-2)" />