Field notes
Why neutrals should not be neutral
A grey that leans toward the accent hue makes large surfaces feel intentional instead of unfinished.
A. Norling
6 min read
Specimen 001 · Summer Camp
This page exists to be looked at. Every component below is rendered from the same markup on every theme page, so the only variable is the palette, the type, and the shape of the thing.
This palette starts from the WPA park posters of the late 1930s and the coloring books that came after them: flat inks on absorbent paper, warm neutrals that have faded a stop or two, and a handful of colors that stayed vivid because they were laid down thick. The neutrals — Canvas and Bark — are deliberately off-axis, cream and umber rather than white and black, which lets serious material sit on them without the page feeling clinical. Trail is the cool counterweight: sage, lake, and deep water, carrying links, focus, and primary actions so the warm colors never have to do structural work. Pennant is the press run. It is meant to be spent sparingly, and it is what keeps the theme from reading as nostalgic wallpaper.
WPA park posters, 1935–1943 (Library of Congress)Contents
The raw source colors, grouped as the theme's own authors group them.
Four bleached lights. Paper, cream, old map, and tent duck — the surfaces. None of them is white, and that is the entire point.
#fdfaf4 camp0
Bleached paper — reading surface
#f6efe2 camp1
Warm cream — page background
#ece1cd camp2
Aged map — raised panels
#dccdb2 camp3
Canvas duck — hairlines, dividers
Four warm darks. Umber and char rather than black — the deep blocks in light mode, the whole interface in dark mode.
#2b261f camp4
Char — hero, footer, body text
#38312a camp5
Leather — raised panels on dark
#4a4136 camp6
Bark — hairlines on dark
#6d6152 camp7
Driftwood — muted text, disabled
Three cool structurals. The counterweight to all that warmth: links, focus rings, and primary actions live here so Pennant never has to.
#9aab88 camp8
Lichen — soft structural sage
#5f8f92 camp9
Shallow lake — secondary
#35646e camp10
Deep water — primary on light
Five press-run colors. Clay, ember, goldenrod, moss, and twilight — flat inks that stayed vivid. Ration these; scarcity is where they get their volume.
#b3523f camp11
Clay — errors, destructive
#cd7a3f camp12
Ember — caution, deprecation
#dfa93f camp13
Goldenrod — warnings, highlights
#7f9450 camp14
Moss — success, additions
#8e6b93 camp15
Twilight — rare emphasis
What the raw colors are actually used for. Components name these, never the hexes above.
page
Behind everything
surface
Cards, reading area
raised
Panel on a panel
contrast
Deep block — hero, footer
accent
Primary action
accent-tint
Soft accent wash
Three roles per color: base fills,
ink is text-safe on surface,
tint is a soft background.
red
Aa · text on tint
orange
Aa · text on tint
yellow
Aa · text on tint
green
Aa · text on tint
teal
Aa · text on tint
purple
Aa · text on tint
ink ink-muted ink-faint accent-ink line — hairline, dividers line-strong — focus, active Every foreground/background pair on this page, measured at build time and graded.
24/24 at AA
| Aa | ink on surface | 14.40 | AAA |
| Aa | ink on raised | 11.59 | AAA |
| Aa | ink-muted on surface | 7.31 | AAA |
| Aa | ink-faint on surface | 5.62 | AA |
| Aa | ink-faint on page | 5.12 | AA |
| Aa | ink-faint on raised | 4.52 | AA |
| Aa | accent-ink on surface | 7.28 | AAA |
| Aa | accent-ink on tint | 6.31 | AA |
| Aa | accent-on on accent | 6.30 | AA |
| Aa | accent-on on hover | 8.42 | AAA |
| Aa | contrast-ink | 13.12 | AAA |
| Aa | contrast-ink-muted | 5.07 | AA |
| Aa | red-ink on surface | 5.75 | AA |
| Aa | red-ink on tint | 4.91 | AA |
| Aa | orange-ink on surface | 5.26 | AA |
| Aa | orange-ink on tint | 4.64 | AA |
| Aa | yellow-ink on surface | 6.03 | AA |
| Aa | yellow-ink on tint | 5.33 | AA |
| Aa | green-ink on surface | 5.58 | AA |
| Aa | green-ink on tint | 4.78 | AA |
| Aa | teal-ink on surface | 6.14 | AA |
| Aa | teal-ink on tint | 5.30 | AA |
| Aa | purple-ink on surface | 6.20 | AA |
| Aa | purple-ink on tint | 5.28 | AA |
24/24 at AA
| Aa | ink on surface | 13.12 | AAA |
| Aa | ink on raised | 11.19 | AAA |
| Aa | ink-muted on surface | 9.79 | AAA |
| Aa | ink-faint on surface | 5.54 | AA |
| Aa | ink-faint on page | 6.03 | AA |
| Aa | ink-faint on raised | 4.73 | AA |
| Aa | accent-ink on surface | 5.34 | AA |
| Aa | accent-ink on tint | 4.54 | AA |
| Aa | accent-on on accent | 5.34 | AA |
| Aa | accent-on on hover | 6.85 | AA |
| Aa | contrast-ink | 15.58 | AAA |
| Aa | contrast-ink-muted | 7.00 | AAA |
| Aa | red-ink on surface | 5.94 | AA |
| Aa | red-ink on tint | 5.16 | AA |
| Aa | orange-ink on surface | 6.79 | AA |
| Aa | orange-ink on tint | 5.47 | AA |
| Aa | yellow-ink on surface | 8.66 | AAA |
| Aa | yellow-ink on tint | 6.41 | AA |
| Aa | green-ink on surface | 7.17 | AAA |
| Aa | green-ink on tint | 5.83 | AA |
| Aa | teal-ink on surface | 7.09 | AAA |
| Aa | teal-ink on tint | 5.56 | AA |
| Aa | purple-ink on surface | 6.26 | AA |
| Aa | purple-ink on tint | 5.31 | AA |
Every pair clears 4.5:1 in both schemes, so any of
these colors can carry body text on the background it is paired with. That is a property of
the token choices, not of the source palette — several of Summer Camp's printed colors are
lifted or darkened for their
ink
role, while the base
fill stays exactly as published.
Text on accent
6.30:1
#fdfaf4
Text on hover
8.42:1
#fdfaf4
Ink on surface
14.40:1
#2b261f
Ink on raised
11.59:1
#2b261f
Scale, families, and the measure — the part a palette cannot rescue.
6xl / display Wayfinding by daylight
4xl / page title Wayfinding by daylight
2xl / section Wayfinding by daylight
lg / lede Wayfinding by daylight
base / body Wayfinding by daylight
sm / secondary Wayfinding by daylight
xs / caption Wayfinding by daylight
Measure — 68 characters, serif
Type is the part of a theme you cannot fake with color. A palette can rescue a mediocre layout for about four seconds; the moment somebody reads a paragraph, the line height and the measure decide whether they keep going.
font-sans
Grumpy wizards
Interface, labels, navigation, and dense data.
font-serif
Grumpy wizards
Headlines, pull quotes, and long reading.
font-mono
Grumpy wizards
Tokens, code, and tabular numbers.
Numerals — tabular
0123456789
Four treatments at four volumes: bordered, media, accent fill, and deep block.
Three background levels — page, surface, raised — carry the entire depth model. No shadows required, though they are available.
Read more →
Six accent families, each with a fill, a text-safe ink, and a soft tint. Semantics first, decoration second.
Read more →
Nothing in this page names a color. Every component reads semantic tokens, so a theme is a variable swap.
Read more →
Field notes
A grey that leans toward the accent hue makes large surfaces feel intentional instead of unfinished.
A. Norling
6 min read
Highlighted
Full accent fill is the loudest move available. Use once per screen, and make sure it is the thing you actually want clicked.
This quarter
Display quotes on the deep block, pull quotes in flow, and a testimonial pair.
A palette is not a mood board. It is a set of promises about what the reader should look at next, and every color you add is one more promise you have to keep.
Marta Ryland
Design director, Northline
Pull quote in flow
The temptation with a sixteen-color palette is to use all sixteen. The discipline is to pick four and let the other twelve exist as options you decline.
Restraint is the only feature that never needs a redesign.
What is left after that subtraction is a page where the one warm badge in the corner actually means something, because nothing else on screen is competing for the same job.
“We rebuilt the whole marketing site on these tokens in a weekend. Nothing needed a color change afterward.”
Dev Halloran
Engineering lead
“The dark variant was not an afterthought for once. It shipped the same day as the light one.”
Priya Raghunathan
Product design
Nine hundred words with a sidebar competing for attention. The real test.
Every theme looks good on a landing page. A landing page is mostly whitespace, one photograph, and a headline set large enough that the type designer's opinion does all the work. The test that matters comes later, when somebody has to read nine hundred words of body copy on a Tuesday afternoon, and the only thing standing between them and closing the tab is whether the contrast holds and the measure is honest.
That is what this block is for. It is deliberately long, deliberately dense, and deliberately
full of the things that break a design system: an
inline link that has to be distinguishable from bold text without
shouting, a run of emphasised words that should read as emphasis rather than a
second heading, and a monospace token dropped mid-sentence where the baseline and
the x-height rarely agree.
Section headings inside an article have a harder job than page titles. They must separate without interrupting, which means they need enough weight to be found while scanning and little enough to be skipped while reading. Most systems solve this with size alone and end up with a heading that looks like a mistake.
If you cannot tell the heading from the paragraph at a squint, it is too quiet. If you notice it before you notice the paragraph, it is too loud.
The third level exists for documents that genuinely need it and for nobody else. When it is needed, italics plus a modest weight bump usually beats another size step, because the size steps have already been spent.
There is a version of this that goes too far, where the type system becomes so refined that nobody can add a page to the site without a meeting. The useful stopping point is earlier than that: enough structure that the obvious choice is also the correct one, and enough slack that a new component does not require a new token.
What remains is the part no palette can supply. The words have to be worth the setting.
Mixed tile weights on one grid — the fastest way to see the whole palette cooperating.
Bento
The layout works because the tiles disagree: a deep block, a tint, a plain surface, and a single accent fill. Same grid, four different volumes.
Primary
98%
of components need no override
Warning
Rationed
Accent colors mark meaning, not mood.
Surface
Raised
One bar in accent; the rest recede.
Dense data, status tints, focus rings, and an error state.
Status colors come from the accent families.
| Project | Owner | Status | Progress |
|---|---|---|---|
| Palette rollout | M. Ryland | Shipped | |
| Token export | D. Halloran | In review | |
| Dark variant audit | P. Raghunathan | Blocked | |
| Type scale v2 | A. Norling | Draft | |
Three tiers, one lifted onto the deep block.
For trying a palette on a weekend project.
$0 /month
For teams shipping more than one surface.
$24 /month
For design systems with a public API.
$96 /month
Native disclosure, no JavaScript.
A disclosure list — native <details>, no
JavaScript.
Three volumes: full-bleed accent, raised newsletter, deep split.
Full accent fill, edge to edge. The loudest band a page gets — one per page, at the end.
Same job, one volume down. When the page already has an accent band, the second ask lives on a raised surface instead.
No more than once a month. Unsubscribe anytime.
Deep-block variant
Useful directly above a dark footer, where an accent band would cut the page in half.