Colors
One accent in two weights, warm neutrals, forest-green text, and the contrast rule that decides which accent you may use.
Click any swatch to copy the CSS variable name. Every value here is read from packages/tokens/tokens.css, which is the canonical source: if a colour is not in that file, it is not a YotoShelf colour.
The accent, in two weights
There is one brand hue, #E8654A, and it ships as two tokens because a single colour cannot legibly do both of its jobs.
--color-primary is the accent as a shape: button fills, borders, focus rings, the nav band. White on it computes 3.29:1, which passes the WCAG AA threshold for non-text contrast (3:1) and fails the threshold for text (4.5:1). That trade is accepted deliberately for labels bounded by a large solid fill.
--color-primary-deep is the accent as text: inline links, active-state labels, anything a reader parses as a sentence. It sits at the same hue (10.4° against the accent's 10.3°) and is dropped in lightness until it clears 4.5:1 on every surface the system actually puts it on.
The rule in one line: if it is a shape, use --color-primary; if it is a sentence, use --color-primary-deep. Never set inline text on a light background in the raw accent.
Contrast table
Computed against the token hexes. "Text" means the pair clears AA for normal-size text (4.5:1); "non-text" means it clears AA for user-interface components and graphical objects (3:1) but must not carry running text.
| Foreground | Background | Ratio | Clears | Where it is used |
|---|---|---|---|---|
| white #FFFFFF | accent #E8654A | 3.29:1 | non-text | Button labels and icons on an accent fill |
| accent #E8654A | page #FBF9F9 | 3.13:1 | non-text | Borders, focus rings, the nav band |
| accent-deep #B84A33 | page #FBF9F9 | 4.92:1 | text | Inline links, text accents |
| accent-deep #B84A33 | card #FFFFFF | 5.17:1 | text | Links inside cards |
| accent-deep #B84A33 | secondary button | 4.51:1 | text | Secondary button label |
| accent-deep #B84A33 | tint #FDEFED | 4.61:1 | text | Active state on an accent tint |
| forest #003C1F | page #FBF9F9 | 12.02:1 | text | All body copy |
| forest #003C1F | yellow #FBD924 | 9.03:1 | text | Default badge |
| #0D3D22 | success #E8F5EE | 10.97:1 | text | Success badge |
| white #FFFFFF | accent band | 3.29:1 | residual | Nav links — see the note below |
Known residual. Nav links are white on the accent band at 3.29:1, below AA for text. No foreground clears 4.5:1 against a fill this light — black itself tops out at 6.38:1 and is not part of the palette. Fixing it means darkening the band, which is a brand decision rather than a CSS one. It is recorded here so it is not rediscovered and quietly patched by desaturating the accent.
Neutrals
The base is a pinkish near-white #FBF9F9 with forest green #003C1F as the text colour: 12.02:1, comfortably past AAA. These are unchanged and deliberately so; they carry the family-audio register that the accent alone would not.
Forest greens
Three steps of the text green, used for body copy, footer surfaces, icon strokes, and hover states on neutral controls.
Semantic
Status and feedback. Each has a subtle background variant for use on surfaces; the success pair is unchanged from the previous system.
Sidebar and chrome
A slightly tinted neutral for the navigation surface, tunable independently of the page background.