Mobile
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
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
Guidelines to follow
Sources
- Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.3.4 Orientation
- Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.10 Reflow