This is the visual reference for the Stimpunks color system: what our palette is, why it looks the way it does, and how we derive it from Solarized. It complements the Reading Experience design & technical notes in the IT Field Guide (which cover how the palette — and the rest of the reading experience — is implemented) and the House Style Guide in the Editorial Field Guide (which covers how we write). Both are part of building access into the foundation rather than bolting it on — the same principle behind why we don’t use accessibility overlays.

The Solarized foundation

Our palette derives from Solarized, a sixteen-color scheme by Ethan Schoonover, designed for readability and low eye strain. Instead of chasing maximum contrast, Solarized fixes its colors in a perceptual color space so their relationships stay balanced and gentle to read for long stretches.

It divides into eight monotone “base” tones — from the darkest, base03, to the lightest, base3 — plus eight accent hues: yellow, orange, red, magenta, violet, blue, cyan, and green. The property we lean on hardest is that Solarized’s light and dark modes are deliberate mirror images of one another: the same base tones, reordered. Switching modes becomes a matter of swapping base3 ↔ base03 and base2 ↔ base02 for surfaces and lifting the text tones by a step, while the accent hues hold their place.

How we derive from it

That mirror relationship is the backbone of our two modes:

• Surfaces use the warm base tones. The page background is Solarized base3 (#fdf6e3) in light and base03 (#002b36) in dark — the low-glare warm background Solarized was built around, chosen over pure white to reduce eye strain. The header, footer, and panels sit a step off the page in the same family.
• Text mirrors across modes: near-black on the light page, and Solarized base0 (#839496) on the dark page, with an emphasized tone a step brighter.
• Accents keep their hue in both modes but are tuned to the surface behind them. Our primary is a cyan — a subdued #4bbcd4 in light and Solarized’s own cyan #2aa198 in dark — dialed down from the original bright brand cyan so calls-to-action read as calm rather than glaring.
• Lily-pad tints — the soft background washes behind grouped content — are pale Solarized-accent tints in light mode, spread around the wheel for variety. In dark mode they all resolve to a single Solarized panel tone (base02, #073642).

The palette in use

These swatches use the live palette variables, so they render in whichever mode you are currently viewing. Flip the Auto / Light / Dark control in the header and watch them change. Each caption gives the color’s role and its palette slug.

Surfaces

Page background base

Header & footer custom-color-1

Panel custom-color-3

Neutral panel tertiary

Text & accents

Body text contrast

Emphasized text black

Primary & CTA primary

Secondary secondary

Lily-pad tints

Cyan custom-color-2

Green custom-color-4

Yellow custom-color-5

Coral custom-color-6

Violet custom-color-7

Rose custom-color-8

Light ↔ dark mapping

The exact values behind each role, in both modes. The accent hues persist across modes; only their tone adapts. Everything that reads as a “raised” surface resolves to #073642 in dark.

Role	Slug	Light	Dark
Page background	base	#fdf6e3	#002b36
Header & footer	custom-color-1	#fcf6e5	#002b36
Panel	custom-color-3	#ece8d9	#073642
Neutral panel	tertiary	#f2efe6	#073642
Body text	contrast	#000000	#839496
Emphasized text	black	#000000	#93a1a1
Primary / CTA	primary	#4bbcd4	#2aa198
Secondary	secondary	#345c00	#859900
Lily pad — cyan	custom-color-2	#d4ece9	#073642
Lily pad — green	custom-color-4	#cfe6cf	#073642
Lily pad — yellow	custom-color-5	#f1e6c2	#073642
Lily pad — coral	custom-color-6	#f6dccb	#073642
Lily pad — violet	custom-color-7	#e3d9f2	#073642
Lily pad — rose	custom-color-8	#f4d8e3	#073642
Pullquote	block style	#eee8d5	#073642

In implementation, each value is declared once with the CSS light-dark() function, so a single declaration carries both modes. The switching mechanism, the Auto / Light / Dark toggle, and the component-level details live in the Reading Experience technical notes.