Fundamentals

Overview of variables

All variables generated by the command line tool.

Updated September 2, 2025

Design tokens are flexible variables that can be used independently of technology or design tools. This overview shows all variables generated by Designsystemet’s command line tool. More specifically, it shows the values of the Digdir theme, which is what we use on this website.

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
Name	Value	Preview
`--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
Name	Value	Preview
`--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
Name	Value	Preview
`--ds-font-family`	`Inter`	Inter

Font-weight
Name	Value	Preview
`--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
Name	Value	Preview
`--ds-font-size-1`	`round(calc(0.75rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-2`	`round(calc(0.875rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-3`	`round(calc(1rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-4`	`round(calc(1.125rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-5`	`round(calc(1.3125rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-6`	`round(calc(1.5rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-7`	`round(calc(1.875rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-8`	`round(calc(2.25rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-9`	`round(calc(3rem * var(--_ds-font-size-factor)), 1px)`	Aa
`--ds-font-size-10`	`round(calc(3.75rem * var(--_ds-font-size-factor)), 1px)`	Aa

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`
`--ds-size-unit`

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

Edit this page on github.com (opens in a new tab)

Overview of 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

Size

Border-radius

Border-width

Shadow

Opacity