Design system

Colours, type, spacing and components taken from www.ntb.no, measured in the browser, written down as tokens, and used by this repo's docs. For designers, developers and anyone checking a prototype against the brand.

At a glance

The same sample in light and dark. Switch Theme in the bar above to see the Default (gray) version.

Light

Bilder og video

Størst på nyhetsbilder

Nyhetsbilder fra inn- og utland, hver dag. Les mer om bildeportalen.

Nyheter

Dark

Bilder og video

Størst på nyhetsbilder

Nyhetsbilder fra inn- og utland, hver dag. Les mer om bildeportalen.

Nyheter

Principles

White page, warm bands

Content sits on white. Warm grey bands and Dyp mørkerød bands set sections apart, full width.

Dyp mørkerød acts

The deep red is for things you press and for brand bands. Lys rosa is its partner for text on it.

Lava is a spark

Lava marks: the logo, a stripe, an eyebrow, a tinted icon tile. It is never a button and never body text.

Borders, not shadows

Cards have a 1 px line and 12 px corners. ntb.no uses no drop shadows.

One typeface

Geist for everything, from 64 px headlines to 14 px labels. Weight and size carry the hierarchy.

Dark mode is ours

ntb.no has none. Ours keeps the brand bands and turns the page warm near-black (decision DS3).

What’s here

Page	What it covers
Colour	Brand palette, 35 semantic tokens per theme and mode, contrast checks.
Typography	Geist; the site scale (12 steps) and the calmer docs scale.
Spacing and layout	The 8 px rhythm, content widths, radii, borders.
Components	11 component pages, each variation in light and dark.

Using the tokens

Every token is a CSS custom property and a Tailwind utility. Colours follow the Theme and Mode in the prototype bar on their own; never add dark: variants for them.

Kind	CSS	Tailwind
Colour	`var(--ds-ink)`	`text-ds-ink, bg-ds-band`
Type step	`var(--text-ds-title)`	`text-ds-title, text-ds-docs-h2`
Radius	`var(--radius-ds-xl)`	`rounded-ds-xl`
Width	`var(--container-ds-measure)`	`max-w-ds-measure`
Force a mode	`.ds-light, .ds-dark`	`className="ds-dark dark"`

Source: src/platform/design-tokens/tokens.ts and tokens.css. Tests keep the two in step and check contrast. See decisions for the choices made.

Use semantic tokens (ink, band, action), not brand hex values.
Check a new screen in both modes and both themes.

Don’t

Don’t hard-code #320002 or #ff5120 in components.
Don’t invent new colours; add a token and record why.