Colors

Design Tokens

Every color value pulled live from the Figma export — 35 semantic tokens, the Tailwind palette, and the Radix scale.

Semantic Tokens

The 35 tokens that drive every component. Values pulled directly from the Figma export — these are the variables behind `bg-primary`, `text-muted-foreground`, and the rest.

backgrund#ffffff

alias: white

The page shell, page sections, and default text.

foreground#0a0a0a

alias: neutral/950

The page shell, page sections, and default text.

Card#ffffff

alias: white

Card, dashboard panels, settings panels.

Card-foregrund#0a0a0a

alias: neutral/950

Card, dashboard panels, settings panels.

popover#ffffff

alias: white

Popover, DropdownMenu, ContextMenu, and other overlays.

popover-foregrund#0a0a0a

alias: neutral/950

Popover, DropdownMenu, ContextMenu, and other overlays.

primary#171717

alias: neutral/900

Default Button, selected states, badges, and active accents.

primary-foregrund#fafafa

alias: neutral/50

Default Button, selected states, badges, and active accents.

secondary#f5f5f5

alias: neutral/100

Secondary buttons, secondary badges, and supporting UI.

secondary-foregrund#0a0a0a

alias: neutral/950

Secondary buttons, secondary badges, and supporting UI.

muted#f5f5f5

alias: neutral/100

muted-foregrund#737373

alias: neutral/500

accent#f5f5f5

alias: neutral/100

Descriptions, placeholders, empty states, helper text, and subdued surfaces.

accent-foregrund#171717

alias: neutral/900

Descriptions, placeholders, empty states, helper text, and subdued surfaces.

destructive#dc2626

alias: red/600

border#e5e5e5

alias: neutral/200

input#e5e5e5

alias: neutral/200

ring#737373

alias: neutral/500

chart-1#5eb1ef

alias: blue/8

chart-2#0090ff

alias: blue/9

chart-3#0588f0

alias: blue/10

chart-4#0d74ce

alias: blue/11

chart-5#113264

alias: blue/12

sidebar#fafafa

alias: neutral/50

sidebar-foregrund#0a0a0a

alias: neutral/950

sidebar-primary#171717

alias: neutral/900

sidebar-primary-foregrund#fafafa

alias: neutral/50

sidebar-accent#f5f5f5

alias: neutral/100

sidebar-accent-foregrund#171717

alias: neutral/900

sidebar-border#d4d4d4

alias: neutral/300

sidebar-ring#737373

alias: neutral/500

background-color#000000

alias: black/5 · 30%

semantic-background#6b7280

alias: gray/500

semantic-border#4b5563

alias: gray/600

semantic-foreground#ffffff

alias: white

Tailwind Palette

244 base colors across 24 families — the source palette aliased by the semantic tokens.

slate

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

gray

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

950

#030712

zinc

#fafafa

100

#f4f4f5

200

#e4e4e7

300

#d4d4d8

400

#a1a1aa

500

#71717a

600

#52525b

700

#3f3f46

800

#27272a

900

#18181b

950

#09090b

neutral

#fafafa

100

#f5f5f5

200

#e5e5e5

300

#d4d4d4

400

#a3a3a3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0a0a0a

stone

#fafaf9

100

#f5f5f4

200

#e7e5e4

300

#d6d3d1

400

#a8a29e

500

#78716c

600

#57534e

700

#44403c

800

#292524

900

#1c1917

950

#0c0a09

red

#fef2f2

100

#fee2e2

200

#fca5a5

300

#f87171

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

orange

#fff7ed

100

#ffedd5

200

#fed7aa

300

#fdba74

400

#fb923c

500

#f97316

600

#ea580c

700

#c2410c

800

#9a3412

900

#7c2d12

950

#431407

amber

#fffbeb

100

#fef3c7

200

#fde68a

300

#fcd34d

400

#fbbf24

500

#f59e0b

600

#d97706

700

#b45309

800

#92400e

900

#78350f

950

#451a03

yellow

#fefce8

100

#fef9c3

200

#fef08a

300

#fde047

400

#facc15

500

#eab308

600

#ca8a04

700

#a16207

800

#854d0e

900

#713f12

950

#422006

lime

#f7fee7

100

#ecfccb

200

#d9f99d

300

#bef264

400

#a3e635

500

#84cc16

600

#65a30d

700

#4d7c0f

800

#3f6212

900

#365314

950

#1a2e05

green

#f0fdf4

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#16a34a

700

#15803d

800

#166534

900

#14532d

950

#052e16

emerald

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#10b981

