Six colors, taken from a tea tray.
Green from the pod, saffron from the jar, clay from the cups, milk and ink for everything else. Every value below is read live from the tokens, so it is always current.
Copy the exact values from here.
Pod Green
Deep Leaf
Saffron
Clay
Milk
Ink
CMYK values are a plain conversion from RGB. Ask your printer for values matched to their paper and press.
Use the colors in roughly these amounts.
Mostly Milk and Deep Leaf. Saffron is a pinch: if a layout looks yellow, there is too much.
These all text pairs pass WCAG AA.
Checked in your browser with the WCAG 2.2 contrast formula: at least 4.5:1 for normal text. Use any of these for words.
These few pairs work for large text only.
Between 3:1 and 4.5:1. Fine for headlines of 18pt and up (or 14pt bold), never for body text. Pairs below 3:1 are left out on purpose.
Developers use the tokens, never the raw values.
The tokens live in tokens/tokens.json (Design Tokens Community Group format, version 2025.10) and tokens/tokens.css.
| Use | CSS variable | Light | Dark |
|---|---|---|---|
| Page background | --bg | Milk | Ink |
| Raised surface | --surface | Paper | Deep Leaf |
| Text | --fg | Ink | Milk |
| Quiet text | --muted | Ink at 70% | Milk at 72% |
| Buttons and links | --accent | Pod Green | Saffron |
| Highlight | --highlight | Saffron | Saffron |
| Warnings | --alert | Clay | Clay |