Foundations / Design tokens

Design tokens

Design tokens are the single source of truth for all visual decisions in Flux UI — color, spacing, motion, and border radius. Use CSS variables directly or via Tailwind utilities.

Color

Background

Token and description	Light value	Dark value
`--background` Page and app background.	`#f6f8fa`	`#0b0f14`
`--card` Card and panel surface background.	`#ffffff`	`#141a22`
`--muted` Subtle background for hover states and grouped sections.	`#f3f4f6`	`#1e2630`
`--popover` Floating panel background (tooltips, menus, popovers).	`#ffffff`	`#1a222d`
`--accent` Accent background for highlighted items.	`#f3f4f6`	`#1e2630`
`--primary-light` Tinted primary background for badges and chips.	`#eff4ff`	`rgba(0,97,227,0.18)`

Text

Token and description	Light value	Dark value
`--foreground` Primary text color.	`#111827`	`#f3f4f6`
`--muted-foreground` Secondary / placeholder text.	`#6b7280`	`#b4bcc8`
`--primary-foreground` Text on primary color backgrounds.	`#ffffff`	`#ffffff`
`--card-foreground` Text on card backgrounds.	`#111827`	`#f3f4f6`

Border

Token and description	Light value	Dark value
`--border` Default border color for cards, inputs, and dividers.	`#e5e7eb`	`#2a3441`
`--input` Input border color.	`#e5e7eb`	`#2a3441`
`--ring` Focus ring color.	`#0061e3`	`#3b82f6`

Interactive

Token and description	Light value	Dark value
`--primary` Primary brand color. Used for CTAs, links, and focus.	`#0061e3`	`#0061e3`
`--primary-hover` Hover state for primary interactive elements.	`#0055c8`	`#3b82f6`
`--destructive` Error and destructive action color.	`#dc2626`	`#f87171`
`--destructive-foreground` Text on destructive backgrounds.	`#ffffff`	`#450a0a`

Chart

Token and description	Light value	Dark value
`--chart-1` First chart series color.	`#0061e3`	`#60a5fa`
`--chart-2` Second chart series color.	`#2563eb`	`#818cf8`
`--chart-3` Third chart series color.	`#7c3aed`	`#c4b5fd`
`--chart-4` Fourth chart series color.	`#059669`	`#34d399`
`--chart-5` Fifth chart series color.	`#d97706`	`#fbbf24`

Navigation

Token and description	Light value	Dark value
`--sidebar` Sidebar background.	`#e8eaee`	`#10151c`
`--sidebar-border` Sidebar border.	`#d8dce3`	`#2a3441`
`--sidebar-foreground` Sidebar text.	`#374151`	`#d1d5db`
`--header` Top navigation bar background.	`#ffffff`	`#0f1419`
`--header-border` Top navigation bar border.	`#e2e5ea`	`#2a3441`

Border

Radius

Token and description	Light value	Dark value
`--radius` Base border radius.	`0.375rem (6px)`	`0.375rem (6px)`
`--radius-xl` XL border radius for cards.	`0.625rem (10px)`	`0.625rem (10px)`
`--radius-2xl` 2XL border radius.	`0.875rem (14px)`	`0.875rem (14px)`
`--radius-3xl` 3XL border radius for panels.	`1.25rem (20px)`	`1.25rem (20px)`

Motion

Duration

Token and description	Light value	Dark value
`--motion-duration-instant` No visible delay — used for immediate state changes.	`0ms`	`0ms`
`--motion-duration-fast` Quick micro-interactions (hover, focus).	`120ms`	`120ms`
`--motion-duration-normal` Standard transitions (modals, panels).	`200ms`	`200ms`
`--motion-duration-slow` Progress bars, page transitions.	`320ms`	`320ms`
`--motion-duration-slower` Slow reveals, complex animations.	`480ms`	`480ms`

Easing

Token and description	Light value	Dark value
`--motion-ease-standard` Default UI easing. Smooth, slightly bouncy deceleration.	`cubic-bezier(0.16, 1, 0.3, 1)`	`cubic-bezier(0.16, 1, 0.3, 1)`
`--motion-ease-emphasized` Springy — for overlay entrances and attention draws.	`cubic-bezier(0.34, 1.56, 0.64, 1)`	`cubic-bezier(0.34, 1.56, 0.64, 1)`
`--motion-ease-linear` Constant speed — for progress bars and looping animations.	`linear`	`linear`