Skip to main content
Designsystemet logoDesignsystemet logo

What are you looking for?

Try searching for…

Getting started

Setup

Get started with the Designsystemet in code

Updated February 27, 2026

Follow these steps to get started with using Designsystemet in code for the first time.

1. Install the packages

Designsystemet consists of several code packages that you can freely choose from, depending on your needs and preferences. You can use the packages together, or pick only the parts that speed you up, while keeping the freedom to code things yourself where you want to.

We recommend starting with @digdir/designsystemet-web and @digdir/designsystemet-css. You can also use @digdir/designsystemet-web without @digdir/designsystemet-css if you already have your own styling, or use only the CSS package if you handle interactivity yourself.

HTMLReact

2. Import Javascript

HTMLReact

Import @digdir/designsystemet-web in your main JavaScript file.


This will register all web components and observers globally, so you only need to do this once.

Import @digdir/designsystemet-react when using components.

3. Import CSS

Import @digdir/designsystemet-css.

Read more about CSS.

CSSJavaScript

Note: background and color are set on <body>

background and color are automatically defined on the body element and where data-color-scheme is set. This is to ensure universal design (w3.org) and consistent font and color across the application. This can be easily overridden in your own theme or in your global CSS file.

4. Import the theme

The Designsystemet is designed to be themable, so it is important to import your theme after importing @digdir/designsystemet-css.

Build your own theme or use the default theme; @digdir/designsystemet-css/theme.

Custom themeDefault theme

5. Usage

You are now ready to use the Designsystemet in code!

All components have their own page in the component documentation, we recommend that you read through these to see how you can use the components.

It is also recommended that you read through the accessibility page.

  • Use data-color-scheme="light | dark | auto" to set dark/light mode.
  • Use data-size="sm | md | lg" to set the size of the components.
  • Use data-color to set the color of the components.
HTMLReact

Typescript

Designsystemet provides type safety for its data attributes.

Install the type package and add the type files to tsconfig.json to access them.

HTMLReact

Font

The components are designed and developed with the Inter font (github.com), so variations may occur if you use a different font. If you choose to install the font in a way other than altinncdn.no, remember to include the font weights 400, 500, and 600.

Add the Inter font (optional)

Add the <link> tag below in the <head>, and set font-family to Inter in your global CSS file.

You can use this code to add the font in <head>:

Font configuration

We strongly recommend adding the following to your global CSS file. font-feature-settings adds a tail to lowercase ls.

Edit this page on github.com (opens in a new tab)