Spacing and layout

An 8 px rhythm, a 1200 px content column, four corner radii and thin lines instead of shadows.

Spacing

Multiples of 8 px, with 4 px for tight spots. Sections have 32 px above and 80 px below; cards have 32 px top and bottom, 24 px at the sides. Tailwind’s spacing scale (4 px steps) covers all of them.

space-14 px
Icon to label.
space-28 px
Inside inputs; icon tile radius.
space-316 px
Grid gaps between cards; top-bar gaps.
space-424 px
Button side padding; card side padding.
space-532 px
Card top and bottom padding; section top.
space-648 px
Between a heading and its content block.
space-764 px
Below the CTA band.
space-880 px
Section bottom padding.

Widths and heights

TokenValueForMeasured
content1 200 pxContent column, centred, with 15 px side padding.div.section-wrapper max-width 1200px, padding 0 15px
measure820 pxNarrow text column; docs pages.div.container_inner max-width 820px
top-bar40 pxThe Dyp mørkerød strip above the header.div.header-top height 40px
header81 pxThe white header row (121 px with the top bar).div.header height 121px incl. top bar

Docs pages use the 820 px measure (max-w-ds-measure) for text, and the full width for wide specimens. Bands and the header run the full window width; content inside them stays in the column.

Corner radii

rounded-ds-sm4 pxHeader CTA, pink button.
rounded-ds-md6 pxPrimary buttons, search field.
rounded-ds-lg8 pxIcon tiles, nav items, neutral button.
rounded-ds-xl12 pxCards, images, bands.

Lines, not shadows

ntb.no has no drop shadows. Cards and fields get a 1 px line; links get a 2 px underline drawn as an inset shadow.

StrokeValueFor
border1px solid var(--ds-line)Cards, header rule, table rules.
underline-input2px solid (on-brand at 50 %)Newsletter inputs: bottom border only.
link-underlineinset 0 -2px 0 0 var(--ds-link-underline)Text links ("Se alle kurs"), drawn as an inset shadow.
active-tab2px solid var(--ds-accent)Active item in the top bar.

Rhythm in a section

A heading, 16 px, a paragraph, 24 px, a button; then a band.

Light

Send pressemeldinger

Fra kommunikasjonsplattformen kan dere publisere, distribuere og måle effekten av pressemeldingene.

Spørsmål?

Ta kontakt
Dark

Send pressemeldinger

Fra kommunikasjonsplattformen kan dere publisere, distribuere og måle effekten av pressemeldingene.

Spørsmål?

Ta kontakt

Do

  • Space with the 8 px steps; group related things closer than unrelated ones.
  • Keep text columns at 820 px or narrower.

Don’t

  • Don’t add drop shadows to lift cards; use the line or a raised surface.
  • Don’t mix radii within one component.