Color tokens

Colors are the most important part of the design system. They are used to communicate information, create hierarchy, and establish a visual language. The design system uses a set of colors that are divided into primary, theme, semantic, and background colors. The system also includes transparent, text, icon, link, and focus colors.

Tokens

Every token is prefixed with --dds-, use the variants concated with the base name to get the token value. Example: --dds-cold-grey-100 or --dds-cold-grey-alpha-10.

Primary colors
--dds-cold-grey
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-teal
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-azure
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-indigo
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-violet
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
Primary colors with alpha
--dds-cold-grey-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-teal-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-azure-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-indigo-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-violet-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-white
5
10
20
30
40
50
60
70
80
90
100
--dds-black
5
10
20
30
40
50
60
70
80
90
100
Theme colors
--dds-brand
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-neutral
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-informative
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-positive
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-warning
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-negative
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
Theme colors with alpha
--dds-brand-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-neutral-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-informative-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-positive-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-warning-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-negative-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-black-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-white-alpha
5
10
20
30
40
50
60
70
80
90
100
Semantic colors
--dds-semantic-green
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-semantic-blue
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
--dds-semantic-red
100
200
300
400
500
600
700
800
900
1000
1100
1200
1300
1400
1500
1600
1700
1800
1900
2000
Semantic colors with alpha
--dds-semantic-green-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-semantic-blue-alpha
5
10
20
30
40
50
60
70
80
90
100
--dds-semantic-red-alpha
5
10
20
30
40
50
60
70
80
90
100
Background colors

For disabled, disable-inverted, read-only colors use the neutral variants

--dds-background-neutral
subtle
base
medium
strong
stronger
disabled
base-inverted
medium-inverted
strong-inverted
disabled-inverted
read-only
--dds-background-brand
subtle
base
medium
strong
base-inverted
medium-inverted
strong-inverted
--dds-background-positive
subtle
base
medium
strong
base-inverted
medium-inverted
strong-inverted
--dds-background-warning
subtle
base
medium
strong
base-inverted
medium-inverted
strong-inverted
--dds-background-negative
subtle
base
medium
strong
base-inverted
medium-inverted
strong-inverted
--dds-background-informative
subtle
base
medium
strong
base-inverted
medium-inverted
strong-inverted
Text colors
--dds-text-neutral
base
subtle
strong
disabled
placeholder
on-inverted
inverted
--dds-text-brand
base
subtle
strong
--dds-text-positive
base
subtle
strong
--dds-text-informative
base
subtle
strong
--dds-text-warning
base
subtle
strong
--dds-text-negative
base
subtle
strong
Border colors
--dds-border-neutral
base
subtle
medium
strong
divider
disabled
inverted
--dds-border-brand
base
subtle
medium
strong
--dds-border-positive
base
subtle
medium
strong
--dds-border-informative
base
subtle
medium
strong
--dds-border-warning
base
subtle
medium
strong
--dds-border-negative
base
subtle
medium
strong
Transparent colors

These colors are used for overlays and modals. Static colors are not changing even on theme change.

--dds-transparent-black
base
subtle
medium
strong
base-static
subtle-static
medium-static
strong-static
none
--dds-transparent-white
base
subtle
medium
strong
base-static
subtle-static
medium-static
strong-static
none
Icon colors
--dds-icon-neutral
base
subtle
strong
disabled
on-inverted
inverted
--dds-icon-brand
base
subtle
strong
disabled
on-inverted
inverted
--dds-icon-positive
base
subtle
strong
disabled
on-inverted
inverted
--dds-icon-informative
base
subtle
strong
disabled
on-inverted
inverted
--dds-icon-warning
base
subtle
strong
disabled
on-inverted
inverted
--dds-icon-negative
base
subtle
strong
disabled
on-inverted
inverted
Link colors Link
--dds-components-link
base
visited
hover
pressed
base-inverted
visited-inverted
hover-inverted
pressed-inverted
Focus colors
--dds-focus
outer-ring
inner-ring