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 cases where you need a primitive value in custom code.

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 36 semantic tokens grouped into nine categories — foreground, background, border, icon, link, cue, dim, and interactive (idle/hover/press/disabled). 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, ready to use. The example below shows the derivation 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 palette becomes the page-level palette: the context prefix is dropped, so --cx-default-fg-main is exposed as --cx-fg-main, --cx-default-bg-main as --cx-bg-main, and so on.

From there, each palette token gets one more alias — a body semantic variable that maps directly to the CSS property it controls (for example color, background-color, or border-color):

The .context class is how you re-aim those body variables in markup. Add class="context primary" to any element and its body variables instantly switch to the primary palette — for that element and everything inside it.

Further reading

Primitive colors, scale values, opacity levels, and context mappings are all configured in Chassis Tokens. The CSS variable names mirror the Figma variable paths in Chassis Figma — color/context/{context}/{token} in Figma becomes --cx-{context}-{token} in CSS — so designs and code always point to the same value.

For applying colors in markup, see the Colors and Background utility pages. To build context-aware components, see the Context Class page.