600

#059669

700

#047857

800

#065f46

900

#064e3b

950

#022c22

teal

#f0fdfa

100

#ccfbf1

200

#99f6e4

300

#5eead4

400

#2dd4bf

500

#14b8a6

600

#0d9488

700

#0f766e

800

#115e59

900

#134e4a

950

#042f2e

cyan

#ecfeff

100

#cffafe

200

#a5f3fc

300

#67e8f9

400

#22d3ee

500

#06b6d4

600

#0891b2

700

#0e7490

800

#155e75

900

#164e63

950

#083344

sky

#f0f9ff

100

#e0f2fe

200

#bae6fd

300

#7dd3fc

400

#38bdf8

500

#0ea5e9

600

#0284c7

700

#0369a1

800

#075985

900

#0c4a6e

950

#082f49

blue

#eff6ff

100

#dbeafe

200

#bfdbfe

300

#93c5fd

400

#60a5fa

500

#3b82f6

600

#2563eb

700

#1d4ed8

800

#1e40af

900

#1e3a8a

950

#172554

indigo

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

950

#1e1b4b

violet

#f5f3ff

100

#ede9fe

200

#ddd6fe

300

#c4b5fd

400

#a78bfa

500

#8b5cf6

600

#7c3aed

700

#6d28d9

800

#5b21b6

900

#4c1d95

950

#2e1065

purple

#faf5ff

100

#f3e8ff

200

#e9d5ff

300

#d8b4fe

400

#c084fc

500

#a855f7

600

#9333ea

700

#7e22ce

800

#6b21a8

900

#581c87

950

#3b0764

fuchsia

#fdf4ff

100

#fae8ff

200

#f5d0fe

300

#f0abfc

400

#e879f9

500

#d946ef

600

#c026d3

700

#a21caf

800

#86198f

900

#701a75

950

#4a044e

pink

#fdf2f8

100

#fce7f3

200

#fbcfe8

300

#f9a8d4

400

#f472b6

500

#ec4899

600

#db2777

700

#be185d

800

#9d174d

900

#831843

950

#500724

rose

#fff1f2

100

#ffe4e6

200

#fecdd3

300

#fda4af

400

#fb7185

500

#f43f5e

600

#e11d48

700

#be123c

800

#9f1239

900

#881337

950

#4c0519

white

#ffffff

black

#000000

Radix Palette

396 perceptual scale colors across 33 families — used for chart tokens and overlays.

gray

#fcfcfc

#f9f9f9

#f0f0f0

#e8e8e8

#e0e0e0

#d9d9d9

#cecece

#bbbbbb

#8d8d8d

#838383

#646464

#202020

mauve

#fdfcfd

#faf9fb

#f2eff3

#eae7ec

#e3dfe6

#dbd8e0

#d0cdd7

#bcbac7

#8e8c99

#84828e

#65636d

#211f26

slate

#fcfcfd

#f9f9fb

#f0f0f3

#e8e8ec

#e0e1e6

#d9d9e0

#cdced6

#b9bbc6

#8b8d98

#80838d

#60646c

#1c2024

sage

#fbfdfc

#f7f9f8

#eef1f0

#e6e9e8

#dfe2e0

#d7dad9

#cbcfcd

#b8bcba

#868e8b

#7c8481

#5f6563

#1a211e

olive

#fcfdfc

#f8faf8

#eff1ef

#e7e9e7

#dfe2df

#d7dad7

#cccfcc

#b9bcb8

#898e87

#7f847d

#60655f

#1d211c

sand

#fdfdfc

#f9f9f8

#f1f0ef

#e9e8e6

#e2e1de

#dad9d6

#cfceca

#bcbbb5

#8d8d86

#82827c

#63635e

#21201c

tomato

#fffcfc

#fff8f7

#feebe7

#ffdcd3

#ffcdc2

#fdbdaf

#f5a898

#ec8e7b

#e54d2e

#dd4425

#d13415

#5c271f

red

#fffcfc

#fff7f7

#feebec

#ffdbdc

#ffcdce

#fdbdbe

#f4a9aa

#eb8e90

#e5484d

#dc3e42

#ce2c31

#641723

ruby

#fffcfd

#fff7f8

#feeaed

#ffdce1

#ffced6

#f8bfc8

#efacb8

#e592a3

#e54666

#dc3b5d

#ca244d

#64172b

crimson

#fffcfd

#fef7f9

#ffe9f0

#fedce7

#facedd

#f3bed1

#eaacc3

#e093b2

#e93d82

#df3478

