Color palette

CSS tokens used across light and dark themes. Every color is a variable - no hardcoded values in components.

Brand

Primary

var(--primary)

CTA, links, accents

Primary foreground

var(--primary-foreground)

Surfaces

Background

var(--background)

Card

var(--card)

Muted

var(--muted)

Border

var(--border)

Text

Foreground

var(--foreground)

Card foreground

var(--card-foreground)

Muted foreground

var(--muted-foreground)

Semantic states

Destructive

var(--destructive)

Ring (focus)

var(--ring)