Theme Builder

Main

accent

neutral

Support

brand1

brand2

Severity

Activate to override severity colors

Use theme

Give your theme a name

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

Copy the code snippet and run it on your machine to generate design tokens (JSON files), or paste it into the Designsystemet's Figma plugin (opens in new tab) 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.

Format for Windows

npx @digdir/designsystemet@next tokens create \--main-colors "accent:#0062BA" \--neutral-color "#24272B" \--support-colors "brand1:#0D7A5F" "brand2:#5B3FA0" \--border-radius 4 \--theme "theme"

Run the code snippet to generate CSS variables for code.

npx @digdir/designsystemet@next tokens build

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

{  "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",  "outDir": "./design-tokens",  "themes": {    "theme": {      "colors": {        "main": {          "accent": "#0062BA"        },        "support": {          "brand1": "#0D7A5F",          "brand2": "#5B3FA0"        },        "neutral": "#24272B"      },      "borderRadius": 4    }  }}

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

npx @digdir/designsystemet@next tokens create --config designsystemet.config.jsonnpx @digdir/designsystemet@next tokens build --config designsystemet.config.json

Something not working?

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

Choose colour

Log in to the portal

Name

Password

Forgotten password?

All users

	Email
Ola Normann	ola@example.no	12345678
Kari Slotsveen	kari@example.no	12345678
Marcus Viken	marcus@example.no	12345678

Settings

Here you can manage display

Display mode

Mobile

Tablet

Computer

SportsNews

Travelled alone to the big city

Mona Kvist wanted to find her dream in New York City

People you may know

Designer

Ola Normann

Frontend

Kari Slotsveen

Backend

Marcus Viken