Colour
Brand palette
Fixed colours, the same in every mode. Names follow NTB’s brand guide where it has one; Lys rosa, Blekk, Dempet and Linje are our names for values measured on ntb.no.
Dyp mørkerød#320002
Top bar, primary buttons, newsletter and footer bands, link underlines.
Lava#ff5120
Logo, eyebrow labels, the accent stripe, icon tiles at 8 % opacity.
Lys rosa#ffe2da
Text and buttons on Dyp mørkerød, the hero headline.
Varm grå 50#f5f1ef
Bands that set a section apart (the contact band).
Varm grå 200#ddd5d1
Rules in print (the receipt).
Varm grå 600#6d605b
Secondary text in print (the receipt).
Varm grå 950#1c1817
Darkest warm grey; the dark-mode page (ours).
Blekk#323232
Body text and headings on white; the neutral button.
Dempet#737373
Article card summaries on white.
Linje#e6e6e6
Card borders and the header rule.
Brand bands and Lava
Brand bands stay Dyp mørkerød in dark mode. Lava stays Lava; only its text version changes.
Meld deg på NTBs nyhetsbrev
Nyttige tips og triks
Vil du komme i kontakt med oss?
Meld deg på NTBs nyhetsbrev
Nyttige tips og triks
Vil du komme i kontakt med oss?
Semantic tokens
Use these in components. Each is --ds-name in CSS and bg-ds-name, text-ds-name or border-ds-name in Tailwind.
| Token | For | Light | Dark |
|---|---|---|---|
surface | The page. | #ffffff | #1c1817 |
surface-raised | Cards and panels on the page. | #ffffff | #241e1c |
band | A full-width band that sets a section apart; the docs sidebar. | #f5f1ef | #2b2422 |
ink | Headings and body text. | #323232 | #f5f1ef |
ink-muted | Secondary text: summaries, captions, metadata. | #6d605b | #b5aaa5 |
line | Card borders, table rules, dividers. | #e6e6e6 | #3b302b |
line-strong | Input underlines and borders that must be seen. | #9a918d | #6d605b |
brand | Brand bands: top bar, newsletter, footer. | #320002 | #320002 |
on-brand | Text on brand bands. | #ffe2da | #ffe2da |
action | Primary buttons. | #320002 | #ffe2da |
action-hover | Primary buttons, hovered. | #5c0a0c | #ffc9ba |
on-action | Text on primary buttons. | #ffffff | #320002 |
neutral-action | The neutral (secondary) button. | #323232 | #f5f1ef |
on-neutral-action | Text on the neutral button. | #ffffff | #1c1817 |
accent | Lava, as decoration: logo, stripe, active markers. Never body text. | #ff5120 | #ff5120 |
accent-text | Lava for small text that must be readable: eyebrow labels. | #c2380e | #ff7a52 |
accent-soft | Tinted tiles behind icons. | rgb(255 81 32 / 0.08) | rgb(255 81 32 / 0.16) |
link-underline | The underline under text links. | #320002 | #ff5120 |
focus | Keyboard focus outline. | #ff5120 | #ff7a52 |
info | Information text and markers. | #1d5fb8 | #8fb8f2 |
info-soft | Information background. | #e8f0fb | #1a2433 |
warning | Caution text and markers. | #8a5a00 | #f2c46b |
warning-soft | Caution background. | #fbf1dc | #2e2412 |
success | Positive text and markers. | #0a7350 | #6fd3aa |
success-soft | Positive background. | #e2f4ec | #12261e |
danger | Error and "don’t" text and markers. | #b3261e | #ff8a80 |
danger-soft | Error background. | #fbe9e7 | #3a1614 |
cat-1 | Category 1 (blue) in diagrams and legends: markers and text. | #1d5fb8 | #8fb8f2 |
cat-1-soft | Category 1 background. | #e8f0fb | #1a2433 |
cat-2 | Category 2 (violet). | #6b3fc4 | #c3a6f5 |
cat-2-soft | Category 2 background. | #f0eafb | #241a33 |
cat-3 | Category 3 (amber). | #8a5a00 | #f2c46b |
cat-3-soft | Category 3 background. | #fbf1dc | #2e2412 |
cat-4 | Category 4 (green). | #0a7350 | #6fd3aa |
cat-4-soft | Category 4 background. | #e2f4ec | #12261e |
Contrast
Every text colour on its background, against WCAG 2 for normal text (AA is 4.5:1). Tests fail if any pair drops below AA in any theme or mode.
| Text on background | Light | Dark |
|---|---|---|
ink on surface | 12,8 : 1 · AAA | 15,7 : 1 · AAA |
ink on band | 11,4 : 1 · AAA | 13,6 : 1 · AAA |
ink on surface-raised | 12,8 : 1 · AAA | 14,6 : 1 · AAA |
ink-muted on surface | 6,0 : 1 · AA | 7,8 : 1 · AAA |
ink-muted on band | 5,4 : 1 · AA | 6,7 : 1 · AA |
ink-muted on surface-raised | 6,0 : 1 · AA | 7,2 : 1 · AAA |
accent-text on surface | 5,4 : 1 · AA | 6,8 : 1 · AA |
accent-text on band | 4,8 : 1 · AA | 5,9 : 1 · AA |
on-brand on brand | 15,1 : 1 · AAA | 15,1 : 1 · AAA |
on-action on action | 18,5 : 1 · AAA | 15,1 : 1 · AAA |
on-action on action-hover | 14,0 : 1 · AAA | 12,6 : 1 · AAA |
on-neutral-action on neutral-action | 12,8 : 1 · AAA | 15,7 : 1 · AAA |
info on info-soft | 5,4 : 1 · AA | 7,7 : 1 · AAA |
warning on warning-soft | 5,3 : 1 · AA | 9,4 : 1 · AAA |
success on success-soft | 5,1 : 1 · AA | 8,8 : 1 · AAA |
danger on danger-soft | 5,6 : 1 · AA | 7,1 : 1 · AAA |
info on surface | 6,2 : 1 · AA | 8,6 : 1 · AAA |
warning on surface | 5,9 : 1 · AA | 10,8 : 1 · AAA |
success on surface | 5,9 : 1 · AA | 9,7 : 1 · AAA |
danger on surface | 6,5 : 1 · AA | 7,7 : 1 · AAA |
cat-1 on surface | 6,2 : 1 · AA | 8,6 : 1 · AAA |
ink on cat-1-soft | 11,2 : 1 · AAA | 13,9 : 1 · AAA |
surface on cat-1 | 6,2 : 1 · AA | 8,6 : 1 · AAA |
cat-2 on surface | 6,7 : 1 · AA | 8,5 : 1 · AAA |
ink on cat-2-soft | 10,9 : 1 · AAA | 14,7 : 1 · AAA |
surface on cat-2 | 6,7 : 1 · AA | 8,5 : 1 · AAA |
cat-3 on surface | 5,9 : 1 · AA | 10,8 : 1 · AAA |
ink on cat-3-soft | 11,4 : 1 · AAA | 13,6 : 1 · AAA |
surface on cat-3 | 5,9 : 1 · AA | 10,8 : 1 · AAA |
cat-4 on surface | 5,9 : 1 · AA | 9,7 : 1 · AAA |
ink on cat-4-soft | 11,2 : 1 · AAA | 14,2 : 1 · AAA |
surface on cat-4 | 5,9 : 1 · AA | 9,7 : 1 · AAA |
Plain Lava on white is 3,3 : 1, so small Lava text uses accent-text instead (decision DS5).
Do
- Use Dyp mørkerød for actions and brand bands.
- Use Lava for the logo, stripes, markers and eyebrows (through accent-text).
- Put text on the band colour only in ink or ink-muted.
Don’t
- Don’t use Lava as a button or a large fill.
- Don’t set body text in Lava or Lys rosa on white.
- Don’t add new greys: use ink, ink-muted, line and band.