We keep white, a warm off-white, black and a green. The task is to settle the exact colours before we build more, so nothing gets re-skinned later. Below is the science, then three complete options shown as real mini-pages side by side, every colour in context.
Green sits at the peak of the eye's brightness sensitivity (~555nm), so it carries about 72% of a colour's luminance, roughly ten times blue's. That makes a bright lime nearly as bright as white.
Our current lime #B5FF2B measures 1.2:1 on white (fails, basically unreadable) but 15:1 on black (excellent). Because contrast is fixed by lightness, no single green can pass on both white and black. This is maths, not taste.
Every serious design system (Material, Radix, IBM Carbon) solves this the same way: a deep green for light backgrounds and a bright green for dark backgrounds, chosen as two tones of one hue and swapped by context.
The second colour follows harmony theory: green's opposite is red, too aggressive at full strength, so the sound partner is a muted warm accent in the terracotta-to-brass band that also shares warmth with the beige. And by the 60-30-10 rule, green is the ~10% accent, never a big surface on white.
| Colour | on white | on warm sand | on ink | role |
|---|---|---|---|---|
| #B5FF2B lime | 1.2 fail | 1.2 fail | 15 pass | bright, dark bg only |
| #1F6B3B forest | 6.5 pass | 5.8 pass | — | green on light (A/C) |
| #14532D emerald | 9.1 pass | — | — | green on light (B) |
| #34D17C / #3FE07A | — | — | 9-11 pass | green on dark (A/B) |
| #C25E3A clay | 4.2 UI | — | — | secondary (A) |
| #B0853E brass | 3.4 UI | — | — | secondary (B) |
Thresholds: 4.5:1 normal text, 3:1 large text and UI. Small text on clay/brass uses a darkened variant (#A8482A / #8A6A2E).