Colors
The YotoShelf color system — brand coral, botanical green, paper-cream neutrals, pastel section families, and semantic tokens.
Click any swatch to copy the CSS variable name to your clipboard. All values are sourced from packages/tokens/tokens.css — the canonical source of truth.
Brand — Coral
The primary accent is a coral #E8654A — softer and warmer than Yoto's own orange. Use --color-primary for CTAs, active states, and key interactive elements. Apply sparingly; the background palette carries most of the warmth.
Display Accent — Peach
Peach #FDB07A is a secondary accent for display moments: hero callouts, feature card headers, illustrated highlights. It echoes Yoto's own warm orange but in a softer, pastelled register. Not for interactive affordances — those use coral.
Neutrals — Paper Cream
The base palette is paper-cream #F5F0E8 with botanical green #2D4A35 as the primary text colour. This is deliberately distinct from Yoto's own pinkish #F5F0F0 — the cream reads warmer, the green grounds the shelf metaphor. Everything leans warm; never pure gray or blue-tinted.
Pastel Section Families
Four pastel families — sage, dusty blue, butter, blush — assign a distinct identity to each major section or content type. Use as chip/badge backgrounds, section-header tints, and card accents. Each family has a paired foreground for accessible contrast.
Semantic
Communicates status and feedback. Each semantic color has a subtle background variant for use on surfaces.
Sidebar
A tinted-parchment palette for the navigation surface, tunable independently of the main background.