Foundations / Color
Color palette
Flux uses a semantic token system built on top of a structured color scale. Primitives (e.g. Blue600) map to semantic tokens (e.g. --primary) which components consume. Change the token, everything updates.
Color anatomy
Each color in the Flux palette has a numeric suffix indicating lightness — lower numbers are lighter, higher numbers are darker. The scale runs from 50 (near-white) to 1000 (near-black). In dark mode, semantic tokens remap to different primitives automatically.
Semantic token
--primarymaps to
Primitive
#0061e3 (Blue)The palette
Blue
Blue50#eff4ff
Blue100#dbeafe
Blue200#bfdbfe
Blue300#93c5fd
Blue400#60a5fa
Blue500#3b82f6
Blue600#2563eb
Blue700#1d4ed8
Blue800#1e40af
Blue900#1e3a8a
Blue1000#172554
Purple
Purple50#faf5ff
Purple100#f3e8ff
Purple200#e9d5ff
Purple300#d8b4fe
Purple400#c084fc
Purple500#a855f7
Purple600#9333ea
Purple700#7c3aed
Purple800#6b21a8
Purple900#581c87
Purple1000#3b0764
Green
Green50#f0fdf4
Green100#dcfce7
Green200#bbf7d0
Green300#86efac
Green400#4ade80
Green500#22c55e
Green600#16a34a
Green700#15803d
Green800#166534
Green900#14532d
Green1000#052e16
Red
Red50#fef2f2
Red100#fee2e2
Red200#fecaca
Red250#fca5a5
Red300#f87171
Red400#ef4444
Red500#dc2626
Red600#b91c1c
Red700#991b1b
Red800#7f1d1d
Red850#6b1a1a
Red900#450a0a
Amber
Amber50#fffbeb
Amber100#fef3c7
Amber200#fde68a
Amber300#fcd34d
Amber400#fbbf24
Amber500#f59e0b
Amber600#d97706
Amber700#b45309
Amber800#92400e
Amber900#78350f
Teal
Teal50#f0fdfa
Teal100#ccfbf1
Teal200#99f6e4
Teal300#5eead4
Teal400#2dd4bf
Teal500#14b8a6
Teal600#0d9488
Teal700#0f766e
Teal800#115e59
Teal900#134e4a
Neutral
Neutral0#ffffff
Neutral50#f9fafb
Neutral100#f3f4f6
Neutral200#e5e7eb
Neutral300#d1d5db
Neutral400#9ca3af
Neutral500#6b7280
Neutral600#4b5563
Neutral700#374151
Neutral800#1f2937
Neutral900#111827
Neutral950#030712
Semantic color roles
Always use semantic tokens in components — never raw hex values. This ensures dark mode and theming work automatically.
| Token | Light | Dark | Usage |
|---|---|---|---|
| --primary | #0061e3 | #0061e3 | Primary actions, links, focus rings |
| --background | #f6f8fa | #0b0f14 | Page background |
| --card | #ffffff | #141a22 | Card and surface backgrounds |
| --foreground | #111827 | #f3f4f6 | Primary text |
| --muted-foreground | #6b7280 | #b4bcc8 | Secondary / placeholder text |
| --border | #e5e7eb | #2a3441 | Borders, dividers |
| --muted | #f3f4f6 | #1e2630 | Subtle backgrounds, hover states |
| --destructive | #dc2626 | #f87171 | Errors, destructive actions |
| --ring | #0061e3 | #3b82f6 | Focus rings |