Get started with CSS

To use the Designsystemet's CSS, you must install @digdir/designsystemet-css and @digdir/designsystemet-theme (or create your own theme).

Layers

We use css layers to get the lowest possible specificity on our css.

This means that you can easily override it with your own styling.

All our layers are under the layer group ds.

For example, if you have a css reset, this will override parts of what we have done. We recommend putting this in a layer and sorting this first.

You do this by first putting your reset in a layer, and then sorting this layer first:

Data attributes

We offer several data attributes that can be used to change the theme of the components.

data-color-scheme

Used to change the color mode of the components. Possible values are light, dark and auto. If auto is selected, the color mode will change based on the user's preferences using prefers-color-scheme.

data-typography

Used to change the typography of the components. Possible values are primary and secondary. A common use for this attribute is when you want a monospace font on tables.

Which typography is associated with primary or secondary must be defined in the team, using Tokens Studio (with the Designsystemet design-tokens) or Theme Builder.

If you are going to use this attribute, you must remember to define font-family to use the --ds-font-family CSS variable. This can be solved by using attribute selector in CSS, for example.

Helper classes

We use some helper classes that can be used more generally across components.

ds-sr-only

Hides an element visually while still being available to screen readers.

ds-print-preserve

Preserves appearance, including background color, in print.

ds-focus / ds-focus--inset

Adds the design system focus ring around the element when it gains focus with keyboard navigation (:focus-visible).

ds-focus--visible / ds-focus--visible--inset

Static "always on" classes that add the design system focus ring around the element. Example.