RC3 · Colour
Ember
RC3’s signature colour. Red-orange at hue 32 in OKLCH. Ramp, token mapping, activation, and contrast receipts.
Ramp
Eleven steps in OKLCH. Mirrors styles/tokens/rc3-light.css and styles/tokens/rc3-dark.css.
50100200300400500600700800900950
| Step | OKLCH | |
|---|---|---|
| --prizm-rc3-50 | oklch(97% 0.024 32) | |
| --prizm-rc3-100 | oklch(93% 0.060 32) | |
| --prizm-rc3-200 | oklch(86% 0.118 32) | |
| --prizm-rc3-300 | oklch(78% 0.165 32) | |
| --prizm-rc3-400 | oklch(71% 0.195 32) | |
| --prizm-rc3-500 | oklch(63% 0.200 32) | |
| --prizm-rc3-600 | oklch(55% 0.180 31) | |
| --prizm-rc3-700 | oklch(47% 0.150 30) | |
| --prizm-rc3-800 | oklch(40% 0.120 29) | |
| --prizm-rc3-900 | oklch(33% 0.092 28) | |
| --prizm-rc3-950 | oklch(25% 0.065 27) |
Token mapping
The override layer touches only the accent semantic tokens. Surface, fg, border, status, and glass tokens inherit from C3 verbatim.
Dark mode
--prizm-color-accentvar(--prizm-rc3-400)--prizm-color-accent-hovervar(--prizm-rc3-300)--prizm-color-accent-fgvar(--prizm-slate-950)Light mode
--prizm-color-accentvar(--prizm-rc3-700)--prizm-color-accent-hovervar(--prizm-rc3-800)--prizm-color-accent-fgoklch(100% 0 0)Activation
RC3 surfaces opt in by setting data-pack="rc3" on the scope element. Token files gate on the composed selector:
[data-zone="c3"][data-mode="dark"][data-pack="rc3"] { ... }
[data-zone="c3"][data-mode="light"][data-pack="rc3"] { ... }The App Shell sets the attribute when an RC3 app is active. The custom-element wrapper sets it on the shadow root when RC3 embeds in a legacy host.
Contrast — WCAG AA
Computed with the same OKLCH→sRGB→WCAG path as scripts/audit-contrast.ts. Eight accent pairings, all clearing AA with margin.
| Mode | Pairing | Ratio | Target | Status |
|---|---|---|---|---|
| dark | accent (rc3-400) on bg | 7.20:1 | 4.5:1 | PASS |
| dark | accent (rc3-400) on surface | 5.29:1 | 4.5:1 | PASS |
| dark | accent-fg (slate-950) on accent | 7.04:1 | 4.5:1 | PASS |
| dark | accent-hover (rc3-300) on bg | 9.01:1 | 4.5:1 | PASS |
| light | accent (rc3-700) on bg | 6.83:1 | 4.5:1 | PASS |
| light | accent (rc3-700) on surface | 7.36:1 | 4.5:1 | PASS |
| light | accent-fg (white) on accent | 7.36:1 | 4.5:1 | PASS |
| light | accent-hover (rc3-800) on bg | 9.06:1 | 4.5:1 | PASS |