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 · Colophon
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.
Colophon starts from a question rather than a mood: how much of a theme's character actually comes from its palette? It is built to spend as little on color as a working interface can — a true white reading surface, four warm carbon darks, and a single oxblood accent that exists in one depth for light mode and one for dark. There is no second color. The six Marginalia tones are deliberately drained, present only so that an error can look like an error, and pitched to read like notes pencilled in a margin rather than like a palette asserting itself. What is left to carry the page is typography: Spectral set at a generous measure, real hierarchy between the three heading levels, and rules that are hairlines rather than boxes. The result is meant to feel like a university press rather than a product — appropriate for serious writing that wants to be taken seriously, and quiet enough that photographs, book covers, and a person's own face become the color on the page.
On the craft — Bringhurst, The Elements of Typographic StyleContents
The raw source colors, grouped as the theme's own authors group them.
Four paper stocks. Unlike most warm palettes this one keeps a true white for the reading surface — the restraint is the statement, and it gives the ink the most room it will ever have.
#ffffff col0
True white — the reading surface
#faf9f7 col1
Laid paper — page background
#f1efec col2
Text block — raised panels
#e3e0da col3
Deckle — hairlines and rules
Four carbon darks, warmed a fraction off neutral. Printer's ink is never truly black, and the warmth is what keeps a page of body copy from feeling like a terminal.
#171614 col4
Carbon — hero, footer, deep blocks
#1f1e1b col5
Text black — body copy
#33312d col6
Impression — hairlines on dark
#56524b col7
Grey ink — muted text, captions
The whole accent, in two depths — one for each scheme. Two colors is the entire budget: links, focus rings, primary actions, drop caps, and the one thing per page you want clicked.
#6e2b30 col8
Oxblood — primary on light
#c9838a col9
Faded claret — primary on dark
Six drained tones, present only so meaning has somewhere to live. Pitched to read as notes pencilled in a margin — if one of these ever looks like decoration, it is being used wrong.
#b23b31 col10
Scarlet — errors, destructive
#8e6234 col11
Umber — caution, deprecation
#7d6729 col12
Brass — warnings, highlights
#5f7350 col13
Laurel — success, additions
#4d6b70 col14
Slate — informational
#6b5a78 col15
Faded violet — 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 | 16.67 | AAA |
| Aa | ink on raised | 14.52 | AAA |
| Aa | ink-muted on surface | 7.77 | AAA |
| Aa | ink-faint on surface | 5.45 | AA |
| Aa | ink-faint on page | 5.18 | AA |
| Aa | ink-faint on raised | 4.75 | AA |
| Aa | accent-ink on surface | 10.24 | AAA |
| Aa | accent-ink on tint | 8.91 | AAA |
| Aa | accent-on on accent | 10.24 | AAA |
| Aa | accent-on on hover | 12.41 | AAA |
| Aa | contrast-ink | 17.19 | AAA |
| Aa | contrast-ink-muted | 6.30 | AA |
| Aa | red-ink on surface | 5.89 | AA |
| Aa | red-ink on tint | 5.14 | AA |
| Aa | orange-ink on surface | 5.32 | AA |
| Aa | orange-ink on tint | 4.77 | AA |
| Aa | yellow-ink on surface | 5.46 | AA |
| Aa | yellow-ink on tint | 4.83 | AA |
| Aa | green-ink on surface | 5.18 | AA |
| Aa | green-ink on tint | 4.64 | AA |
| Aa | teal-ink on surface | 5.75 | AA |
| Aa | teal-ink on tint | 5.11 | AA |
| Aa | purple-ink on surface | 6.25 | AA |
| Aa | purple-ink on tint | 5.52 | AA |
24/24 at AA
| Aa | ink on surface | 13.85 | AAA |
| Aa | ink on raised | 11.96 | AAA |
| Aa | ink-muted on surface | 9.93 | AAA |
| Aa | ink-faint on surface | 5.42 | AA |
| Aa | ink-faint on page | 5.86 | AA |
| Aa | ink-faint on raised | 4.68 | AA |
| Aa | accent-ink on surface | 5.37 | AA |
| Aa | accent-ink on tint | 4.60 | AA |
| Aa | accent-on on accent | 5.37 | AA |
| Aa | accent-on on hover | 7.21 | AAA |
| Aa | contrast-ink | 17.78 | AAA |
| Aa | contrast-ink-muted | 6.78 | AA |
| Aa | red-ink on surface | 6.00 | AA |
| Aa | red-ink on tint | 5.46 | AA |
| Aa | orange-ink on surface | 6.23 | AA |
| Aa | orange-ink on tint | 5.46 | AA |
| Aa | yellow-ink on surface | 7.39 | AAA |
| Aa | yellow-ink on tint | 6.48 | AA |
| Aa | green-ink on surface | 6.99 | AA |
| Aa | green-ink on tint | 6.13 | AA |
| Aa | teal-ink on surface | 6.52 | AA |
| Aa | teal-ink on tint | 5.79 | AA |
| Aa | purple-ink on surface | 6.02 | AA |
| Aa | purple-ink on tint | 5.38 | 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 Colophon's printed colors are
lifted or darkened for their
ink
role, while the base
fill stays exactly as published.
Text on accent
10.24:1
#ffffff
Text on hover
12.41:1
#ffffff
Ink on surface
16.67:1
#1f1e1b
Ink on raised
14.52:1
#1f1e1b
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.