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.
| Variable name |
|---|
--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 |
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.
| Variable name | Value | Preview |
|---|---|---|
--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
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.
| Variable name | Value | Preview |
|---|---|---|
--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 | |
Shadows
Shadow variables used for defining shadows on components and elements.
| Variable name | Value | Preview |
|---|---|---|
--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
Opacity variables used for defining opacity levels on components and elements.
| Variable name | Value | Preview |
|---|---|---|
--ds-opacity-disabled | 30% | opacity |
Typography
Typography variables used for defining font styles, sizes, and weights.
| Variable 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 |
| Variable 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 |
| Variable name | Value | Preview |
|---|---|---|
--ds-font-family | Inter | Inter |
| Variable name | Value | Preview |
|---|---|---|
--ds-font-weight-medium | 500 | weight |
--ds-font-weight-semibold | 600 | weight |
--ds-font-weight-regular | 400 | weight |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |
| Variable 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 |