Foundations

Colours

PRIZM uses a two-layer colour system: a fixed baseline palette of raw scales, and a set of semantic tokens that map onto those scales differently per theme. Component code only references semantic tokens — that's what makes theming free.

See Theming for the architecture behind these layers and how to activate a theme.

Semantic tokens

These tokens carry meaning, not raw colour. Each one resolves to a different value per theme, so the same component renders correctly across all four variants without any branching at the call site.

Every semantic token is wired into a Tailwind utility. Use the utility in component code:bg-bg, text-fg, border-border — never the raw CSS variable directly.

Baseline scales

Raw palettes that the semantic tokens reference. These values are theme-independent — they look the same regardless of which zone or mode is active. Don't reference these directly in component code; they're inputs to the semantic layer.

Status hues

Single-purpose hues used by the status semantic tokens. Two steps each.

Using colors in code

Always reach for the semantic tokens via Tailwind utilities. Baseline scales are for the token files only — referencing them from a component locks that component to a single visual treatment and defeats theming.

// ✓ Correct — semantic, theme-aware
<div className="bg-surface text-fg border border-border">
  <span className="text-accent">Important</span>
  <button className="bg-accent text-accent-fg hover:bg-accent-hover">Save</button>
</div>

// ✗ Wrong — references baseline directly, won't theme
<div style={{ backgroundColor: "var(--prizm-slate-100)" }}>...</div>