Theming & signatures
How one Prism foundation refracts into every customer brand and every product — without forking. Three independent axes stack: brand (the customer), signature (the product), and theme (light/dark). Density and device tier compose on top.
See it re-skin
This is the most convincing demonstration of "one system, many products." Use the control bar to change signature, theme and density — the palette, semantic roles and contrast all re-resolve live. The same control bar appears on every foundations specimen.
1. Customer brand — remap one ramp
A customer themes an entire product by overriding the --brand-* ramp. Nothing hard-codes a brand colour, so links, buttons, focus rings, selected states and --intent-brand all follow.
/* customer-theme.css — loaded after styles.css */
:root {
--brand-50: oklch(0.97 0.02 160);
--brand-500: oklch(0.62 0.17 160); /* the customer's primary */
--brand-600: oklch(0.55 0.17 160);
--brand-700: oklch(0.48 0.16 160);
/* …full 50→900 ramp… */
--brand-on: oklch(1 0 0); /* legible text on a filled brand surface */
}
Rules: supply the whole ramp (50→900) so hover/active/subtle states stay in proportion; keep --brand-on legible (AA) on --brand-500/600; don't override semantic roles per-customer — only --brand-* (+ logo). Validate contrast in both themes.
2. Product signature — pick a domain look
A signature is the per-product personality. Set one attribute and a subtree re-skins to a domain's accent + hero gradient, adapting to light/dark automatically:
<body data-signature="health"> … </body>
| Signature | Hue (--domain-*) | Default density | Tone |
|---|---|---|---|
commerce | cobalt | comfortable | efficient, action-led |
campus | indigo-violet | relaxed | calm, guiding |
health | calm cyan-teal | compact | careful, reassuring |
media | magenta | comfortable (cinema on TV) | short, cinematic |
finance | emerald | compact | precise, trustworthy |
hospitality | warm amber | comfortable | warm, premium |
estate | terracotta clay | comfortable | trust-building, visual |
Each signature re-points the accent roles (and chart series 1) to its --domain-* hue and exposes --signature-gradient for heroes. Derived roles are computed once via color-mix against the live theme, so a signature works in light and dark from one definition (tokens/signatures.css). Brand and signature are orthogonal: a customer's --brand-* still governs where you use --brand-* directly; the signature governs --accent. Most products lead with the signature.
3. Theme — light & dark
Set data-theme="light|dark" on <html> (or any scope). Light is the default warm near-white canvas; dark is a warm near-black. In dark theme:
- Shadows nearly vanish — elevation is communicated by lighter surfaces + borders.
- Section accents and intent washes become translucent (alpha-based), not opaque tints.
- All semantic roles are re-pointed; components need no dark-specific code.
Stacking order
<html data-theme="dark" data-density="compact">
<body data-signature="finance">
<section data-scale="cinema"> … </section>
Each axis is scoped independently and can be set at any level, so a single page can mix (e.g. a compact dashboard with one relaxed onboarding panel, or a cinema-tier preview inside a desktop admin).
On-colour surfaces
On any coloured / gradient / dark fill, set data-on-color on the container. Global headings default to dark --text-primary; data-on-color makes headings and text inherit the surface's light text colour so you never get dark-on-dark. Pair vibrant gradients with --grad-on for body text.
Don'ts
- Don't fork a component to give a product a different look — add/extend a signature.
- Don't hard-code a customer colour anywhere but the
--brand-*override. - Don't ship a signature or brand without checking AA in both themes and the focus-ring contrast.
Live specimen
Product signatures side by side