Primary Color
10
text-primary-900
bg-primary-900
20
text-primary-800
bg-primary-800
30
text-primary-700
bg-primary-700
40
text-primary-600
bg-primary-600
50
text-primary-500
bg-primary-500
60
text-primary-400
bg-primary-400
70
text-primary-300
bg-primary-300
80
text-primary-200
bg-primary-200
90
text-primary-100
bg-primary-100
95
text-primary-50
bg-primary-50
99
text-primary-10
bg-primary-10
Light Theme
Primary
text-white
bg-primary-600
On Primary
text-primary-600
bg-white
Container
text-primary-900
bg-primary-100
On Container
text-primary-100
bg-primary-900
Dark Theme
Primary
text-primary-800
bg-primary-200
On Primary
text-primary-200
bg-primary-800
Container
text-primary-100
bg-primary-700
On Container
text-primary-700
bg-primary-100
Secondary
10
text-secondary-900
bg-secondary-900
20
text-secondary-800
bg-secondary-800
30
text-secondary-700
bg-secondary-700
40
text-secondary-600
bg-secondary-600
50
text-secondary-500
bg-secondary-500
60
text-secondary-400
bg-secondary-400
70
text-secondary-300
bg-secondary-300
80
text-secondary-200
bg-secondary-200
90
text-secondary-100
bg-secondary-100
95
text-secondary-50
bg-secondary-50
99
text-secondary-10
bg-secondary-10
Light Theme
Secondary
text-white
bg-secondary-600
On Secondary
text-secondary-600
bg-white
Container
text-secondary-900
bg-secondary-100
On Container
text-secondary-100
bg-secondary-900
Dark Theme
Secondary
text-secondary-800
bg-secondary-200
On Secondary
text-secondary-200
bg-secondary-800
Container
text-secondary-100
bg-secondary-700
On Container
text-secondary-700
bg-secondary-100
Tertiary
10
text-tertiary-900
bg-tertiary-900
20
text-tertiary-800
bg-tertiary-800
30
text-tertiary-700
bg-tertiary-700
40
text-tertiary-600
bg-tertiary-600
50
text-tertiary-500
bg-tertiary-500
60
text-tertiary-400
bg-tertiary-400
70
text-tertiary-300
bg-tertiary-300
80
text-tertiary-200
bg-tertiary-200
90
text-tertiary-100
bg-tertiary-100
95
text-tertiary-50
bg-tertiary-50
99
text-tertiary-10
bg-tertiary-10
Light Theme
Tertiary
text-white
bg-tertiary-600
On Tertiary
text-tertiary-600
bg-white
Container
text-tertiary-900
bg-tertiary-100
On Container
text-tertiary-100
bg-tertiary-900
Dark Theme
Tertiary
text-tertiary-800
bg-tertiary-200
On Tertiary
text-tertiary-200
bg-tertiary-800
Container
text-tertiary-100
bg-tertiary-700
On Container
text-tertiary-700
bg-tertiary-100
Error
10
text-error-900
bg-error-900
20
text-error-800
bg-error-800
30
text-error-700
bg-error-700
40
text-error-600
bg-error-600
50
text-error-500
bg-error-500
60
text-error-400
bg-error-400
70
text-error-300
bg-error-300
80
text-error-200
bg-error-200
90
text-error-100
bg-error-100
95
text-error-50
bg-error-50
99
text-error-10
bg-error-10
Light Theme
Error
text-white
bg-error-600
On Error
text-error-600
bg-white
Container
text-error-900
bg-error-100
On Container
text-error-100
bg-error-900
Dark Theme
Error
text-error-800
bg-error-200
On Error
text-error-200
bg-error-800
Container
text-error-100
bg-error-700
On Container
text-error-700
bg-error-100
Neutral
10
text-neutral-900
bg-neutral-900
20
text-neutral-800
bg-neutral-800
30
text-neutral-700
bg-neutral-700
40
text-neutral-600
bg-neutral-600
50
text-neutral-500
bg-neutral-500
60
text-neutral-400
bg-neutral-400
70
text-neutral-300
bg-neutral-300
80
text-neutral-200
bg-neutral-200
90
text-neutral-100
bg-neutral-100
95
text-neutral-50
bg-neutral-50
99
text-neutral-10
bg-neutral-10
Light Theme
Body
text-black
bg-neutral-10
On Body
text-white
bg-neutral-900
Surface
text-black
bg-neutral-10
On Surface
text-white
bg-neutral-900
Dark Theme
Body
text-white
bg-neutral-900
On Body
text-black
bg-neutral-100
Surface
text-white
bg-neutral-900
On Surface
text-black
bg-neutral-100
Gray (Neutral Variant)
0
text-black
bg-black
10
text-gray-900
bg-gray-900
20
text-gray-800
bg-gray-800
30
text-gray-700
bg-gray-700
40
text-gray-600
bg-gray-600
50
text-gray-500
bg-gray-500
60
text-gray-400
bg-gray-400
70
text-gray-300
bg-gray-300
80
text-gray-200
bg-gray-200
90
text-gray-100
bg-gray-100
95
text-gray-50
bg-gray-50
99
text-gray-10
bg-gray-10
100
text-white
bg-white
Light Theme
Surface
text-black
bg-gray-100
On Surface
text-white
bg-gray-700
Outline
text-white
bg-gray-500
On Outline
text-black
bg-gray-100
Dark Theme
Gray
text-white
bg-gray-800
On gray
text-black
bg-gray-300
Container
text-black
bg-gray-400
On Container
text-white
bg-gray-800
Surfaces - Light
Surfaces
bg-surface-50
Surfaces at +1
bg-surface-100
Surfaces at +2
bg-surface-200
Surfaces at +3
bg-surface-300
Surfaces at +4
bg-surface-400
Surfaces at +5
bg-surface-500
Surfaces - Dark
Surfaces
bg-surfacedark-50
Surfaces at +1
bg-surfacedark-100
Surfaces at +2
bg-surfacedark-200
Surfaces at +3
bg-surfacedark-300
Surfaces at +4
bg-surfacedark-400
Surfaces at +5
bg-surfacedark-500