Colors

Semantic color tokens. Components read tokens, never raw colors, so light and dark mode switch with one class.

Rules

1Use semantic tokens (bg-primary, text-muted-foreground, border-border), never raw hex values in components.
2Primary (burgundy #800020 in light mode, #C20E35 in dark mode) is for the single most important action on a screen and for selected states.
3Use one primary button per view. Secondary and outline buttons carry the other actions.
4Destructive red is only for errors and actions that delete or cannot be undone.
5Success and warning are status colors for badges, alerts and charts, not for buttons.
6Charts use chart-1 to chart-5 in order. chart-1 is always the main series.
7Text on primary is white. White on primary is 10.8:1 in light mode and 6.2:1 in dark mode.

Brand

--primaryLight oklch(0.38 0.152 18.6)Dark oklch(0.519 0.203 19.5)

--primary-foregroundLight oklch(1 0 15)Dark oklch(1 0 0)

--primary-highlightLight oklch(0.8 0.12 19.4 / 50%)Dark oklch(0.8 0.12 19.4 / 50%)

--ringLight oklch(0.38 0.152 18.6)Dark oklch(0.6 0.2 19.5)

Surfaces

--backgroundLight oklch(0.995 0.002 15)Dark oklch(0.145 0 0)

--cardLight oklch(1 0 15)Dark oklch(0.2 0 0)

--popoverLight oklch(1 0 15)Dark oklch(0.215 0 0)

--secondaryLight oklch(0.965 0.008 15)Dark oklch(0.255 0 0)

--mutedLight oklch(0.965 0.008 15)Dark oklch(0.255 0 0)

--accentLight oklch(0.96 0.03 18)Dark oklch(0.29 0.085 4)

--sidebarLight oklch(0.98 0.004 15)Dark oklch(0.17 0 0)

Text

--foregroundLight oklch(0.2 0.012 15)Dark oklch(0.96 0 0)

--muted-foregroundLight oklch(0.5 0.015 15)Dark oklch(0.7 0 0)

--secondary-foregroundLight oklch(0.25 0.015 15)Dark oklch(0.96 0 0)

--accent-foregroundLight oklch(0.347 0.104 1.4)Dark oklch(0.84 0.1 19)

Status

--destructiveLight oklch(0.55 0.22 27)Dark oklch(0.7 0.19 22)

--successLight oklch(0.55 0.14 155)Dark oklch(0.74 0.15 155)

--warningLight oklch(0.62 0.15 70)Dark oklch(0.8 0.15 75)

Lines

--borderLight oklch(0.915 0.008 15)Dark oklch(1 0 0 / 10%)

--inputLight oklch(0.89 0.01 15)Dark oklch(1 0 0 / 14%)

Charts

--chart-1Light oklch(0.38 0.152 18.6)Dark oklch(0.519 0.203 19.5)

--chart-2Light oklch(0.73 0.158 19.4)Dark oklch(0.73 0.158 19.4)

--chart-3Light oklch(0.575 0.215 16.9)Dark oklch(0.52 0.17 2)

--chart-4Light oklch(0.657 0.197 24.4)Dark oklch(0.657 0.197 24.4)

--chart-5Light oklch(0.6 0.1 200)Dark oklch(0.7 0.1 200)

PreviousAI and LLMs NextTypography

Rules

1Use semantic tokens (bg-primary, text-muted-foreground, border-border), never raw hex values in components.

2Primary (burgundy #800020 in light mode, #C20E35 in dark mode) is for the single most important action on a screen and for selected states.

3Use one primary button per view. Secondary and outline buttons carry the other actions.

4Destructive red is only for errors and actions that delete or cannot be undone.

5Success and warning are status colors for badges, alerts and charts, not for buttons.

6Charts use chart-1 to chart-5 in order. chart-1 is always the main series.

7Text on primary is white. White on primary is 10.8:1 in light mode and 6.2:1 in dark mode.