neutral
background light grey
foreground near-black
accent mid grey
Theming
NRI theming is one shared vocabulary of seven themes. Each theme is a triple — background, foreground, and accent — built from the Colors palette. Editors meet themes in three places; components never invent their own hex.
For the developer map (resolver, compositions, contrast rules), see Implementation.
Themes
Section titled “Themes”Seven named themes. Swatches use the brand hexes from the web palette so the colours are self-contained content (not site chrome).
neutral
white
egyptian-blue
blush-pop
ash-grey
sand-dune
granite
Dark panels are those whose text is white: Egyptian Blue and Granite. Everything else is a tint panel — dark ink on a light ground. Components that decorate media panels branch on that idea rather than hard-coding theme names.
Where themes apply
Section titled “Where themes apply”Editors encounter theme in three places. They share one vocabulary; they differ in who owns the choice and what happens when nothing is picked.
1. Container theme (block chrome)
Section titled “1. Container theme (block chrome)”Some blocks wrap their content in a container that can take a theme — Video, Accordion, Rich Text, Statement Panels (the block shell), Column Layout, and similar. When the editor leaves container theme empty, the container stays transparent and the page background shows through.
2. Per-item theme picker
Section titled “2. Per-item theme picker”Individual items inside a block — a stat, a vertical card, a statement panel — can each get a theme from the shared theme list. Leave a slot empty and the block’s automatic rotation fills it (see below). Stats are an exception: an empty pick does not auto-rotate; the component uses its own default surface.
3. Automatic rotation
Section titled “3. Automatic rotation”When every item in a rotating block leaves theme empty, the site still applies a designed sequence so the page does not look flat. That sequence is policy per component, not a separate editor control:
| block | default order (repeating) |
|---|---|
| Vertical cards | egyptian-blue → blush-pop → ash-grey |
| Statement panels | white → egyptian-blue → ash-grey |
An explicit theme on one item overrides only that slot; the rest keep the rotation (or their own explicit picks).
Blocks themeable today
Section titled “Blocks themeable today”| block / item | how theme shows up |
|---|---|
| Video, Accordion, Rich Text, Column Layout, Statement Panels (shell), … | Container theme on the block chrome |
| Vertical card (item) | Per-item picker; empty → media-panel rotation above |
| Statement panel (item) | Per-item picker; empty → panel rotation above |
| Stat (item) | Per-item picker; no auto-rotation when empty |
| Block settings that compose the same item theme | Same shared theme list |
The rule: any themeable block uses the shared theme vocabulary and the shared resolver — never local hex. New themes land in the palette and the editor list first; components only branch on dark vs tint.
Companion living HTML in the website repo: docs/design/vertical-cards.html, docs/design/statement-panel.html, docs/design/type-roles.html. Palette stories are on Colors; code details on Implementation.