#cb1d63

#621639

pink

#fffcfe

#fef7fb

#fee9f5

#fbdcef

#f6cee7

#efbfdd

#e7acd0

#dd93c2

#d6409f

#cf3897

#c2298a

#651249

plum

#fefcff

#fdf7fd

#fbebfb

#f7def8

#f2d1f3

#e9c2ec

#deade3

#cf91d8

#ab4aba

#a144af

#953ea3

#53195d

purple

#fefcfe

#fbf7fe

#f7edfe

#f2e2fc

#ead5f9

#e0c4f4

#d1afec

#be93e4

#8e4ec6

#8347b9

#8145b5

#402060

violet

#fdfcfe

#faf8ff

#f4f0fe

#ebe4ff

#e1d9ff

#d4cafe

#c2b5f5

#aa99ec

#6e56cf

#654dc4

#6550b9

#2f265f

iris

#fdfdff

#f8f8ff

#f0f1fe

#e6e7ff

#dadcff

#cbcdff

#b8baf8

#9b9ef0

#5b5bd6

#5151cd

#5753c6

#272962

indigo

#fdfdfe

#f7f9ff

#edf2fe

#e1e9ff

#d2deff

#c1d0ff

#abbdf9

#8da4ef

#3e63dd

#3358d4

#3a5bc7

#1f2d5c

blue

#fbfdff

#f4faff

#e6f4fe

#d5efff

#c2e5ff

#acd8fc

#8ec8f6

#5eb1ef

#0090ff

#0588f0

#0d74ce

#113264

cyan

#fafdfe

#f2fafb

#def7f9

#caf1f6

#b5e9f0

#9ddde7

#7dcedc

#3db9cf

#00a2c7

#0797b9

#107d98

#0d3c48

teal

#fafefd

#f3fbf9

#e0f8f3

#ccf3ea

#b8eae0

#a1ded2

#83cdc1

#53b9ab

#12a594

#0d9b8a

#008573

#0d3d38

jade

#fbfefd

#f4fbf7

#e6f7ed

#d6f1e3

#c3e9d7

#acdec8

#8bceb6

#56ba9f

#29a383

#26997b

#208368

#1d3b31

green

#fbfefc

#f4fbf6

#e6f6eb

#d6f1df

#c4e8d1

#adddc0

#8eceaa

#5bb98b

#30a46c

#2b9a66

#218358

#193b2d

grass

#fbfefb

#f5fbf5

#e9f6e9

#daf1db

#c9e8ca

#b2ddb5

#94ce9a

#65ba74

#46a758

#3e9b4f

#2a7e3b

#203c25

bronze

#fdfcfc

#fdf7f5

#f6edea

#efe4df

#e7d9d3

#dfcdc5

#d3bcb3

#c2a499

#a18072

#957468

#7d5e54

#43302b

gold

#fdfdfc

#faf9f2

#f2f0e7

#eae6db

#e1dccf

#d8d0bf

#cbc0aa

#b9a88d

#978365

#8c7a5e

#71624b

#3b352b

brown

#fefdfc

#fcf9f6

#f6eee7

#f0e4d9

#ebdaca

#e4cdb7

#dcbc9f

#cea37e

#ad7f58

#a07553

#815e46

#3e332e

orange

#fefcfb

#fff7ed

#ffefd6

#ffdfb5

#ffd19a

#ffc182

#f5ae73

#ec9455

#f76b15

#ef5f00

#cc4e00

#582d1d

amber

#fefdfb

#fefbe9

#fff7c2

#ffee9c

#fbe577

#f3d673

#e9c162

#e2a336

#ffc53d

#ffba18

#ab6400

#4f3422

yellow

#fdfdf9

#fefce9

#fffab8

#fff394

#ffe770

#f3d768

#e4c767

#d5ae39

#ffe629

#ffdc00

#9e6c00

#473b1f

lime

#fcfdfa

#f8faf3

#eef6d6

#e2f0bd

#d3e7a6

#c2da91

#abc978

#8db654

#bdee63

#b0e64c

#5c7c2f

#37401c

mint

#f9fefd

#f2fbf9

#ddf9f2

#c8f4e9

#b3ecde

#9ce0d0

#7ecfbd

#4cbba5

#86ead4

#7de0cb

#027864

#16433c

sky

#f9feff

#f1fafd

#e1f6fd

#d1f0fa

#bee7f5

#a9daed

#8dcae3

#60b3d7

#7ce2fe

#74daf8

#00749e

#1d3e56

black

#000000

white

#ffffff