Setup

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

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.
  • corresponds with Appearance › Color scheme in Figma
• Use data-size="sm | md | lg" to set the size of the components.
  • corresponds with Appearance › Size in Figma
• Use data-color to set the color of the components.
  • corresponds to Appearance › Color in Figma

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.

Text scaling that follows system settings

By default, most browsers scale text based on zoom and browser text settings, but not system settings. To also respect system settings, add the following code in <head>:

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.

Testing

We aim for the components to function well across various test setups. Designsystemet is tested in JSDOM and HappyDOM, and through Playwright in Chromium, Firefox, and WebKit. However, there will always be frameworks, test environments, and meta-frameworks that handle asynchronous rendering or specific edge cases in different ways.

If you encounter issues with the design system in your test setup, we would very much like to hear about it. Please report them via a GitHub issue or ask us in our open Slack.

Note that not everything supported by browsers is implemented in environments with an artificial DOM, such as JSDOM and HappyDOM. You may need to add some configuration to your test setup:

HappyDOM setup

HappyDOM may require support for inheritance between HTMLDocument and Document:

JSDOM setup

JSDOM may lack support for certain methods on HTMLDialogElement:

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