Color
Primitives
neutral
--color-neutral-{step}0#FFFFFF
50#F6F6F6
100#F1F1F1
200#DEDEDE
300#C8C8C8
400#A5A5A5
500#868686
600#676767
700#545454
800#383838
850#222222
900#191919
950#0D0D0D
1000#000000
purple
--color-purple-{step}50#F8F5FF
100#EBE0FF
200#D1B7FF
300#B98AFF
400#A86DFC
500#9945FF
600#893AF0
700#7A2FE0
800#571AA6
900#37056F
950#280154
green
--color-green-{step}50#EBFCF1
100#D3FDE1
200#9DFEC3
300#4CFDA3
400#37F79C
500#14F195
600#1CB971
700#1A854F
800#087043
900#003E22
950#012714
blue
--color-blue-{step}50#F2F7FF
100#DFECFF
200#BAD5FB
300#97BEF5
400#73A7EE
500#4F8FE6
600#3C75C7
700#2A5CA8
800#1B427D
900#0D2954
950#071E41
red
--color-red-{step}50#FFF4F3
100#FFE0DD
200#FEB8B0
300#FF8A80
400#F3736C
500#E75A58
600#DB2424
700#BD2223
800#A21E20
900#600A0D
950#410305
orange
--color-orange-{step}50#FDF6EC
100#FBE9D0
200#F6CE99
300#F0B35A
400#EC9437
500#E67219
600#C86417
700#AA5616
800#7A3903
900#4B2001
950#351500
Alpha
alpha dark
--color-alpha-dark-{step}2%
3%
4%
5%
6%
8%
10%
12%
14%
16%
20%
24%
32%
40%
48%
56%
64%
72%
80%
88%
96%
alpha light
--color-alpha-light-{step}2%
3%
4%
5%
6%
8%
10%
12%
14%
16%
20%
24%
32%
40%
48%
56%
64%
72%
80%
88%
96%
Roles
Base
| Role | Light | Dark |
|---|---|---|
canvas | neutral/50 | neutral/1000 |
page | neutral/0 | neutral/950 |
Surface
| Role | Light | Dark |
|---|---|---|
elevated/default | neutral/0 | alpha-light/4 |
elevated/hover | alpha-dark/4 | alpha-light/8 |
elevated/active | alpha-dark/8 | alpha-light/10 |
emphasized/default | alpha-dark/4 | alpha-light/10 |
emphasized/hover | alpha-dark/8 | alpha-light/14 |
emphasized/active | alpha-dark/12 | alpha-light/20 |
sunken/default | neutral/100 | neutral/1000 |
feedback/success/subtle | green/500 | green/500 |
feedback/warning/subtle | orange/500 | orange/500 |
feedback/danger/subtle | red/600 | red/500 |
feedback/info/subtle | blue/500 | blue/500 |
Content
| Role | Light | Dark |
|---|---|---|
strong | neutral/900 | neutral/0 |
subtle | alpha-dark/72 | alpha-light/72 |
muted | alpha-dark/56 | alpha-light/56 |
disabled | alpha-dark/40 | alpha-light/40 |
on-primary | neutral/0 | neutral/1000 |
on-primary-disabled | alpha-light/56 | neutral/500 |
on-brand | neutral/1000 | neutral/1000 |
on-brand-disabled | alpha-dark/56 | alpha-dark/56 |
on-glass | neutral/0 | neutral/0 |
on-glass-disabled | alpha-light/56 | alpha-light/56 |
on-danger | neutral/0 | neutral/0 |
on-danger-disabled | alpha-light/56 | alpha-light/56 |
feedback/success | green/800 | green/500 |
feedback/warning | orange/700 | orange/300 |
feedback/danger | red/800 | red/300 |
feedback/info | blue/700 | blue/500 |
price/up | green/800 | green/500 |
price/down | red/800 | red/300 |
Border
| Role | Light | Dark |
|---|---|---|
strong | alpha-dark/20 | alpha-light/24 |
subtle | alpha-dark/12 | alpha-light/12 |
muted | alpha-dark/8 | alpha-light/8 |
interactive/default | alpha-dark/12 | alpha-light/12 |
interactive/hover | alpha-dark/20 | alpha-light/16 |
interactive/active | alpha-dark/48 | alpha-light/20 |
interactive/selected | neutral/900 | neutral/0 |
interactive/disabled | alpha-dark/8 | alpha-light/8 |
feedback/danger | red/600 | red/500 |
Actions
| Role | Light | Dark |
|---|---|---|
primary/default | neutral/950 | neutral/0 |
primary/hover | neutral/800 | neutral/100 |
primary/disabled | alpha-dark/24 | alpha-light/24 |
secondary/default | alpha-dark/6 | alpha-light/10 |
secondary/hover | alpha-dark/8 | alpha-light/16 |
secondary/active | alpha-dark/10 | alpha-light/20 |
secondary/disabled | alpha-dark/4 | alpha-light/6 |
tertiary/default | neutral/0 | alpha-light/8 |
tertiary/hover | alpha-dark/2 | alpha-light/12 |
tertiary/disabled | neutral/50 | alpha-light/4 |
glass/default | alpha-dark/40 | alpha-dark/40 |
glass/hover | alpha-dark/48 | alpha-dark/48 |
glass/disabled | alpha-dark/24 | alpha-dark/24 |
brand/default | green/500 | green/500 |
brand/hover | green/300 | green/300 |
brand/disabled | alpha-dark/12 | alpha-light/24 |
danger/default | red/600 | red/500 |
danger/hover | red/700 | red/300 |
danger/disabled | red/500 | red/700 |
Utility
| Role | Light | Dark |
|---|---|---|
focus | green/500 | green/500 |
switch/thumb | neutral/0 | neutral/0 |
switch/thumb-active | neutral/0 | neutral/1000 |
chart/1 | purple/500 | purple/500 |
chart/2 | green/700 | green/500 |
chart/3 | blue/700 | blue/500 |
chart/4 | orange/500 | orange/500 |
chart/5 | red/600 | red/500 |
chart/grid | alpha-dark/8 | alpha-light/8 |
track/default | alpha-dark/24 | alpha-light/24 |
track/buffered | alpha-dark/40 | alpha-light/40 |
backdrop | neutral/1000 | neutral/1000 |
scrim | neutral/1000 | neutral/1000 |
shadow/stroke | alpha-dark/6 | alpha-light/12 |
shadow/stroke-hover | alpha-dark/16 | alpha-light/20 |
shadow/stroke-glass | alpha-light/24 | alpha-light/24 |
shadow/stroke-glass-hover | alpha-light/32 | alpha-light/32 |
shadow/muted | neutral/1000 | neutral/1000 |
shadow/subtle | neutral/1000 | neutral/1000 |