Flux

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 color 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-800) r g b / .1)
rgb(from var(--gray-800) r g b / .15)
--surface-stroke-out-hover
rgb(from var(--gray-900) r g b / .15)
rgb(from var(--gray-900) r g b / .2)
--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

Text scale ​

Every size is paired with a line-height, and the two are always set together. The pairing is what keeps line boxes on the 3px grid: a font-size on its own would derive its line box from a ratio and land on fractional pixels.

Token
Value
Usage
--font-size-2xsmall
--line-height-2xsmall
12px
18px
Fine print: pagination, meta rows, calendar entries.
--font-size-xsmall
--line-height-xsmall
13px
18px
Compact labels, such as FluxBadge and FluxText at small.
--font-size-small
--line-height-small
14px
21px
Interface text: tables, menus, tooltips, snackbars.
--font-size-default
--line-height-default
15px
24px
Body text. Inherited from body, so this is what you get when nothing is set.
--font-size-large
--line-height-large
16px
24px
Prominent single lines: pane captions, section headers.
--font-size-xlarge
--line-height-xlarge
18px
27px
Titles below heading level, such as FluxText at large.

Headings sit outside this scale and carry their own pair: h1 is 27/42, h2 is 21/33. The remaining levels line up with the scale, so h3 is xlarge, h4 is large, h5 is default and h6 is small.

Changing the base size

--font-size-default also sets the root font-size, so it is the basis for every rem in your own code. Override it on :root to rescale the interface, and override --line-height-default along with it to keep the rhythm on the grid.

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.

scss
: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.