Skip to main content
Designsystemet logoDesignsystemet logo

What are you looking for?

Try searching for…

Getting started

Design Tokens

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 CSS variables generated by Designsystemet’s command line tool.

Colors

Color variables used for defining the color palette of the theme. Use the attribute data-color to change color or color scheme using data-color-scheme on HTML elements.

Color variables
Variable nameFigma
--ds-color-background-defaultcolor/main/background-default
--ds-color-background-tintedcolor/main/background-tinted
--ds-color-surface-defaultcolor/main/surface-default
--ds-color-surface-tintedcolor/main/surface-tinted
--ds-color-surface-hovercolor/main/surface-hover
--ds-color-surface-activecolor/main/surface-active
--ds-color-border-subtlecolor/main/border-subtle
--ds-color-border-defaultcolor/main/border-default
--ds-color-border-strongcolor/main/border-strong
--ds-color-text-subtlecolor/main/text-subtle
--ds-color-text-defaultcolor/main/text-default
--ds-color-base-defaultcolor/main/base-default
--ds-color-base-hovercolor/main/base-hover
--ds-color-base-activecolor/main/base-active
--ds-color-base-contrast-subtlecolor/main/base-contrast-subtle
--ds-color-base-contrast-defaultcolor/main/base-contrast-default

Sizes

Sizing variables used for defining spacing and sizes. These variables adapt based on the size mode set using the data-size attribute or the --ds-size-base and --ds-size-step variables.

Size variables

Variable nameFigmaValuePreview
--ds-size-base1818
--ds-size-step44
--ds-size-0size 0
--ds-size-1size 1
--ds-size-2size 2
--ds-size-3size 3
--ds-size-4size 4
--ds-size-5size 5
--ds-size-6size 6
--ds-size-7size 7
--ds-size-8size 8
--ds-size-9size 9
--ds-size-10size 10
--ds-size-11size 11
--ds-size-12size 12
--ds-size-13size 13
--ds-size-14size 14
--ds-size-15size 15
--ds-size-18size 18
--ds-size-22size 22
--ds-size-26size 26
--ds-size-30size 30
--ds-size-unit

Border-radius

Border radius variables used for defining border radius on components and shapes. Use the --ds-border-radius-base and --ds-border-radius-step variables to adjust border radius intensity.

Border-radius variables
Variable nameFigmaValuePreview
--ds-border-radius-base0.25rem
--ds-border-radius-scale0.25rem
--ds-border-radius-smborder-radius sm
--ds-border-radius-mdborder-radius md
--ds-border-radius-lgborder-radius lg
--ds-border-radius-xlborder-radius xl
--ds-border-radius-defaultborder-radius default
--ds-border-radius-fullborder-radius full

Shadows

Shadow variables used for defining shadows on components and elements.

Shadow variables
Variable nameFigmaValuePreview
--ds-shadow-xsshadow xs0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12)
--ds-shadow-smshadow 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-mdshadow 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-lgshadow 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-xlshadow 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)

Opacity

Opacity variables used for defining opacity levels on components and elements.

Opacity variables
Variable nameFigmaValuePreview
--ds-opacity-disabledopacity disabled30%
opacity

Typography

Typography variables used for defining font styles, sizes, and weights.

Line-height
Variable nameValuePreview
--ds-line-height-sm1.3
line
height
--ds-line-height-md1.5
line
height
--ds-line-height-lg1.7
line
height
Letter-spacing
Variable nameValuePreview
--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
Variable nameValuePreview
--ds-font-familyInter
Inter
Font-weight
Variable nameValuePreview
--ds-font-weight-medium500
weight
--ds-font-weight-semibold600
weight
--ds-font-weight-regular400
weight
Heading 2xl
Variable nameValuePreview
--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
Variable nameValuePreview
--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
Variable nameValuePreview
--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
Variable nameValuePreview
--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
Variable nameValuePreview
--ds-heading-sm-font-weight500
weight
--ds-heading-sm-line-height1.3
line
height
--ds-heading-sm-letter-spacing0em
letter spacing
Heading xs
Variable nameValuePreview
--ds-heading-xs-font-weight500
weight
--ds-heading-xs-line-height1.3
line
height
--ds-heading-xs-letter-spacing0.0015em
letter spacing
Heading 2xs
Variable nameValuePreview
--ds-heading-2xs-font-weight500
weight
--ds-heading-2xs-line-height1.3
line
height
--ds-heading-2xs-letter-spacing0.0015em
letter spacing
Body xl
Variable nameValuePreview
--ds-body-xl-font-weight400
weight
--ds-body-xl-line-height1.5
line
height
--ds-body-xl-letter-spacing0.005em
letter spacing
Body lg
Variable nameValuePreview
--ds-body-lg-font-weight400
weight
--ds-body-lg-line-height1.5
line
height
--ds-body-lg-letter-spacing0.005em
letter spacing
Body md
Variable nameValuePreview
--ds-body-md-font-weight400
weight
--ds-body-md-line-height1.5
line
height
--ds-body-md-letter-spacing0.005em
letter spacing
Body sm
Variable nameValuePreview
--ds-body-sm-font-weight400
weight
--ds-body-sm-line-height1.5
line
height
--ds-body-sm-letter-spacing0.0025em
letter spacing
Body xs
Variable nameValuePreview
--ds-body-xs-font-weight400
weight
--ds-body-xs-line-height1.5
line
height
--ds-body-xs-letter-spacing0.0015em
letter spacing
Body short
Variable nameValuePreview
--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
Variable nameValuePreview
--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
Edit this page on github.com (opens in a new tab)