Flux 2.0

Flux

The Kaptio design system. One import gives you the tokens, the typography, the focus states and the accessibility floor — in light, dark or deep, without a component knowing which.

Install

One line for a prototype. Everything below inherits from it.

css

@import url("https://flux.kaptio.com/tokens/v2/flux.css");

That loads Lexend and JetBrains Mono, defines every token in all three themes, sets the fluid root size, and applies the focus ring. For an application, pin the package instead — see Install.

The shape of the system

Three tiers. Your code should almost always touch the middle one.

A primitive is a raw value with no opinion — --flux-primary-400is a teal, and nothing more. A semantic token is a role —--flux-text-link is what a link is, whichever theme is active. A component token is a decision about one part —--flux-button-height-md.

Reference semantic tokens. They are the only tier that changes with the theme, so anything built on them themes automatically and anything built on primitives does not.

css

/* Themes. Survives a redefinition of the teal ramp. */
.panel {
  background: var(--flux-layer-01);
  color: var(--flux-text-primary);
  border: 1px solid var(--flux-border-subtle);
}

/* Does not theme. Locks a light-mode value into a dark-mode surface. */
.panel {
  background: var(--flux-white);
  color: var(--flux-black);
  border: 1px solid #E3E8E8;
}

What 2.0 adds

Almost all of the Flux 1.x surface carries over under the same name and the same value, so an upgrade is close to an import swap.

Compatible

Flux 1.x names such as --flux-background, --flux-surface and--flux-heading are published forever, with their original light-theme values. Six tokens do differ, and 1.x keeps serving at its own URL until you move — seeUpgrading from 1.x.

If you are an agent

Read the contract, not the marketing.

Flux is designed to be consumed by language models as much as by people. The whole system is available as plain text at /llms.txt — every token name, every rule, every component’s markup, in one file with no HTML to parse.

Individual components are at /components/source/<name>.txt. Repository rules for Cursor, Claude Code and Copilot are at For AI → Repository rules.

Components

48, documented to one shape. Each one shows a live specimen above the exact markup that produced it.