Colour tokens store the colour variables for styling elements.
Colour can be used for branding, providing visual hierarchy and giving visual cues for action.
The Helsinki Design system colour tokens are based on the City of Helsinki brand colour palette. More information on using and combining the brand colours in the City of Helsinki Visual Identity Guidelines - Colours.
Also see visual "Do and Don't" example images in the Colour usage examples - Abstract collection. These images will help you understand where brand colours and their variants can be used.
- Use bold colours to attract users attention to most important content and primary actions.
- Use lighter hues and shades to fade less important information to the background but be sure to maintain an accessible colour contrast.
- Colour can also be used to differentiate sections or content types.
The design system uses a colour theme that includes:
- Primary colour: the colour displayed most frequently across your service and its components. If you are not using a secondary colour, your primary colour can also be used to accent elements.
- Secondary and Tertiary colours: these provide more ways for accenting select UI elements and distinguishing your service. The secondary and tertiary colours should be applied sparingly and with intent.
- UI colours: the common colours for feedback (error, warning, success, info).
- Grayscale: neutral colour shades.
- Focus colours: the common colours for focus.
The colour palette also provides lighter and darker variants for the base colours.
- Do not use light and dark variants as the main colour of a page.
- Light and dark variants should only be used in addition to base colours for theming UI component states and differentiating information types.
Colours are defined as CSS variables and the theme is therefore customisable.
When customising colours always check that:
- the colour combination follows the City of Helsinki Visual Identity Guidelines - Safe color combinations
- the colour contrast is compliant with WCAG 2.1 Standard at AA Level contrast ratios. Note that font size affects the contrast criteria of text elements. You can find tools for checking contrast accessibility in the Resources page
Brand colours are used for primary, secondary and tertiary colours. They should not be used for indicating system status.
Brand colours also have dark, medium light and light variants. You can find these tokens on the Tokens tab. Before using Dark and Light brand colour variants, please see example images in the Colour usage examples - Abstract collection.
|Colour name (en)||Colour name (fi)||Example|
|Coat of Arms||Vaakuna|
|[Table 1:Brand colours]|
Status colours are reserved exclusively for indicating valid, invalid, or informational states on the service.
|Status name||Usage||Example message||Example|
|Info||State which does not indicate clear success or failure but can be useful extra information to the user.||"You have received new messages."|
|Success||Positive state to inform user about success.||"Form submit was successful!"|
|Alert||Warning state to catch users attention but does not require immediate actions.||"Loading is taking longer than expected."|
|Error||Error state which requires users immediate action.||"Form is missing critical information."|
|Focus||Indication for active selected element which helps users navigating the page with a keyboard.|
|[Table 2:Status colours]|
Grayscale colours are neutral shades that can be used for all user interface purposes. Be mindful of the colour contrast especially on lighter shades of gray. Check the Accessibility tab for more information about grayscale contrast.