03 — MERK

Het merk, zoals het in de code staat

Deze pagina wordt gerenderd uit het tokenbestand zelf, niet uit overgetypte waarden. Verandert een kleur in de code, dan verandert hij hier — en anders nergens.

01 — Kleur

Rollen, geen stalen. Alle waarden komen rechtstreeks uit het tokenbestand, dus deze pagina kan niets tonen wat de code niet gebruikt.

--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 — Lijnen

--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 — Uit gebruik

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

Drie families, drie taken. Alles wat tabelachtig of machineachtig is, 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 — Ruimte

--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 — Beweging

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 — Merkteken

NORD heeft geen logo-merkteken. Het woordmerk is de identiteit. Er staat hier bewust geen tijdelijk teken.

NORD

08 — De geschreven versie

Deze pagina toont de waarden. De identiteit — wat NORD is, hoe het klinkt, wat er niet mag — staat in docs/BRANDBOOK.md.

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

ENGLISH