Skip to main content
Designsystemet logoDesignsystemet logo
Go back to the home page

Theme Builder

ColoursDimensions

Main

accent
neutral

Support

brand1
brand2

Severity

Activate to override severity colors

Color Overrides

Override specific token colors for light and dark modes. Make sure to check contrasts after changes.

accent
neutral
brand1
brand2

Suggested base border radius

Manual base border radius

Use theme

The name should represent the organisation or product you are profiling.
Config FileCLI
1

Copy the code snippet and run it on your machine to generate design tokens (JSON files). in Core UI Kit (opens in new tab) to update a theme directly in Figma. Read more about these options on your own theme (opens in new tab) page.

2

Run the code snippet to generate CSS variables for code.

1

Save your config file as "designsystemet.config.json" where you want the tokens and CSS to be generated.

2

Open a terminal in the same folder as the config file. Run the code snippets to generate tokens and CSS variables for code.

Something not working?

Send us a message on Slack (opens in new tab) or create a Github issue (opens in new tab).

Import config

Already have a config file? Paste it here to select and edit a theme.
accent
Background
Default
Tinted
Surface
Default
Tinted
Hover
Active
Border
Subtle
Default
Strong
Text
Subtle
Default
Base
Default
Hover
Active
Contrast Subtle
Contrast Default
neutral
brand1
brand2

See your colours in use

Each colour selected with the tool gets its own card in the section on the right so you can see how the colours harmonise together.

Note that the contrast colour inside the button changes from white to black, depending on whether the selected colour is light or dark, to achieve the best possible contrast.

View:

accent

Colours make life more colourful

neutral

Colours make life more colourful

brand1

Colours make life more colourful

brand2

Colours make life more colourful

Color Tokens

Here you can see which tokens have been used to create the cards in the section above.

Contrasts between colours

Here are the contrasts between the different steps in the colour scales, and whether the colours meet WCAG requirements.

AAA

Text and background must have a contrast of at least 7:1 to meet the WCAG AAA requirement.

AA

Text and background must have a contrast of at least 4.5:1 to meet the WCAG AA requirement.

AA18

Text and background must have a contrast of at least 3:1 and a font size of 18 px or larger to meet the WCAG AA requirement.

DECO

Does not meet any WCAG contrast requirements and should only be used for decorative purposes.

Text and Border against Background and Surface

When you switch between the color scales, you will see that the contrasts between the colors in the section below are almost identical. This means you only need to consider the contrasts for one color scale to understand how all of them work. Since the contrasts are consistent, you can also combine different colors across the scales.

Background Default
#ffffff
Background Tinted
#eef4fa
Surface Default
#ffffff
Surface Tinted
#ddeaf6
Surface Hover
#c7ddf0
Border Subtle
#99c0e3
DECO
1.9:1
DECO
1.7:1
DECO
1.9:1
DECO
1.5:1
DECO
1.3:1
Border Default
#2a7cc5
AA18
4.3:1
AA18
3.9:1
AA18
4.3:1
AA18
3.5:1
AA18
3.1:1
Border Strong
#005db1
AA
6.5:1
AA
5.9:1
AA
6.5:1
AA
5.3:1
AA
4.6:1
Text Subtle
#005db1
AA
6.5:1
AA
5.9:1
AA
6.5:1
AA
5.3:1
AA
4.6:1
Text Default
#002c54
AAA
14.1:1
AAA
12.7:1
AAA
14.1:1
AAA
11.5:1
AAA
10:1

Base colours

The colours selected in the tool get the Base Default token in each colour scale. This means it is important to choose a colour that has over 3:1 contrast against surface colours if it is to be used as an important, meaningful colour. The tool also creates two contrast colours that can be safely used on top of the base colours. These contrast colours become either light or dark depending on the base colour.

Background Default
#ffffff
Background Tinted
#eef4fa
Surface Default
#ffffff
Contrast Subtle
#dbe9f5
Contrast Default
#ffffff
Base Default
#0062BA
AA
6:1
AA
5.4:1
AA
6:1
AA
4.9:1
AA
6:1
Base Hover
#004f96
AAA
8.2:1
AAA
7.4:1
AAA
8.2:1
AA
6.6:1
AAA
8.2:1
Base Active
#003d75
AAA
10.9:1
AAA
9.8:1
AAA
10.9:1
AAA
8.8:1
AAA
10.9:1