Color System

Chassis CSS organizes color into three layers that build on each other. Primitive colors give every brand hue a numbered scale. Context colors map those scales onto semantic roles such as fg-main or bg-evident. Body colors alias the active context's tokens to the CSS variables components consume directly. To switch a theme or change the active context, only the active palette changes — every component picks up the new colors automatically.

Primitive colors

Primitive colors and their scale steps are defined in Chassis Tokens. By default there are seven hues — one per brand role — and any project can swap them for its own palette.

Each hue has eleven scale steps: 05, 10–90 in increments of ten, and 95, with 50 as the mid-point. Components and utilities never reference these scales directly — they consume them through the context layer. The scales are still exposed as CSS variables (e.g. --cx-primary-50) for custom code that references a primitive value directly.

Context colors

A context color is a palette of semantic tokens that adapts to light and dark mode. Chassis CSS ships with eleven: the seven brand hues — primary, secondary, neutral, success, warning, danger, info — plus four non-brand contexts: default, alternate, black, and white.

Each non-brand context plays a specific role:

• default — the standard page background and text. In dark mode it inverts automatically: light-on-dark instead of dark-on-light.
• alternate — for prominent regions such as sidebars, banners, and callout sections. Whether it inverts in dark mode is controlled by the Chassis Tokens configuration.
• black and white — fixed values that do not adapt to light or dark mode.

Context palettes

Each context color comes with a full palette of 39 semantic tokens grouped into nine categories: Base, Foreground, Background, Border, Icon, Cue, Dim, Link, and Interaction. Each token maps to a CSS variable named --cx-{context}-{token}, for example --cx-primary-fg-main.

Palette values are resolved at build time by Chassis Tokens through Tokens Studio's color processor. Each token combines a primitive color reference with an opacity value — both defined as tokens themselves — and the output arrives in CSS as a pre-computed custom property. The default context in light mode illustrates the pattern:

// Illustrative — derivation happens in Chassis Tokens at build time.
// Light theme.
$default-fg-main:      $black;
$default-fg-subtle:    to-opacity($default-fg-main, $opacity-fg-subtle);
$default-fg-slight:    to-opacity($default-fg-main, $opacity-fg-slight);
$default-bg-main:      $white;
$default-bg-even:      $neutral-05;
$default-bg-evident:   $neutral-10;

Body colors

The body context — default out of the box — is set in Chassis Tokens. Its tokens become the page-level palette: the context prefix is dropped, so --cx-default-fg-main becomes --cx-fg-main, --cx-default-bg-main becomes --cx-bg-main, and so on.

Eleven of those tokens then receive a further alias — a body semantic variable renamed for the CSS property each one drives. --cx-fg-main becomes --cx-fg-color, and --cx-border-main and --cx-border-subtle become --cx-border-color and --cx-separator-color. Interaction tokens have no body alias; components consume them directly by name.

The .context class re-aims those body variables in markup. Applying .context.primary to any element switches its body variables to the primary palette — for that element and everything inside it.

Further reading

Token values and context mappings are configured in Chassis Tokens; CSS variable names mirror Figma variable paths — color/context/{context}/{token} in Figma becomes --cx-{context}-{token} in CSS.

• Colors — utility classes for applying foreground color.
• Background — utility classes for applying background color.
• Context Class — how to scope a palette to a region of the page.
• Color modes — how to toggle between light and dark themes.