Internal reference

Colour System

A single-hue OKLCH palette with perceptually uniform lightness steps, deliberate chroma scaling by role, and a hue that rotates across the lightness axis. Hex values serve as fallbacks for browsers without oklch() support (~5% of users). On capable displays, the accent and opposite tokens exceed the sRGB gamut into Display P3.

Live tokens

Reflects your current OS colour preference.

--bg
--bg-surface
--bg-elevated
--border-subtle
--border
--text-mid
--text
--accent
--opposite

Both modes

Static — always visible regardless of OS preference.

Dark

--bg oklch(0.30 0.090 143) #1b5034 Page background
--bg-surface oklch(0.38 0.105 146) #206a42 Card / panel surface
--bg-elevated oklch(0.47 0.118 148) #288051 Raised element
--border-subtle oklch(0.55 0.120 150) #379060 Divider lines
--border oklch(0.66 0.130 152) #4fb57f Interactive borders
--text-mid oklch(0.82 0.045 155) #aed0be Secondary text
--text oklch(0.98 0.005 147) #fcfdfc Primary text
--accent oklch(0.82 0.275 145) #0bd569 Interactive accent
--opposite oklch(0.63 0.220 27) #d5150b Contrast / highlight

Light

--bg oklch(0.87 0.075 158) #afe4c8 Page background
--bg-surface oklch(0.82 0.095 155) #95dfb8 Card / panel surface
--bg-elevated oklch(0.77 0.110 152) #7fd7a8 Raised element
--border-subtle oklch(0.72 0.100 150) #6fc899 Divider lines
--border oklch(0.63 0.115 147) #4ab07a Interactive borders
--text-mid oklch(0.38 0.075 144) #2f513f Secondary text
--text oklch(0.12 0.010 147) #020303 Primary text
--accent oklch(0.42 0.210 145) #1a7a42 Interactive accent
--opposite oklch(0.88 0.070 27) #fcc8c5 Contrast / highlight

How it's composed

1

Hue rotates across the lightness axis

Dark backgrounds start at H 143 (more lime, warmer). As tokens get lighter they drift toward H 158 (more teal, cooler). The eye reads this as atmospheric depth — like the colour shift between forest floor and canopy — rather than a mechanical single-hue ramp. The 15° rotation is subtle enough to be felt rather than noticed.

143°
146°
148°
150°
152°
155°
158°
2

Chroma scales by role

Backgrounds have low chroma (C 0.09). Borders have medium chroma (C 0.13). The accent sits at peak chroma for the P3 gamut (C 0.275–0.28). This means focal hierarchy is intrinsic to the palette — more saturated elements feel more important without any additional visual treatment. The accent is visually "louder" not because it's bigger or bolder, but because it's more chromatic.

bg C 0.09
surface C 0.105
elevated C 0.118
border-subtle C 0.12
border C 0.13
accent C 0.275
3

Accent and opposite use the full P3 gamut

oklch(0.82 0.275 145) for the accent green and oklch(0.63 0.220 27) for the opposite red both sit outside the sRGB boundary. On a Display P3 screen (any Apple device since 2016, most modern monitors) these render as genuinely fluorescent colours impossible to reproduce in print or on older screens. No separate @supports block needed — the browser gamut-maps automatically, clipping to sRGB on incapable displays.

sRGB fallback
#0bd569
OKLCH / P3
oklch(0.82 0.275 145)
sRGB fallback
#d5150b
OKLCH / P3
oklch(0.63 0.220 27)
4

Browser cascade

Three layers, each overriding the previous when supported:

Layer 1 :root { --bg: #1b5034 } Hex — all browsers, ~5% of users stop here
↓
Layer 2 @supports (color: oklch(0 0 0)) { --bg: oklch(0.30 0.090 143) } OKLCH — Chrome 111+, Safari 15.4+, Firefox 113+ (~95%)
↓
Implicit oklch(0.82 0.275 145) → Display P3 gamut Browser gamut-maps OKLCH to widest available gamut automatically