The color system is organized in two layers: Core Palette provides raw color values, and Semantic Colors map those values to specific purposes. Use the brand switcher in the top-right corner to see differences between brands, and toggle the theme to view light/dark mode variations.
Accent 1Brand
10
20
30
40
50
60
70
80
90
100
Accent 2Brand
10
20
30
40
50
60
70
80
90
100
Accent 3Brand
10
20
30
40
50
60
70
80
90
100
Neutral
10
20
30
40
50
60
70
80
90
100
110
120
130
140
Blue
10
20
30
40
50
60
70
80
90
100
Green
10
20
30
40
50
60
70
80
90
100
Yellow
10
20
30
40
50
60
70
80
90
100
Red
10
20
30
40
50
60
70
80
90
100
Black(Opacity)
10
20
30
40
50
60
70
80
90
100
White(Opacity)
10
20
30
40
50
60
70
80
90
100