Theming

PRIZM has four theme variants — two products × two modes — driven by a single token layer and two data attributes on the root element.

The four variants

c3 · light

Heading

Body text

c3 · dark

Heading

Body text

enterprise · light

Heading

Body text

enterprise · dark

Heading

Body text

How activation works

Setting the data attributes on <html> activates the matching token set. Component code stays the same.

html

<html data-zone="c3" data-mode="dark">
  <!-- All PRIZM components render in the C3 dark theme -->
</html>

Token architecture

PRIZM uses two layers:

Baseline tokens — raw colour scales (slate, blue, cyan), radii, shadows. In styles/tokens/baseline.css.
Semantic tokens — meaning-based variables like --prizm-color-bg, --prizm-color-accent. Each theme file (c3-light.css, c3-dark.css, etc.) maps semantic tokens onto baseline values.

Components always reference semantic tokens — never baseline scales directly. This is what makes theme switching free. For the full palette and per-token visual reference, see Colours.

Using tokens in code

All semantic tokens are wired into Tailwind utilities:

tsx

// ✓ Correct — uses semantic tokens, theme-aware
<div className="bg-bg text-fg border-border">
  <span className="text-accent">Important</span>
</div>

// ✗ Wrong — uses raw Tailwind colours, won't theme correctly
<div className="bg-slate-50 text-slate-900 border-slate-200">
  <span className="text-blue-600">Important</span>
</div>