03 — BRAND

The brand, as it exists in the code

This page renders from the token file itself, not from values typed in by hand. Change a colour in the code and it changes here — and nowhere else does.

01 — Colour

Roles, not swatches. Every value is read straight from the token file, so this page cannot show a colour the code does not use.

--background#08090c

The page. Near-black with a faint blue undertone.

--background-alt#0d0f14

One step up from the page, for banded sections.

--background-dark#050609

One step down. The footer plate and the deepest panels.

--card#0f1117

A raised panel. Separated by a hairline, never by a shadow alone.

--popover#12141b

Menus and overlays — one step above card.

--secondary#14161d

Quiet control fill.

--muted#12141a

Inline code, table zebra, disabled fill.

--foreground#e8eaed16.5:1 on bg

Body and headline text. Not pure white — pure white on near-black glares.

--muted-foreground#9aa0ac7.4:1 on bg

Secondary text, eyebrows, captions. Clears AA at body size.

--accent#5e9eff7.5:1 on card

THE one accent. Links, focus ring, active state, primary CTA. Roughly once per viewport. There is no second accent.

--primary#5e9eff

Same value as accent, by design — the primary action IS the signal.

--primary-light#85b6ff

Hover step on the accent.

--accent-foreground#06070a

Text ON the accent. Near-black, because white on #5e9eff measures 2.69:1 and FAILS AA.

--primary-foreground#06070a

See accent-foreground. This value exists because of that measurement, not by taste.

--emphasis#9db4ff

A lighter tint of the same hue. NOT a second accent — same colour story.

--destructive#f0635b

Error, deletion, refusal.

--success#3ddc97

Completed, connected, healthy.

--warning#f5b73d

Needs attention, limit approaching, degraded.

02 — Lines

--borderrgb(255 255 255 / 0.09): The hairline. The primary separator in the whole system — depth comes from hairlines, not shadows.
--inputrgb(255 255 255 / 0.37): The boundary of a form control, so WCAG 1.4.11 applies and the floor is 3:1. Measured 3.37:1. It is NOT the decorative hairline; it used to share --border's 0.09 alpha and every field edge was effectively invisible (1.32:1).
--ring#5e9eff: Focus ring. The accent, so focus is never invisible.

03 — Retired

--ember#f2653f2026-08-03
A warm orange accent inherited from the external Datacode export. DESIGN.md says 'No second accent', so ember is retired rather than demoted. brand.test.ts asserts it appears zero times in apps/agent-site/src and apps/marketing/src.

04 — Type

Three families, three jobs. Anything tabular or machine-ish is mono.

display · Space Grotesk

NORD doet het werk

Headlines and the wordmark. Thin grotesk with negative tracking.

body · Instrument Sans

NORD doet het werk

Body, UI, everything not a headline and not data. NOT Inter.

mono · Spline Sans Mono

0123456789 · €12,40 · 2026-08-04 · a461dbd

Anything tabular or machine-ish: costs, token counts, ids, timestamps, model names, commit shas, section eyebrows.

serif · Instrument Serif

NORD doet het werk

Legacy warm/editorial themes only. Not part of the noir identity.

05 — Space

--radius: 0.5rem

rounded-full is reserved for avatars and status dots. A pill-shaped button is a slop signal and scripts/design-lint.mjs rule R4 fails on it.

4px

8px

12px

16px

22px

32px

48px

72px

112px

06 — Motion

150ms · cubic-bezier(0.16, 1, 0.3, 1)

Hover shifts border or opacity, never transform.
One orchestrated entrance per page, not per element.
reducedMotion="user" is mandatory on every MotionConfig.

07 — Mark

NORD has no logo mark. The wordmark is the identity. There is deliberately no placeholder mark here.

NORD

08 — The written version

This page shows the values. The identity — what NORD is, how it sounds, what is forbidden — lives in docs/BRANDBOOK.md.

docs/BRANDBOOK.md · DESIGN.md · packages/design-tokens/tokens.json

NEDERLANDS