Design tokens variables

March 25, 2023

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

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

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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
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-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
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-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

Semantic tokens

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

Select size (data-size)

Size
Name	Value	Variable
`--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
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

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

Semantic tokens

Size

Border-radius

Border-width

Shadow

Opacity