Hopp til hovedinnhold
Designsystemet logoDesignsystemet logo

Hva leter du etter?

Prøv å søke etter…

Kom i gang

Design Tokens

Alle variablene som blir generert av kommandolinjeverktøyet.

Oppdatert 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.

Farger

Fargevariabler som brukes til å definere fargepaletten i temaet. Bruk attributtet data-color for å endre farge eller data-color-scheme for å bytte mellom mørk og lys fargemodus.

Fargevariabler
Variabel navn
--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

Størrelser

Størrelsevariabler som brukes til å definere avstander og størrelser. Disse variablene tilpasser seg basert på størrelsesmodusen satt ved bruk av data-size attributtet eller variablene --ds-size-base og --ds-size-step. Merk at tabellen under viser utregnede verdier i px, mens i kode kommer dette fra en formel med basis i rem, slik at størrelsene også påvirkes av brukerens preferanse i nettleseren.

Størrelsevariabler

Variabel navnVerdiForhåndsvisning
--ds-size-base1818
--ds-size-step44
--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
--ds-size-unit

Border-radius

Border radius variabler som brukes til å definere border radius på komponenter og former. Bruk variablene --ds-border-radius-base og --ds-border-radius-step for å justere intensiteten på border radius.

Border-radius variabler
Variabel navnVerdiForhåndsvisning
--ds-border-radius-base0.25rem
--ds-border-radius-scale0.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

Skygger

Skyggevariabler som brukes til å definere skygger på komponenter og elementer.

Shadow variabler
Variabel navnVerdiForhåndsvisning
--ds-shadow-xs0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12)
--ds-shadow-sm0 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-md0 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-lg0 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-xl0 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)

Opasitet

Opasitetsvariabler som brukes til å definere opasitetsnivåer på komponenter og elementer.

Opacity variabler
Variabel navnVerdiForhåndsvisning
--ds-opacity-disabled30%
opacity

Typografi

Typografivariabler som brukes til å definere skriftstiler, størrelser og vekter.

Line-height
Variabel navnVerdiForhåndsvisning
--ds-line-height-sm1.3
line
height
--ds-line-height-md1.5
line
height
--ds-line-height-lg1.7
line
height
Letter-spacing
Variabel navnVerdiForhå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-50em
letter spacing
--ds-letter-spacing-60.0015em
letter spacing
--ds-letter-spacing-70.0025em
letter spacing
--ds-letter-spacing-80.005em
letter spacing
--ds-letter-spacing-90.015em
letter spacing
Font-family
Variabel navnVerdiForhåndsvisning
--ds-font-familyInter
Inter
Font-weight
Variabel navnVerdiForhåndsvisning
--ds-font-weight-medium500
weight
--ds-font-weight-semibold600
weight
--ds-font-weight-regular400
weight
Heading 2xl
Variabel navnVerdiForhåndsvisning
--ds-heading-2xl-font-weight500
weight
--ds-heading-2xl-line-height1.3
line
height
--ds-heading-2xl-letter-spacing-0.01em
letter spacing
Heading xl
Variabel navnVerdiForhåndsvisning
--ds-heading-xl-font-weight500
weight
--ds-heading-xl-line-height1.3
line
height
--ds-heading-xl-letter-spacing-0.01em
letter spacing
Heading lg
Variabel navnVerdiForhåndsvisning
--ds-heading-lg-font-weight500
weight
--ds-heading-lg-line-height1.3
line
height
--ds-heading-lg-letter-spacing-0.005em
letter spacing
Heading md
Variabel navnVerdiForhåndsvisning
--ds-heading-md-font-weight500
weight
--ds-heading-md-line-height1.3
line
height
--ds-heading-md-letter-spacing-0.0025em
letter spacing
Heading sm
Variabel navnVerdiForhåndsvisning
--ds-heading-sm-font-weight500
weight
--ds-heading-sm-line-height1.3
line
height
--ds-heading-sm-letter-spacing0em
letter spacing
Heading xs
Variabel navnVerdiForhåndsvisning
--ds-heading-xs-font-weight500
weight
--ds-heading-xs-line-height1.3
line
height
--ds-heading-xs-letter-spacing0.0015em
letter spacing
Heading 2xs
Variabel navnVerdiForhåndsvisning
--ds-heading-2xs-font-weight500
weight
--ds-heading-2xs-line-height1.3
line
height
--ds-heading-2xs-letter-spacing0.0015em
letter spacing
Body xl
Variabel navnVerdiForhåndsvisning
--ds-body-xl-font-weight400
weight
--ds-body-xl-line-height1.5
line
height
--ds-body-xl-letter-spacing0.005em
letter spacing
Body lg
Variabel navnVerdiForhåndsvisning
--ds-body-lg-font-weight400
weight
--ds-body-lg-line-height1.5
line
height
--ds-body-lg-letter-spacing0.005em
letter spacing
Body md
Variabel navnVerdiForhåndsvisning
--ds-body-md-font-weight400
weight
--ds-body-md-line-height1.5
line
height
--ds-body-md-letter-spacing0.005em
letter spacing
Body sm
Variabel navnVerdiForhåndsvisning
--ds-body-sm-font-weight400
weight
--ds-body-sm-line-height1.5
line
height
--ds-body-sm-letter-spacing0.0025em
letter spacing
Body xs
Variabel navnVerdiForhåndsvisning
--ds-body-xs-font-weight400
weight
--ds-body-xs-line-height1.5
line
height
--ds-body-xs-letter-spacing0.0015em
letter spacing
Body short
Variabel navnVerdiForhåndsvisning
--ds-body-short-xl-font-weight400
weight
--ds-body-short-xl-line-height1.3
line
height
--ds-body-short-xl-letter-spacing0.005em
letter spacing
--ds-body-short-lg-font-weight400
weight
--ds-body-short-lg-line-height1.3
line
height
--ds-body-short-lg-letter-spacing0.005em
letter spacing
--ds-body-short-md-font-weight400
weight
--ds-body-short-md-line-height1.3
line
height
--ds-body-short-md-letter-spacing0.005em
letter spacing
--ds-body-short-sm-font-weight400
weight
--ds-body-short-sm-line-height1.3
line
height
--ds-body-short-sm-letter-spacing0.0025em
letter spacing
--ds-body-short-xs-font-weight400
weight
--ds-body-short-xs-line-height1.3
line
height
--ds-body-short-xs-letter-spacing0.0015em
letter spacing
Body long
Variabel navnVerdiForhåndsvisning
--ds-body-long-xl-font-weight400
weight
--ds-body-long-xl-line-height1.7
line
height
--ds-body-long-xl-letter-spacing0.005em
letter spacing
--ds-body-long-lg-font-weight400
weight
--ds-body-long-lg-line-height1.7
line
height
--ds-body-long-lg-letter-spacing0.005em
letter spacing
--ds-body-long-md-font-weight400
weight
--ds-body-long-md-line-height1.7
line
height
--ds-body-long-md-letter-spacing0.005em
letter spacing
--ds-body-long-sm-font-weight400
weight
--ds-body-long-sm-line-height1.7
line
height
--ds-body-long-sm-letter-spacing0.0025em
letter spacing
--ds-body-long-xs-font-weight400
weight
--ds-body-long-xs-line-height1.7
line
height
--ds-body-long-xs-letter-spacing0.0015em
letter spacing
Rediger denne siden på github.com (åpnes i ny fane)