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 andbase03(#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
#4bbcd4in light and Solarized’s own cyan#2aa198in 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).
Why it feels the way it does
Every choice above has a technical reason and a felt one. The technical reason is Solarized. The felt one is biophilic design — building environments that connect people to the natural world, and choosing calm over impact.
Biophilic design is the designing for people as a biological organism, respecting the mind-body systems as indicators of health and well-being in the context of what is locally appropriate and responsive. […] Above all, biophilic design must nurture a love of place.
— 14 Patterns of Biophilic Design, Terrapin Bright Green
That is the whole reason the page background is a warm #fdf6e3 rather than pure white, and why our cyan is dialled down from the original bright brand colour. Neutral, natural tones are less overwhelming than saturated ones; a low-glare warm surface is easier to sit with for an hour than a bright one. The literature on biophilic environments reports lower stress and better sustained focus, and that is the effect we want from a page someone might read on their worst day.
It carries into art selection as well as colour. The botanical illustrations and natural imagery across the site are not filler — they are the same decision as the palette, made with pictures instead of hex values.
A palette tuned for comfort over punch is a biophilic choice before it is an aesthetic one.
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 |
Header & footer |
Panel |
Neutral panel |
Text & accents
Body text |
Emphasized text |
Primary & CTA |
Secondary |
Lily-pad tints
Cyan |
Green |
Yellow |
Coral |
Violet |
Rose |
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.
Paper mapping: the palette as ink
The broadsides are printed sheets, so they need the palette rendered as ink rather than as light. These are the values they use, and the reasoning behind them lives in Designing for Paper.
Paper has no dark mode. Everything above turns on the light ↔ dark mirror; none of that applies here. These values do not flip, because paper does not.
They are measured on white, not on our cream. A background colour does not print — browsers leave Background graphics off by default — so the warm #fdf6e3 surface never reaches the sheet. Ink is measured against the substrate it will actually meet.
The screen accents cannot cross over. Measured as body ink on white, five of Solarized’s eight accent hues fail WCAG AA as they ship — yellow, cyan and green at about 3.2:1, blue 3.7:1, violet 4.4:1 — and orange, red and magenta scrape past at roughly 4.6:1. Our own primary is the clearest case: #4bbcd4 is a calm call-to-action on a cream screen and 2.2:1 on white paper, which is not a colour you can print words in.
So each ink is a house tone or hue darkened until it clears. That is existing practice rather than a new invention — our light-mode secondary (#345c00) is already a darkened Solarized green. Paper simply needs it done to more of them.
| Role | Variable | Value | On white | Derived from |
|---|---|---|---|---|
| Ink | --sb-ink | #002b36 | 15.0:1 | Solarized base03 |
| Secondary prose | --sb-ink-2 | #073642 | 13.0:1 | Solarized base02 |
| Small print, credits | --sb-ink-3 | #586e75 | 5.4:1 | Solarized base01 |
| Spot — blue | --sb-spot | #175a7d | 7.5:1 | Solarized blue, darkened |
| Spot — magenta | --sb-spot | #96215c | 7.9:1 | Solarized magenta, darkened |
| Spot — orange | --sb-spot | #9c3a11 | 6.9:1 | Solarized orange, darkened |
| Spot — violet | --sb-spot | #4c50a0 | 7.1:1 | Solarized violet, darkened |
| Spot — cyan | --sb-spot | #0d5f59 | 7.5:1 | Solarized cyan, darkened |
| Spot — green | --sb-spot | #495400 | 8.2:1 | Solarized green, darkened |
Every value above is dark enough to carry white text, which is why each swatch is legible as its own label. Ratios are against white paper and were measured, not estimated. The swatch cells carry print-color-adjust: exact so the colour survives to paper — without it the backgrounds drop out and the labels print white on white, which is the very fault this section documents.
Each sheet takes a pair
A broadside uses two spots: one on the face, one on the reverse, carried as a coloured bar across the top of each side. The pair is the point. With six usable hues there are more sheets than hues before long, so a hue repeats — and it already has: green now appears on three sheets, magenta and violet on two each. A pair has never repeated, and the bar is what tells you which sheet you are holding when several are face-down in a stack. That is the reason not to reach for a tenth colour when the pairs start running low.
| Sheet | Face | Reverse |
|---|---|---|
| Eye Contact | blue | magenta |
| Behaviorism | orange | violet |
| Sensory Access at Work | cyan | green |
| Positive Greetings at the Door | violet | green |
| Cavendish Space | green | magenta |
These are not theme presets. Unlike the core palette above, the paper inks are declared as literal hex inside each broadside’s own block — the same arrangement as the Progressive Pride accents below. There is no has-…-background-color class for them, and setting one will not produce them.
Rainbow (Progressive Pride) mapping
The decorative rainbow accents on the site — most visibly the Progressive Pride accordions on the philosophy pages — use the Progressive Pride Flag palette. Unlike the core palette above, these are applied as inline hex on individual blocks, so they don’t flip on their own. Each light value is standardized to the flag’s standard hex, and dark mode remaps it with an attribute-selector override keyed to that value (see the Reading Experience notes, §7). When updating a block, set its color to the Light value; the Dark value is what dark mode maps it to automatically.
| Color | Light | Dark |
|---|---|---|
| Red | #e40303 | #8f2b2b |
| Orange | #ff8c00 | #9a5416 |
| Yellow | #ffed00 | #7a6d18 |
| Green | #008026 | #1f6636 |
| Blue | #004dff | #2f4f9c |
| Violet | #750787 | #5a2d73 |
| Pink | #ffafc8 | #8a4a5e |
| Light blue | #74d7ee | #23697a |
| Brown | #613915 | #6b4a30 |
| White | #ffffff | #3c4245 |
| Black | #000000 | #2c2c2f |
White and black can’t stay literal in dark mode — white would glare and black would vanish into the page — so they map to a neutral slate and a near-black grey. Every dark bar carries light text. Use the full 6-digit hex (e.g. #ffffff, not #fff) so the dark-mode selectors match.
The swatch cells above carry print-color-adjust: exact. Without it the backgrounds drop out when the page is printed — browsers omit background graphics by default — and every light-text label prints white on white. A colour reference that goes blank on paper is not much of a reference. See Designing for Paper.