Skip to content
Theme Lab

Specimen 001 · Nord

Design decisions, held up to the light.

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.

Colors in palette
16
Semantic tokens
34
Accent families
6

About Nord

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.com
01

Palette

The raw source colors, grouped as the theme's own authors group them.

Polar Night

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

Snow Storm

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

Frost

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

Aurora

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

02

Semantic tokens

What the raw colors are actually used for. Components name these, never the hexes above.

Surfaces & fills

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

Accent families

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

Text roles

The quick brown fox ink
The quick brown fox ink-muted
The quick brown fox ink-faint
The quick brown fox accent-ink

Lines

line — hairline, dividers
line-strong — focus, active
03

Contrast audit

Every foreground/background pair on this page, measured at build time and graded.

Light mode

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

Dark mode

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

04

Typography

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

05

Buttons, badges & callouts

Every interactive weight, plus the accent families doing semantic work.

Variants

Sizes

With icons & states

Text links

An inline accent link inside a sentence, next to a quiet underlined link for comparison.

Badges

Shipped In review Blocked Draft Archived Default

With leading dot

Operational Degraded Outage

Callouts

Note

The accent carries structure — links, focus, primary actions.

Success

Deploy finished in 14 seconds.

Warning

This certificate expires in nine days.

Error

Could not reach the origin server.

06

Cards

Four treatments at four volumes: bordered, media, accent fill, and deep block.

Consistent surfaces

Three background levels — page, surface, raised — carry the entire depth model. No shadows required, though they are available.

Read more

Rationed color

Six accent families, each with a fill, a text-safe ink, and a soft tint. Semantics first, decoration second.

Read more

One markup, many themes

Nothing in this page names a color. Every component reads semantic tokens, so a theme is a variable swap.

Read more

Field notes

Why neutrals should not be neutral

A grey that leans toward the accent hue makes large surfaces feel intentional instead of unfinished.

AN

A. Norling

6 min read

Highlighted

One card the eye lands on first

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

Uptime
99.98%
Median deploy
14s
Open incidents
0
07

Quotes & pull text

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.
MR

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.”
DH

Dev Halloran

Engineering lead

“The dark variant was not an afterthought for once. It shipped the same day as the light one.”
PR

Priya Raghunathan

Product design

08

Block text

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.

On the second level of hierarchy

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.

And a third, for the stubborn cases

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.

  • Body copy sits at a comfortable reading size, never smaller than sixteen pixels.
  • Line height opens up as the measure widens — long lines need more air, not less.
  • List markers take the accent color, which is the cheapest hierarchy available.
  • Nothing in the reading column uses more than two colors of text.

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.

09

Bento grid

Mixed tile weights on one grid — the fastest way to see the whole palette cooperating.

Bento

Tiles of different weight, one grid

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

  • Tokens resolve at runtime
  • Dark mode is a variable swap
  • No color literals in markup

Raised

One bar in accent; the rest recede.

10

Tables & forms

Dense data, status tints, focus rings, and an error state.

Workstreams

Status colors come from the accent families.

Project Owner Status Progress
Palette rollout M. Ryland Shipped
100%
Token export D. Halloran In review
74%
Dark variant audit P. Raghunathan Blocked
31%
Type scale v2 A. Norling Draft
12%
Showing 4 of 28

Form controls

Focus rings use the accent — tab through to see them.

Enter a valid email address.

Preferences
11

Pricing

Three tiers, one lifted onto the deep block.

Sketch

For trying a palette on a weekend project.

$0 /month

  • One theme
  • Light and dark
  • Community support

Studio

Most picked

For teams shipping more than one surface.

$24 /month

  • Unlimited themes
  • Token export (CSS, JSON)
  • Contrast auditing
  • Priority support

Foundry

For design systems with a public API.

$96 /month

  • Everything in Studio
  • Versioned token releases
  • Figma sync
  • Dedicated review
12

FAQ

Native disclosure, no JavaScript.

Frequently asked

A disclosure list — native <details>, no JavaScript.

Why is every theme page identical?
Because comparison only works when there is exactly one variable. The markup, the copy, and the layout are shared across every theme page — the only difference between this page and the next one is the token file.
What happens to a component that needs a color the theme has not got?
It does not get built. Six accent families plus the neutral scale is the budget. A component that needs a seventh color is usually a component that needs a rethink.
Is dark mode generated automatically?
No. Each theme declares its dark token set by hand. Deriving dark from light algorithmically produces something that technically passes contrast and still feels wrong.
How is contrast verified?
It is measured, not asserted. Specimen 03 computes the WCAG ratio for every foreground/background pair on this page at build time and prints the grade, including the pairs that only reach AA Large. Where a theme ships a color that does not pass, the color is kept as published and the shortfall is shown.
13

Calls to action

Three volumes: full-bleed accent, raised newsletter, deep split.

Ready to see this palette on something real?

Full accent fill, edge to edge. The loudest band a page gets — one per page, at the end.

A quieter call to action

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

The same ask, on the dark block

Useful directly above a dark footer, where an accent band would cut the page in half.