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 · Nord
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.
Nord was designed by Arctic Ice Studio as a sixteen-color palette for code editors, then spread outward into full interface design. Its neutrals are not grey — they are desaturated blue, which keeps large surfaces calm without going flat. Frost adds four cool accents for structure and interaction. Aurora adds five warmer signal colors, deliberately few and deliberately used sparingly: when everything else is blue, a single warm badge carries real weight.
nordtheme.comContents
The raw source colors, grouped as the theme's own authors group them.
Four dark shades. The origin point of the palette — background and deep blocks in dark mode, body text and hero blocks in light mode.
#2e3440 nord0
Base background / body text
#3b4252 nord1
Raised panels, code blocks
#434c5e nord2
Selection, hairlines on dark
#4c566a nord3
Muted text, disabled states
Three bright shades. Text on dark, surfaces on light. Never pure white — the faint blue cast is the point.
#d8dee9 nord4
Hairlines on light, dim text on dark
#e5e9f0 nord5
Raised panels on light
#eceff4 nord6
Page background on light
Four cool accents — the "icy" heart of Nord. Structural color: links, focus rings, primary actions, headings.
#8fbcbb nord7
Frozen polar water — teal
#88c0d0 nord8
Bright, clear ice — primary on dark
#81a1c1 nord9
Arctic waters — secondary
#5e81ac nord10
Deep arctic ocean — primary on light
Five signal colors. Errors, warnings, success, and rare emphasis. Ration these — their power comes from scarcity.
#bf616a nord11
Red — errors, destructive
#d08770 nord12
Orange — deprecation, caution
#ebcb8b nord13
Yellow — warnings, highlights
#a3be8c nord14
Green — success, additions
#b48ead nord15
Purple — rare emphasis, numerics
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.
23/24 at AA
| Aa | ink on surface | 12.49 | AAA |
| Aa | ink on raised | 10.26 | AAA |
| Aa | ink-muted on surface | 7.38 | AAA |
| Aa | ink-faint on surface | 5.67 | AA |
| Aa | ink-faint on page | 4.92 | AA |
| Aa | ink-faint on raised | 4.65 | AA |
| Aa | accent-ink on surface | 5.55 | AA |
| Aa | accent-ink on tint | 4.84 | AA |
| Aa | accent-on on accent | 4.03 | AA Large |
| Aa | accent-on on hover | 5.55 | AA |
| Aa | contrast-ink | 10.84 | AAA |
| Aa | contrast-ink-muted | 6.73 | AA |
| Aa | red-ink on surface | 6.03 | AA |
| Aa | red-ink on tint | 5.10 | AA |
| Aa | orange-ink on surface | 5.46 | AA |
| Aa | orange-ink on tint | 4.79 | AA |
| Aa | yellow-ink on surface | 5.00 | AA |
| Aa | yellow-ink on tint | 4.57 | AA |
| Aa | green-ink on surface | 5.16 | AA |
| Aa | green-ink on tint | 4.64 | AA |
| Aa | teal-ink on surface | 5.52 | AA |
| Aa | teal-ink on tint | 4.95 | AA |
| Aa | purple-ink on surface | 5.28 | AA |
| Aa | purple-ink on tint | 4.65 | AA |
24/24 at AA
| Aa | ink on surface | 10.84 | AAA |
| Aa | ink on raised | 8.73 | AAA |
| Aa | ink-muted on surface | 9.25 | AAA |
| Aa | ink-faint on surface | 6.52 | AA |
| Aa | ink-faint on page | 7.62 | AAA |
| Aa | ink-faint on raised | 5.26 | AA |
| Aa | accent-ink on surface | 6.24 | AA |
| Aa | accent-ink on tint | 5.04 | AA |
| Aa | accent-on on accent | 6.24 | AA |
| Aa | accent-on on hover | 5.99 | AA |
| Aa | contrast-ink | 13.50 | AAA |
| Aa | contrast-ink-muted | 7.53 | AAA |
| Aa | red-ink on surface | 5.40 | AA |
| Aa | red-ink on tint | 4.72 | AA |
| Aa | orange-ink on surface | 5.48 | AA |
| Aa | orange-ink on tint | 4.65 | AA |
| Aa | yellow-ink on surface | 8.00 | AAA |
| Aa | yellow-ink on tint | 5.76 | AA |
| Aa | green-ink on surface | 6.13 | AA |
| Aa | green-ink on tint | 4.67 | AA |
| Aa | teal-ink on surface | 5.99 | AA |
| Aa | teal-ink on tint | 4.56 | AA |
| Aa | purple-ink on surface | 5.46 | AA |
| Aa | purple-ink on tint | 4.60 | AA |
On the amber rows: a pair marked AA Large
clears 3:1 but not 4.5:1 — enough for headings, icons, and non-text UI, not enough for body
copy. The one to watch is accent-on on accent in light mode at 4.03:1
. These are kept as the palette publishes them rather than nudged until the number looks
better, so text sitting on them is set at semibold and small copy is kept off them entirely.
Text on accent
4.03:1
#ffffff
Text on hover
5.55:1
#ffffff
Ink on surface
12.49:1
#2e3440
Ink on raised
10.26:1
#2e3440
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.