User Interface

Grid and Spacing

Grids and spacing help you systematically structure a page. Learn how to use a grid and how to apply flexible scales for spacing between elements.

Grids
  • Grids
  • Spacing
  • Flexible scales

Grids

Grids can help you structure your content. There is no universal grid suitable for all digital products. Each product and touchpoint has different grid requirements. Placing elements vertically and horizontally flush to one another adds a balanced overall look. Clear axes give the user orientation.

Spacing

Clear spacing helps to distinguish elements in a very natural way. Use larger spacing to clearly separate elements, smaller spacing to group them together. 

Flexible scales

Depending on the use case, you can use different spacing scales. Feature-rich interface applications need smaller spacing to accommodate all features. Magazine style content uses larger spacing to achieve a open layout. The scale is based on the base unit and also takes the current breakpoint into account. Furthermore, the 2xl, 3xl and 4xl spacing scales (see table below) can accommodate different screen sizes.

Recommended scales

Name

Calculation

Mobile Breakpoint

Desktop Breakpoint

$dhl-spacing-xxs

Base unit * 0.25

4px

4px

$dhl-spacing-xs

Base unit * 0.5

8px

8px

$dhl-spacing-s

Base unit * 0.75

12px

12px

$dhl-spacing-m

Base unit

16px

16px

$dhl-spacing-l

Base unit * 1.5

24px

24px

$dhl-spacing-xl

Base unit * 2

32px

32px

$dhl-spacing-2xl

Exponential

40px¹

42px¹

$dhl-spacing-3xl

Exponential

50px¹

56px¹

$dhl-spacing-4xl

Exponential

64px¹

72px¹

¹ Size depends on viewport width

Spacious scales

Name

Calculation

Mobile Breakpoint

Desktop Breakpoint

$dhl-spacing-xxs

Base unit * 0.25

4px

6px

$dhl-spacing-xs

Base unit * 0.5

8px

12px

$dhl-spacing-s

Base unit * 0.75

12px

18px

$dhl-spacing-m

Base unit

16px

24px

$dhl-spacing-l

Base unit * 1.5

24px

36px

$dhl-spacing-xl

Base unit * 2

32px

48px

$dhl-spacing-2xl

Exponential

40px¹

66px¹

$dhl-spacing-3xl

Exponential

52px¹

90px¹

$dhl-spacing-4xl

Exponential

66px¹

126px¹

¹ Size depends on viewport width