Decisions

The choices behind the design system: what we took from ntb.no and where we changed it. Open one to see why.

Where it comes from

Colours, type, spacing and components copy ntb.no as it looks today, measured in the browser.DS1
The brief asked for ntb.no as the reference. The receipt already uses the brand guide's colour names, so we use them too. Measured in Chrome at a 1851 px wide window, without accepting cookies.
Source: www.ntb.no, computed styles, 2026-10-07 · NTB brand guide (ntb.anti.guide)
Example pictures come from our own sample images, not from ntb.no's photos.DS12
The repo has to stand on its own, and ntb.no's images aren't ours to copy.

Secondary text is a warm grey that's a little darker than ntb.no's, so it stays readable.DS2
ntb.no's grey is only 4,2:1 on the warm grey band and fails WCAG AA. The warm grey from the brand guide passes on white and on the band, and the receipt already uses it.
Small orange text uses a darker orange than the logo, so it can be read.DS5
ntb.no sets its small headings in plain Lava, which is about 3,3:1 on white and fails WCAG AA.
Four extra colours (blue, violet, amber, green) mark kinds of things in diagrams, without meaning good or bad.DS13
The im-web introduction needed four distinct, equal colours. Borrowing the warning amber for "What it costs" would have read as a warning.
There is a red for errors and for the "don't" side of examples.DS15
The layout diagrams needed a "wrong" colour that isn't amber (padding) or violet (margin), and errors need one anyway.

We designed a dark mode, since ntb.no has none: warm near-black, with the brand's deep red and orange kept.DS3
ntb.no has no dark mode. These choices keep the brand recognisable in the dark (the button pairing is ntb.no's own newsletter button), and every text pair passes AA in tests.
With the Default theme the components look the same, just in neutral greys without the NTB brand.DS4
The Theme setting in the app header and prototype menu has to apply to the design system and its examples too.
Light and dark examples can sit side by side on the same page.DS8
Tailwind's dark variant follows the whole page, so it can't be switched off inside a light panel.

Docs pages use smaller, calmer headings than the public site.DS6
The brief: a working docs site, not a marketing page.
Four corner sizes and no drop shadows; cards stand out with a line or a lighter surface.DS10
Measured: ntb.no uses only these radii, and its only shadow is an inset one under links.

Every page is built from the same layout pieces: sections, a centred container, 12 columns, and one 16 px unit of space.DS14
Measured on ntb.no and checked against IBM Carbon's 2x Grid: both use this pattern.
Source: www.ntb.no, 2026-10-08 · https://www.carbondesignsystem.com/elements/2x-grid/overview

The design values live in one place for code and one for styles, and a test keeps them matching.DS7
One source each for code and CSS, without a build step.
The whole docs site is styled with the design system; the prototype menu and standard controls keep their own look.DS9
The brief. The tokens sit in the shared platform because the whole site uses them; this feature documents them. Sender colours carry meaning, so they stay.