0. Design Tokens Colors

Core Palette

Base 100
Light Surface
#FBFBFD
Base 300
Border/Divider
#E0E0E0
Base 500
Mid-tone
#A8B4C2
Base 800
Dark Surface
#2A2A30

Status Colors

Success
Success
#00800C
Warning
Warning
#FFB300
Error
Error
#D32F2F

Theme Palettes

Vanilla

Vanilla 100
Surface
#FFF4E5
Vanilla 200
Background
#FFF0DB
Vanilla 300
Primary Lighter
#F5DCBB
Vanilla 500
Primary
#4D3C27
Vanilla 800
Primary Darker
#332512
Vanilla 900
Background Dark
#1C1307

Blueberry

Blueberry 100
Surface
#F0EEFF
Blueberry 200
Background
#DBD7FF
Blueberry 300
Primary Lighter
#B3A8F7
Blueberry 500
Primary
#2E2B74
Blueberry 800
Primary Darker
#1E193E
Blueberry 900
Background Dark
#15122B

Strawberry

Strawberry 100
Surface
#FFF2F1
Strawberry 200
Background
#FFD3D2
Strawberry 300
Primary Lighter
#FFB3B0
Strawberry 500
Primary
#800800
Strawberry 800
Primary Darker
#5C1A18
Strawberry 900
Background Dark
#2A0B0A

Semantic Colors (Current Theme)

Primary
Primary
--color-primary
On Primary
On Primary
--color-on-primary
Background
Background
--color-background
Surface
Surface
--color-surface
On Surface
On Surface
--color-on-surface
Error
Error
--color-error
Success
Success
--color-success
Warning
Warning
--color-warning

All Variants Reference

Complete color palette across all themes and appearances at a glance

Vanilla
Light Mode
Primary
Primary
#4D3C27
Dark
Primary Dark
#332512
BG
Background
#FFF4E5
Surface
Surface
#FBFBFD
Blueberry
Light Mode
Primary
Primary
#2E2B74
Dark
Primary Dark
#1E193E
BG
Background
#F0EEFF
Surface
Surface
#FBFBFD
Strawberry
Light Mode
Primary
Primary
#800800
Dark
Primary Dark
#5C1A18
BG
Background
#FFF2F1
Surface
Surface
#FBFBFD
Vanilla
Dark Mode
Primary
Primary
#4D3C27
Dark
Primary Dark
#332512
BG
Background
#1C1307
Surface
Surface
#2A2A30
Blueberry
Dark Mode
Primary
Primary
#2E2B74
Dark
Primary Dark
#1E193E
BG
Background
#1C1307
Surface
Surface
#2A2A30
Strawberry
Dark Mode
Primary
Primary
#800800
Dark
Primary Dark
#5C1A18
BG
Background
#1C1307
Surface
Surface
#2A2A30