Theme Builder

Main

accent

neutral

Support

brand1

brand2

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"

Save your config file as "designsystemet.config.json". If you want to use the schema, install "@digdir/designsystemet"

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

Run the code snippet to generate CSS variables for code.

npx @digdir/designsystemet@next tokens build

Something not working?

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

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