Foundations
Colour, type, spacing and layout: the tokens and principles every component is built from.
- ColourThree brand colours carry ntb.no: Dyp mørkerød, Lava and Lys rosa, on white with warm grey. Components use semantic tokens, which pick the right value for the theme and mode.
- DiagramsBoxes and arrows for architecture and flows, in the same flat style as the charts: hairlines, warm panels, one accent. Placed automatically, so nobody draws coordinates.
- Docs layoutA page is a stack of sections. Each section has a container, the container has a row of 12 columns, and the columns hold the content. One unit of space, half a gutter, keeps it all aligned.
- Docs layout, no headingsThe same layout on a short page with no sections to list. Nothing moves when you switch between this page and the one with headings.
- Layout principlesHow pages are laid out: the layers a page is built from, and one rule for space that keeps everything aligned. The same pattern on ntb.no and in IBM's Carbon Design System.
- Spacing and layoutAn 8 px rhythm, a 1200 px content column, four corner radii and thin lines instead of shadows.
- TypographyOne typeface, Geist, in two scales: the site scale as measured on ntb.no, and a calmer docs scale for working pages like this one.