Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
BreakpointsPrinciplesAccessibilityUsageTokensColourSpacingTypography
Components
Patterns
About
Contributing
Resources

Breakpoints

Breakpoint tokens are used to keep services and products using HDS consistent across all screen sizes.

HDS includes tokenized values for both breakpoints and maximum container width in each breakpoint. Breakpoint tokens can be also used alongside HDS grid guidelines in order to create consistent designs and implementations.

Principles

  • Always use token of the same level for both the breakpoint and container width. This ensures consistency across all services using HDS breakpoint tokens. Read more about this in breakpoint usage.
  • Aim to provide all breakpoints listed in HDS tokens in your service. This way you ensure your service is usable with every common screen width.
  • For best results, test your designs and implementations at the edge of each HDS breakpoint.
  • It is recommended to use scaling methods HDS suggests for each breakpoint (see Breakpoints token table). However, it is allowed to use different scaling methods if it works better for the service.

Accessibility

  • When testing your designs and implementation at different breakpoints, pay extra attention how your service behaves if browser zoom functionality is used. Read more about the WCAG requirements considering reflow.

Usage

The breakpoint tokens are divided into two sets;

  • Breakpoint tokens define exact widths (in pixels) where the next breakpoint comes into effect.
  • Container width tokens define maximum container width in each breakpoint.

Note how these two sets of tokens are linked. You are supposed pick and use tokens from same level depending on the screen width. For example, when screen width is above 767 pixels and below 992 pixels you use --breakpoint-m token in combination with --container-width-m token.

HDS offers a Container component which follows breakpoint and container width tokens automatically. It is recommended to use it if possible. For more info and examples, see Container - React documentation and Container - Core documentation.

Tokens

Breakpoints

CSSSASSpx valueScaling method
--breakpoint-xs$breakpoint-xs≥ 320Scale columns
--breakpoint-s$breakpoint-s≥ 576Scale outside margins
--breakpoint-m$breakpoint-m≥ 768Scale outside margins
--breakpoint-l$breakpoint-l≥ 992Scale outside margins
--breakpoint-xl$breakpoint-xl≥ 1248Scale outside margins

Maximum container widths

CSSSASSpx value
--container-width-xs$container-width-xs288
--container-width-s$container-width-s544
--container-width-m$container-width-m720
--container-width-l$container-width-l944
--container-width-xl$container-width-xl1200