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.

We recommend starting with @digdir/designsystemet-web and @digdir/designsystemet-css which are the most basic packages to get started.

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.

Polyfill

The design system uses popover in some components. This api is classified as Baseline: Newly available as of April 2024, when Firefox was the last browser to add it. In some cases, you may find that users are locked to older browser versions for various reasons, and then it may be appropriate to add a polyfill to ensure that popover works for everyone.

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