Design tokens variabler

2. september 2025

Design Tokens er fleksible variabler som kan benyttes uavhengig av teknologi eller designverktøy.

Denne oversikten viser alle variablene som blir generert av Designsystemet sitt kommandolinjeverktøy. Mer konkret viser vi her verdiene til Digdir-temaet, som er det vi bruker på denne nettsiden.

Søk i design tokens

Farger

Verdien til fargevariabler settes av `data-color`-attributtet.

Velg farge (data-color)

Neutral
Navn	Lys	Mørk
`--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`

Typografi

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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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
Navn	Verdi	Forhåndsvisning
`--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

Semantiske

Verdien til størrelsevariabler settes av `data-size`-attributtet.

Border-radius
Navn	Verdi	Variabel
`--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
Navn	Verdi	Variabel
`--ds-border-width-default`
`--ds-border-width-focus`

Shadow
Navn	Verdi	Variabel
`--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
Navn	Verdi	Variabel
`--ds-opacity-disabled`	`30%`	opacity

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

Design tokens variabler

Farger

Neutral

Typografi

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

Semantiske

Border-radius

Border-width

Shadow

Opacity