Login

Spacing and layout

Introduction

Last updated: 22 October 2024, 10:58 by Daniel Wysocki

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

Principles

Clear structure
  • We design using a 8 pixel grid framework
  • Layout of views should be consistent across different pages
  • Establish hierarchy by applying spacing methods

 

Responsive
  • Design layouts that adapt to different screen sizess
  • Ensure design consistency and usability in different breakpoints

 

Accessible
  • Apply spacing methods consistently
  • Ensure clear relationships between elements
  • Avoid reflow by designing for one-directional scrolling

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 (iOS and Android)

Token (web)

Value

Size

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

Mobile

Tablet

Desktop

Value (px)

320px – 767px

768px – 1199px

1200px – infinite

Columns

4

8

12

Gutters (px)

16

16

24

Margin

8

8

12

Figma preview

Open in Figma

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