Colors

Colors are semantic tokens: they name a job (card, primary), not a hue, so every component follows your theme and dark mode for free. Flip the theme and watch the values below change.

TokensCopy Anchor Link

Each token is a CSS variable in src/styles.css and a Tailwind color: bg-card, text-card-foreground, border-input. Click a swatch's copy button to grab its class.

Written in OKLCHCopy Anchor Link

--primary: oklch(0.52 0.2 264);

Same L means the same perceived brightness, so contrast is predictable: tune L for readability, keep H for brand.

Surfaces stackCopy Anchor Link

background → card → popover. In dark mode each layer gets lighter as it rises. Always pair a surface with its -foreground text.

<div className="bg-card text-card-foreground rounded-lg border p-4">
  <p className="text-muted-foreground">3 drafts waiting for review</p>
</div>

StatusCopy Anchor Link

Status colors have no -foreground. Use them as text on a soft tint of themselves, or let the component pick for you.

<span className="bg-success/10 text-success dark:bg-success/20 rounded-md px-2 py-1 text-sm">
  Published
</span>

Chart paletteCopy Anchor Link

Use chart-1 to chart-5 in order: blue, orange, gray, green, red. Green and red are never neighbors and differ in lightness, so they stay apart for color-blind readers.

const chartConfig = {
  posts: { label: 'Posts', color: 'var(--chart-1)' },
  replies: { label: 'Replies', color: 'var(--chart-2)' },
}

Do and don'tCopy Anchor Link

• Keep a screen to 3-5 colors: neutrals, primary and one status.
• Never use purple prominently, and never change --primary. VitNode blue stays blue.
• Filled primary is for short labels. Its dark-mode contrast is too low for paragraphs.

RelatedCopy Anchor Link