Design tokens
Flux exposes its visual language as CSS custom properties. Use them to theme your application, build new components that fit in seamlessly, or override individual values for a single element. All tokens are defined on :root and adjust automatically when Dark mode is active.
For the colour palette tokens (--gray-*, --primary-*, --danger-*, --info-*, --success-*, --warning-*) see Colors.
Surface
Semantic tokens for backgrounds, borders and disabled states. These are the tokens you should reach for first when styling new UI — they automatically follow the active theme.
Token | Light | Dark mode |
|---|---|---|
--background | var(--gray-25) | var(--gray-25) |
--surface | var(--gray-25) | var(--gray-25) |
--surface-hover | var(--gray-50) | var(--gray-50) |
--surface-active | var(--gray-100) | var(--gray-100) |
--surface-disabled | var(--gray-100) | var(--gray-100) |
--surface-stroke | var(--gray-200) | var(--gray-200) |
--surface-stroke-hover | var(--gray-300) | var(--gray-300) |
--surface-stroke-out | rgb(from var(--gray-900) r g b / .1) | rgb(from var(--gray-900) r g b / .1) |
--surface-stroke-out-hover | rgb(from var(--gray-950) r g b / .1) | rgb(from var(--gray-950) r g b / .1) |
--surface-loader | rgb(from var(--gray-25) r g b / .75) | rgb(from var(--gray-25) r g b / .75) |
Foreground
Tokens for text and iconography.
Token | Value |
|---|---|
--foreground | var(--gray-700) |
--foreground-prominent | var(--gray-900) |
--foreground-secondary | var(--gray-500) |
Overlay
Used by FluxOverlay, FluxSlideOver, FluxFlyout and other dialog-like components. Dark mode uses solid black with alpha to keep dimming effects readable.
Token | Light | Dark mode |
|---|---|---|
--overlay | rgb(from var(--gray-950) r g b / .5) | rgb(0 0 0 / .6) |
--overlay-secondary | rgb(from var(--gray-950) r g b / .15) | rgb(0 0 0 / .4) |
--overlay-strong | rgb(from var(--gray-950) r g b / .9) | rgb(0 0 0 / .9) |
Shadow
A scale of seven shadow levels. Each level uses a slightly different opacity in dark mode so elevations remain visible against the darker surface.
Token | Description |
|---|---|
--shadow-px | Hairline elevation — used to separate adjacent surfaces. |
--shadow-xs | Slight elevation — buttons, chips. |
--shadow-sm | Resting state of cards and panes. |
--shadow-md | Hovered or focused cards. |
--shadow-lg | Pop-overs, dropdowns and small overlays. |
--shadow-xl | Modal-like flyouts. |
--shadow-2xl | Large dialogs and overlays. |
Radius
Token | Value | Usage |
|---|---|---|
--radius | 12px | Default border-radius for surfaces and inputs. |
--radius-half | 6px | Tight rounding — used inside chips and small inputs. |
--radius-double | 24px | Larger rounding — heroes, illustrations. |
--radius-full | 9999px | Pill-shaped components such as FluxBadge. |
Typography
Token | Value |
|---|---|
--font-sans | inter-variable, sans-serif |
--font-monospace | jetbrains-mono, monospace |
--font-serif | serif |
--font-size | 15px |
Motion
The motion tokens drive every Flux transition. Use them when you build custom animations so timings stay consistent with the rest of the system.
Token | Value |
|---|---|
--acceleration-curve | cubic-bezier(0.4, 0, 1, 1) |
--deceleration-curve | cubic-bezier(0, 0, 0.2, 1) |
--standard-curve | cubic-bezier(0.4, 0, 0.2, 1) |
--swift-out | cubic-bezier(0.55, 0, 0.1, 1) |
--transition-default | 180ms var(--swift-out) |
Overriding tokens
All tokens are regular CSS custom properties, so you can override them at any level — globally, on a single component, or even inline.
:root {
--radius: 8px; /* Square off the entire UI. */
--primary-600: #0070f3; /* Replace the primary accent. */
}
.my-card {
--surface: var(--primary-50);
--surface-stroke: var(--primary-200);
}Because semantic tokens reference palette tokens (e.g. --surface: var(--gray-25)), changing a single palette token cascades through every component that uses it.