Login

Spacing and layout

Introduction

Last updated: 9 January 2026, 13:15 by Daniel Wysocki

Nordea Design System uses a framework of various spacing methods to ensure a predictable and harmonious layout.

Principles

Clear Structure

  • Our design system rely on an 8px grid framework. All increments are a multiple of 4px. This helps give pages and forms a consistent visual rhythm.
  • Layout of views should be consistent across different pages.
  • Establish hierarchy by applying spacing methods.

Grouping and Proximity

  • Spacing and grouping can be achieved by adjusting proximity and distance. This is done with white space and if needed dividers.

Responsive

  • Design layouts that adapt to different screen sizes and reflow gracefully.
  • Ensure design consistency, usability and accessibility at all breakpoints.

Accessible

  • Apply spacing methods consistently.
  • Ensure clear relationships between elements.

Design Process Step by Step

  • Start with the stacked components without spacing.
  • Add 16px of vertical spacing between components.
  • To emphasise grouping, you can add extra spacing below groups when they are followed by more content. Eg. Increasing the spacing from 16px to 24px or 32px.
  • Spacing and grouping can be achieved by adjusting proximity and distance. This is done with white space and if needed dividers.

Grid Framework

General Principles

  • We design using a 8 pixel grid framework.
  • Nordea Common Components (NCC) follow common spacing values.
  • Specify margins and paddings for custom components using the common spacing values.
Token (mobile) Token (web) Value
xSmall $space-xs 4px
Small $space-s 8px
Medium $space-m 12px
Large $space-l 16px
xLarge $space-xl 24px
xxLarge $space-xxl 32px

Breakpoints

Use this set of standard breakpoints to maintain layout integrity across screen sizes.

Breakpoint Value (px) Columns Gutters (px) Margin (px)
Mobile 320px – 767px 4 16 12
Tablet 768px – 1199px 8 24 24
Desktop 1200px – infinite 12 24 24

Guidelines to Follow

Sources

  1. Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.3.4 Orientation
  2. Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.10 Reflow