Design tokens variables

September 2, 2025

Design Tokens are flexible variables that can be used regardless of technology or design tool.

This overview shows all variables generated by the Designsystemet command-line tool. Specifically, we show here the values of the Digdir theme, which is what is used on this websites.

Search in design tokens

Colors

The value of color variables is set by the `data-color` attribute.

Select color (data-color)

Neutral
Name	Light	Dark
`--ds-color-background-default`
`--ds-color-background-tinted`
`--ds-color-surface-default`
`--ds-color-surface-tinted`
`--ds-color-surface-hover`
`--ds-color-surface-active`
`--ds-color-border-subtle`
`--ds-color-border-default`
`--ds-color-border-strong`
`--ds-color-text-subtle`
`--ds-color-text-default`
`--ds-color-base-default`
`--ds-color-base-hover`
`--ds-color-base-active`
`--ds-color-base-contrast-subtle`
`--ds-color-base-contrast-default`

Typography

Primary

Line-height
Navn	Verdi	Forhåndsvisning
`--ds-line-height-sm`	`1.3`	line height
`--ds-line-height-md`	`1.5`	line height
`--ds-line-height-lg`	`1.7`	line height

Letter-spacing
Navn	Verdi	Forhåndsvisning
`--ds-letter-spacing-1`	`-0.01em`	letter spacing
`--ds-letter-spacing-2`	`-0.005em`	letter spacing
`--ds-letter-spacing-3`	`-0.0025em`	letter spacing
`--ds-letter-spacing-4`	`-0.0015em`	letter spacing
`--ds-letter-spacing-5`	`0em`	letter spacing
`--ds-letter-spacing-6`	`0.0015em`	letter spacing
`--ds-letter-spacing-7`	`0.0025em`	letter spacing
`--ds-letter-spacing-8`	`0.005em`	letter spacing
`--ds-letter-spacing-9`	`0.015em`	letter spacing

Font-family
Navn	Verdi	Forhåndsvisning
`--ds-font-family`	`Inter`	Inter

Font-weight
Navn	Verdi	Forhåndsvisning
`--ds-font-weight-medium`	`500`	weight
`--ds-font-weight-semibold`	`600`	weight
`--ds-font-weight-regular`	`400`	weight

Heading 2xl
Name	Value	Preview
`--ds-heading-2xl-font-weight`	`500`	weight
`--ds-heading-2xl-line-height`	`1.3`	line height
`--ds-heading-2xl-letter-spacing`	`-0.01em`	letter spacing
`--ds-heading-2xl-font-size`	`var(--ds-font-size-10)`	Aa

Heading xl
Name	Value	Preview
`--ds-heading-xl-font-weight`	`500`	weight
`--ds-heading-xl-line-height`	`1.3`	line height
`--ds-heading-xl-letter-spacing`	`-0.01em`	letter spacing
`--ds-heading-xl-font-size`	`var(--ds-font-size-9)`	Aa

Heading lg
Name	Value	Preview
`--ds-heading-lg-font-weight`	`500`	weight
`--ds-heading-lg-line-height`	`1.3`	line height
`--ds-heading-lg-letter-spacing`	`-0.005em`	letter spacing
`--ds-heading-lg-font-size`	`var(--ds-font-size-8)`	Aa

Heading md
Name	Value	Preview
`--ds-heading-md-font-weight`	`500`	weight
`--ds-heading-md-line-height`	`1.3`	line height
`--ds-heading-md-letter-spacing`	`-0.0025em`	letter spacing
`--ds-heading-md-font-size`	`var(--ds-font-size-7)`	Aa

Heading sm
Name	Value	Preview
`--ds-heading-sm-font-weight`	`500`	weight
`--ds-heading-sm-line-height`	`1.3`	line height
`--ds-heading-sm-letter-spacing`	`0em`	letter spacing
`--ds-heading-sm-font-size`	`var(--ds-font-size-6)`	Aa

Heading xs
Name	Value	Preview
`--ds-heading-xs-font-weight`	`500`	weight
`--ds-heading-xs-line-height`	`1.3`	line height
`--ds-heading-xs-letter-spacing`	`0.0015em`	letter spacing
`--ds-heading-xs-font-size`	`var(--ds-font-size-5)`	Aa

Heading 2xs
Name	Value	Preview
`--ds-heading-2xs-font-weight`	`500`	weight
`--ds-heading-2xs-line-height`	`1.3`	line height
`--ds-heading-2xs-letter-spacing`	`0.0015em`	letter spacing
`--ds-heading-2xs-font-size`	`var(--ds-font-size-4)`	Aa

Body xl
Name	Value	Preview
`--ds-body-xl-font-weight`	`400`	weight
`--ds-body-xl-line-height`	`1.5`	line height
`--ds-body-xl-letter-spacing`	`0.005em`	letter spacing
`--ds-body-xl-font-size`	`var(--ds-font-size-6)`	Aa

Body lg
Name	Value	Preview
`--ds-body-lg-font-weight`	`400`	weight
`--ds-body-lg-line-height`	`1.5`	line height
`--ds-body-lg-letter-spacing`	`0.005em`	letter spacing
`--ds-body-lg-font-size`	`var(--ds-font-size-5)`	Aa

Body md
Name	Value	Preview
`--ds-body-md-font-weight`	`400`	weight
`--ds-body-md-line-height`	`1.5`	line height
`--ds-body-md-letter-spacing`	`0.005em`	letter spacing
`--ds-body-md-font-size`	`var(--ds-font-size-4)`	Aa

