Spacing and layout

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.

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

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

• Web Styleguide (NDW-UI) spacing tokens
• View templates in Nordea Design System

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