Design tokens variabler

30. juni 2025

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

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

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

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-font-size`	`3.75rem`	Aa
`--ds-heading-2xl-letter-spacing`	`-0.01em`	letter spacing

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-font-size`	`3rem`	Aa
`--ds-heading-xl-letter-spacing`	`-0.01em`	letter spacing

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-font-size`	`2.25rem`	Aa
`--ds-heading-lg-letter-spacing`	`-0.005em`	letter spacing

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-font-size`	`1.875rem`	Aa
`--ds-heading-md-letter-spacing`	`-0.0025em`	letter spacing

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-font-size`	`1.5rem`	Aa
`--ds-heading-sm-letter-spacing`	`0em`	letter spacing

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-font-size`	`1.3125rem`	Aa
`--ds-heading-xs-letter-spacing`	`0.0015em`	letter spacing

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-font-size`	`1.125rem`	Aa
`--ds-heading-2xs-letter-spacing`	`0.0015em`	letter spacing

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-font-size`	`1.5rem`	Aa
`--ds-body-xl-letter-spacing`	`0.005em`	letter spacing

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-font-size`	`1.3125rem`	Aa
`--ds-body-lg-letter-spacing`	`0.005em`	letter spacing

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-font-size`	`1.125rem`	Aa
`--ds-body-md-letter-spacing`	`0.005em`	letter spacing

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-font-size`	`1rem`	Aa
`--ds-body-sm-letter-spacing`	`0.0025em`	letter spacing

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-font-size`	`0.875rem`	Aa
`--ds-body-xs-letter-spacing`	`0.0015em`	letter spacing

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-font-size`	`1.5rem`	Aa
`--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-font-size`	`1.3125rem`	Aa
`--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-font-size`	`1.125rem`	Aa
`--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-font-size`	`1rem`	Aa
`--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-font-size`	`0.875rem`	Aa
`--ds-body-short-xs-letter-spacing`	`0.0015em`	letter spacing

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-font-size`	`1.5rem`	Aa
`--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-font-size`	`1.3125rem`	Aa
`--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-font-size`	`1.125rem`	Aa
`--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-font-size`	`1rem`	Aa
`--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-font-size`	`0.875rem`	Aa
`--ds-body-long-xs-letter-spacing`	`0.0015em`	letter spacing

Semantiske

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

Velg størrelse (data-size)

Size
Navn	Verdi	Variabel
`--ds-size-base`	`18`	`18`
`--ds-size-step`	`4`	`4`
`--ds-size-0`
`--ds-size-1`
`--ds-size-2`
`--ds-size-3`
`--ds-size-4`
`--ds-size-5`
`--ds-size-6`
`--ds-size-7`
`--ds-size-8`
`--ds-size-9`
`--ds-size-10`
`--ds-size-11`
`--ds-size-12`
`--ds-size-13`
`--ds-size-14`
`--ds-size-15`
`--ds-size-18`
`--ds-size-22`
`--ds-size-26`
`--ds-size-30`

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

Font-size

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

Semantiske

Size

Border-radius

Border-width

Shadow

Opacity