Colors
Establish a brand's visual identity, enhance usability, and create a cohesive experience
across different products and platforms.
☼ Light Mode
Core
primary.a
#1F1F1F
primary.b
#FFFFFF
primary.blue
#0D77D3
secondary.blue
#61AAF2
primary.red
#CF3030
secondary.red
#F26161
positive.green
#288556
secondary.green
#0DD6A4
primary.yellow
#CE8508
secondary.yellow
#FACD64
primary.orange
#C2410B
secondary.orange
#FF9966
primary.purple
#7E24B2
secondary.purple
#A985F2
primary.pink
#D941BF
secondary.pink
#F285C5
Backgrounds
bg.primary
#FFFFFF
bg.secondary
#F5F5F5
bg.tertiary
#B6B6B6
bg.active
#E0E0E0
bg.disabled
#F5F5F5
Text
text.primary.a
#1F1F1F
text.secondary
#3D3D3D
text.tertiary
#7A7A7A
text.disabled
#B8B8B8
text.primary.b
#FFFFFF
Border
border.primary
#1F1F1F
border.secondary
#B8B8B8
border.tertiary
#E0E0E0
Hover
hover.primary
#F5F5F5
☾ Dark Mode
Core
primary.a
#1F1F1F
primary.b
#FFFFFF
primary.blue
#0D77D3
secondary.blue
#61AAF2
primary.red
#CF3030
secondary.red
#F26161
positive.green
#288556
secondary.green
#0DD6A4
primary.yellow
#CE8508
secondary.yellow
#FACD64
primary.orange
#C2410B
secondary.orange
#FF9966
primary.purple
#7E24B2
secondary.purple
#A985F2
primary.pink
#D941BF
secondary.pink
#F285C5
Backgrounds
bg.primary
#141414
bg.secondary
#1F1F1F
bg.tertiary
#7A7A7A
bg.active
#3D3D3D
bg.disabled
#1F1F1F
Text
text.primary.a
#FFFFFF
text.secondary
#B8B8B8
text.tertiary
#7A7A7A
text.disabled
#3D3D3D
text.primary.b
#1F1F1F
Border
border.primary
#7A7A7
border.secondary
#3D3D3D
border.tertiary
#1F1F1F
Hover
hover.primary
#1F1F1F