Colour

Stable

Colour tokens store the colour variables for styling elements.

Usage
Accessibility
Tokens

Usage

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.

Principles

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.

Usage

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.

Customising colours

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

HDS colours

Brand colours

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.

**Table 1**: Brand colours
Colour name (en)	Colour name (fi)	Example
Bus	Bussi
Coat of Arms	Vaakuna
Gold	Kulta
Silver	Hopea
Brick	Tiili
Copper	Kupari
Engel	Engel
Fog	Sumu
Metro	Metro
Summer	Kesä
Suomenlinna	Suomenlinna
Tram	Spåra

UI colours

Status colours are reserved exclusively for indicating valid, invalid, or informational states on the service.

**Table 2**: Status colours
Status name	Usage	Example message
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.

Grayscale

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.

**Table 3**: Grayscale
Black	90%	80%	70%	60%	50%	40%	30%	20%	10%	5%	White