Body sm
Name	Value	Preview
`--ds-body-sm-font-weight`	`400`	weight
`--ds-body-sm-line-height`	`1.5`	line height
`--ds-body-sm-letter-spacing`	`0.0025em`	letter spacing
`--ds-body-sm-font-size`	`var(--ds-font-size-3)`	Aa

Body xs
Name	Value	Preview
`--ds-body-xs-font-weight`	`400`	weight
`--ds-body-xs-line-height`	`1.5`	line height
`--ds-body-xs-letter-spacing`	`0.0015em`	letter spacing
`--ds-body-xs-font-size`	`var(--ds-font-size-2)`	Aa

Body short
Name	Value	Preview
`--ds-body-short-xl-font-weight`	`400`	weight
`--ds-body-short-xl-line-height`	`1.3`	line height
`--ds-body-short-xl-letter-spacing`	`0.005em`	letter spacing
`--ds-body-short-lg-font-weight`	`400`	weight
`--ds-body-short-lg-line-height`	`1.3`	line height
`--ds-body-short-lg-letter-spacing`	`0.005em`	letter spacing
`--ds-body-short-md-font-weight`	`400`	weight
`--ds-body-short-md-line-height`	`1.3`	line height
`--ds-body-short-md-letter-spacing`	`0.005em`	letter spacing
`--ds-body-short-sm-font-weight`	`400`	weight
`--ds-body-short-sm-line-height`	`1.3`	line height
`--ds-body-short-sm-letter-spacing`	`0.0025em`	letter spacing
`--ds-body-short-xs-font-weight`	`400`	weight
`--ds-body-short-xs-line-height`	`1.3`	line height
`--ds-body-short-xs-letter-spacing`	`0.0015em`	letter spacing
`--ds-body-short-xl-font-size`	`var(--ds-font-size-6)`	Aa
`--ds-body-short-lg-font-size`	`var(--ds-font-size-5)`	Aa
`--ds-body-short-md-font-size`	`var(--ds-font-size-4)`	Aa
`--ds-body-short-sm-font-size`	`var(--ds-font-size-3)`	Aa
`--ds-body-short-xs-font-size`	`var(--ds-font-size-2)`	Aa

Body long
Name	Value	Preview
`--ds-body-long-xl-font-weight`	`400`	weight
`--ds-body-long-xl-line-height`	`1.7`	line height
`--ds-body-long-xl-letter-spacing`	`0.005em`	letter spacing
`--ds-body-long-lg-font-weight`	`400`	weight
`--ds-body-long-lg-line-height`	`1.7`	line height
`--ds-body-long-lg-letter-spacing`	`0.005em`	letter spacing
`--ds-body-long-md-font-weight`	`400`	weight
`--ds-body-long-md-line-height`	`1.7`	line height
`--ds-body-long-md-letter-spacing`	`0.005em`	letter spacing
`--ds-body-long-sm-font-weight`	`400`	weight
`--ds-body-long-sm-line-height`	`1.7`	line height
`--ds-body-long-sm-letter-spacing`	`0.0025em`	letter spacing
`--ds-body-long-xs-font-weight`	`400`	weight
`--ds-body-long-xs-line-height`	`1.7`	line height
`--ds-body-long-xs-letter-spacing`	`0.0015em`	letter spacing
`--ds-body-long-xl-font-size`	`var(--ds-font-size-6)`	Aa
`--ds-body-long-lg-font-size`	`var(--ds-font-size-5)`	Aa
`--ds-body-long-md-font-size`	`var(--ds-font-size-4)`	Aa
`--ds-body-long-sm-font-size`	`var(--ds-font-size-3)`	Aa
`--ds-body-long-xs-font-size`	`var(--ds-font-size-2)`	Aa

Font-size
Navn	Verdi	Forhåndsvisning
`--ds-font-size-1`	`calc(0.75rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-2`	`calc(0.875rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-3`	`calc(1rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-4`	`calc(1.125rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-5`	`calc(1.3125rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-6`	`calc(1.5rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-7`	`calc(1.875rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-8`	`calc(2.25rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-9`	`calc(3rem * var(--_ds-font-size-factor))`	Aa
`--ds-font-size-10`	`calc(3.75rem * var(--_ds-font-size-factor))`	Aa

Semantic tokens

The value of size variables is set by the `data-size` attribute.

Border-radius
Name	Value	Variable
`--ds-border-radius-base`		`0.25rem`
`--ds-border-radius-scale`		`0.25rem`
`--ds-border-radius-sm`
`--ds-border-radius-md`
`--ds-border-radius-lg`
`--ds-border-radius-xl`
`--ds-border-radius-default`
`--ds-border-radius-full`

Border-width
Name	Value	Variable
`--ds-border-width-default`
`--ds-border-width-focus`

Shadow
Name	Value	Variable
`--ds-shadow-xs`	`0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12)`
`--ds-shadow-sm`	`0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1)`
`--ds-shadow-md`	`0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12)`
`--ds-shadow-lg`	`0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14)`
`--ds-shadow-xl`	`0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16)`

Opacity
Name	Value	Variable
`--ds-opacity-disabled`	`30%`	opacity

Rediger denne siden på Github (åpnes i ny fane)

Design tokens variables

Colors

Neutral

Typography

Primary

Line-height

Letter-spacing

Font-family

Font-weight

Heading 2xl

Heading xl

Heading lg

Heading md

Heading sm

Heading xs

Heading 2xs

Body xl

Body lg

Body md

Body sm

Body xs

Body short

Body long

Font-size

Semantic tokens

Border-radius

Border-width

Shadow

Opacity