Colors
Semantic tokens, the brand gradient, and the Zynactra palette.
Colors come in layers. Semantic tokens say what a value is for (surface, text-muted, brand, danger) and are the only colors product code may use. Each theme defines them for light and dark. shadcn variables (--primary, --muted...) are mapped onto them, so every component follows.
Semantic tokens
Showing Zynactra. Switch themes in the sidebar to compare.
| Token | Light | Dark |
|---|---|---|
| --zy-bg | #F3F0EA | #0D0C0B |
| --zy-surface | #FFFFFF | #1A1816 |
| --zy-surface-sunken | #FAF8F4 | #110F0E |
| --zy-surface-muted | #EAE6DE | #24211E |
| --zy-border | #DAD5CB | #2E2A26 |
| --zy-border-strong | #141210 | #F3F0EA |
| --zy-text | #141210 | #F3F0EA |
| --zy-text-muted | #6B655C | #A39D93 |
| --zy-text-subtle | #8A847A | #7E786F |
| --zy-inverse | #141210 | #F3F0EA |
| --zy-inverse-text | #F3F0EA | #141210 |
| --zy-brand | #F04A00 | #FF5A14 |
| --zy-brand-text | #B83700 | #FF9A63 |
| --zy-brand-soft | #FFF4ED | #2A160C |
| --zy-on-brand | #141210 | #141210 |
| --zy-focus | #F04A00 | #FF7433 |
| --zy-success | #1E7A4C | #4CC285 |
| --zy-success-soft | #E7F3EC | #11261B |
| --zy-warning | #8A5A00 | #E5A93B |
| --zy-warning-soft | #FBF1DC | #2A2010 |
| --zy-danger | #B42318 | #F2685C |
| --zy-danger-soft | #FBE9E7 | #2D1412 |
| --zy-info | #2650C8 | #7C9BF2 |
| --zy-info-soft | #E8EEFB | #141C33 |
| --zy-overlay | rgba(13, 12, 11, 0.55) | rgba(0, 0, 0, 0.65) |
| --zy-chart-1 | #141210 | #F3F0EA |
| --zy-chart-2 | #F04A00 | #FF5A14 |
| --zy-chart-3 | #B8B1A5 | #8A847A |
| --zy-chart-4 | #8F2B00 | #FF9A63 |
| --zy-chart-5 | #FF9A63 | #B83700 |
| --zy-chart-6 | #6B655C | #A39D93 |
The brand gradient
Every theme has one. In Zynactra it's heat (700 → 500 → 300 of Recorder Orange); in Sunset it's the website's purple → pink → orange.
| Utility | Use |
|---|---|
bg-brand-gradient | Rules, progress, active indicators |
bg-brand-fill | Brand button fill, with text-brand-foreground on top |
text-brand-gradient | Display text, 32px and up only |
brand-underline | A 2px brand line under an element (Zynactra's focused fields) |
Solid brand colors: bg-brand, text-brand-strong (for text: it passes contrast), bg-brand-soft.
Zynactra palette
The raw ramps behind the Zynactra theme, for reference. Product code never uses these directly.
n-0#FFFFFF
n-50#FAF8F4
n-100#F3F0EA
n-200#EAE6DE
n-300#DAD5CB
n-400#B8B1A5
n-500#8A847A
n-600#6B655C
n-700#4A453F
n-800#2E2A26
n-900#1A1816
n-950#141210
n-975#0D0C0B
h-50#FFF4ED
h-100#FFE3D2
h-200#FFC4A1
h-300#FF9A63
h-400#FF7433
h-500#F04A00
h-600#D44000
h-700#B83700
h-800#8F2B00
h-900#5C1C00
Contrast rules
- Text on brand fills uses
text-brand-foreground, which each theme sets to pass 4.5:1 against its wholebrand-fillgradient. - Colored text uses
text-brand-strong.text-brandis for fills and marks; in some themes (Zynactra, Volt) it fails as small text. - Status colors never travel alone: always an icon and a word.
text-subtle-foregroundis for placeholders and disabled states, never body copy.