Design system

Colors

Semantic colours for surfaces, text, interaction, status, and data.

Use semantic tokens such as background, foreground, muted, and destructive. They resolve with the active theme and preserve meaning across light and dark mode. The values below are read from the rendered page, so they always show the current CSS result.

Light theme

Values are read from the rendered page.

--background

Canvas

--foreground

Primary ink

--card

Resting surface

--popover

Floating surface

--muted

Quiet fill

--secondary

Secondary fill

--accent

Hover and highlight

--muted-foreground

Secondary ink

--border

Hairline structure

--input

Control edge

--ring

Focus ring

--primary

Brand action

--primary-foreground

Ink on brand

--info

Selection and links

--info-foreground

Ink on info

--success

Success state

--success-foreground

Ink on success

--warning

Warning fill

--warning-foreground

Ink on warning

--destructive

Danger

--destructive-foreground

Ink on danger

Roles

  • background is the canvas; card and popover are raised surfaces.
  • foreground is primary ink; muted-foreground carries secondary information and placeholders.
  • muted, secondary and accent are translucent fills in rising strength: quiet surfaces and selected rows, secondary fills and tracks, then hover and the menu highlight.
  • border structures the page; input is the edge of every form control; ring draws focus.
  • primary is the black-brand action colour, inverted in dark mode.
  • info marks selection: checked controls, ranges, the selected day, today, links and unread.
  • success marks a settled or running state: strength bars, met-requirement ticks, status dots and fills. Filled surfaces use success-foreground; status chips keep the hairline outline and colour only the dot.
  • warning is a fill for conditions that need attention. Pair it with warning-foreground, or use a warning/10 tint with foreground text; never put text-warning on the canvas.
  • destructive is reserved for danger and validation failure. Filled surfaces use destructive-foreground; badges and menu items use the soft destructive/10 tint.

Every token is derived from a few knobs in packages/ui/src/styles/globals.css, so primitives and application code use the semantic classes only. The Geist ds-* values that remain there are inputs for the overlay backdrop and the shadows, not classes to build on. Chart tokens are for distinct data series, not decoration.

Usage

<section className="border-border bg-background text-foreground">
  <p className="text-muted-foreground">Secondary information</p>
</section>

Do not hardcode a light-mode value, infer permission from colour, or invent a feature-specific palette.