Design Tokens

Color Theme

A live palette overview for the active interface theme, including resolved CSS variables and the source values for each preset.

Theme

Current

Resolved Variables

Values read from the active theme on the document root.

Presets

Theme Palettes

Source token values grouped by available theme mode.

Light

Bright and clean light palette.

brand-light

#5b6cff

brand-core-light

#4052ff

brand-inverted-light

#ffffff

brand-inverted-highlight1-light

#f0f3ff

brand-inverted-highlight2-light

#dfe6ff

primary-light

#0ea5e9

secondary-light

#22c55e

tertiary-light

#f59e0b

quaternary-light

#ef4444

text1-light

#0f172a

text2-light

#334155

text3-light

#475569

text4-light

#64748b

surface1-light

#ffffff

surface2-light

#f8fafc

surface3-light

#f1f5f9

surface4-light

#e2e8f0

surface5-light

#cbd5e1

surface6-light

#94a3b8

surface7-light

#64748b

surface8-light

#475569

surface-shadow-light

rgba(2, 6, 23, 0.2)

shadow-strength-light

Dark

Moody dark palette.

brand-dark

#7c7eff

brand-core-dark

#a5b4fc

brand-inverted-dark

#0b1220

brand-inverted-highlight1-dark

#111827

brand-inverted-highlight2-dark

#1f2937

primary-dark

#22d3ee

secondary-dark

#4ade80

tertiary-dark

#fbbf24

quaternary-dark

#f87171

text1-dark

#f8fafc

text2-dark

#e2e8f0

text3-dark

#cbd5e1

text4-dark

#94a3b8

surface1-dark

#0b1220

surface2-dark

#0f172a

surface3-dark

#111827

surface4-dark

#1f2937

surface5-dark

#334155

surface6-dark

#475569

surface7-dark

#64748b

surface8-dark

#94a3b8

surface-shadow-dark

rgba(15, 23, 42, 0.55)

shadow-strength-dark

Neon

Bold neon palette.

brand-neon

#22ff88

brand-core-neon

#00ffcc

brand-inverted-neon

#071016

brand-inverted-highlight1-neon

#0a1a22

brand-inverted-highlight2-neon

#0f2430

primary-neon

#39ff14

secondary-neon

#00e5ff

tertiary-neon

#ff00e5

quaternary-neon

#ffe700

text1-neon

#eaffff

text2-neon

#bff8ff

text3-neon

#89e6ff

text4-neon

#59d0f2

surface1-neon

#000810

surface2-neon

#021320

surface3-neon

#061c2b

surface4-neon

#0b2536

surface5-neon

#123046

surface6-neon

#1a3b57

surface7-neon

#24516f

surface8-neon

#2e6a8d

surface-shadow-neon

rgba(0, 229, 255, 0.45)

shadow-strength-neon

Pastell

Soft pastel palette.

brand-pastell

#8bb8e8

brand-core-pastell

#a7c7eb

brand-inverted-pastell

#ffffff

brand-inverted-highlight1-pastell

#f5f9ff

brand-inverted-highlight2-pastell

#e9f2ff

primary-pastell

#a3e3dd

secondary-pastell

#f7c5cc

tertiary-pastell

#f6e6a7

quaternary-pastell

#d9c2e9

text1-pastell

#243043

text2-pastell

#40506a

text3-pastell

#5a6a84

text4-pastell

#7c8aa3

surface1-pastell

#ffffff

surface2-pastell

#fbfcff

surface3-pastell

#f6f9fe

surface4-pastell

#ecf3fb

surface5-pastell

#e2ecf7

surface6-pastell

#d6e3f2

surface7-pastell

#cbd9ec

surface8-pastell

#c0cfe6

surface-shadow-pastell

rgba(36, 48, 67, 0.18)