Design Tokens

Chassis Tokens defines every color, spacing, border radius, font, motion, and shadow in Chassis CSS, with multi-brand, multi-theme, and multi-platform support.

Nothing in Chassis CSS is hardcoded. Every visual property is wired to a token — a single change in Chassis Tokens propagates to every component and utility that references it, in CSS, in Figma, and across every target platform.

How tokens are structured

Tokens are layered. Lower layers hold raw values; higher layers turn those values into named design decisions.

Layer	Token set files	What it contains
Metric	`base/metric-base`, `base/metric-px`	Unit scale, spacing scale, opacity levels
Brand	`base/brand-base`, `brand-{name}/brand-base`	Primitive color palettes; typography (family, weight, size, line-height)
Theme	`base/theme-base`, `base/theme-light`, `base/theme-dark`	Semantic context color palettes for light and dark modes
App	`base/app-base`, `base/app-{name}`	Component-level metrics: spacing, color, font, shadow, grid, border
Effect	`base/effect-base`	Shadow definitions
Motion	`base/motion-base`	Duration and easing

A token build composes these layers — brand × theme × app — and resolves the result for a specific platform and screen size.

Collections and modes

In Figma, token layers map to variable collections. Each collection has modes, so a single token can hold different values depending on what's active — a brand, a theme, or an app. The three collections that switch independently are:

Collection	Modes
Brand	One mode per brand (e.g. `chassis`, `test`)
Theme	`light`, `dark`
App	One mode per app (e.g. `docs`, `demo`)

Because the collections are independent, switching the Theme from light to dark updates every component that references a theme token without touching any Brand or App settings.

What's inside

Each token category maps to a predictable CSS variable pattern, carrying design decisions from Figma through to runtime values in CSS.

Color

Color tokens follow the three-layer structure of the Color System:

color/palette/{hue}/{step} — the primitive scale, e.g. color/palette/primary/50.
color/context/{context}/{token} — the semantic palette for each context color, e.g. color/context/primary/fg-main.
Component color definitions in the app layer — per-component values that reference context tokens, e.g. color/button/primary/bg-idle.

A context token becomes --cx-{context}-{token} in CSS, and the body shorthand --cx-fg-main is an alias for the active body context's fg-main.

Spacing

Spacing uses a named scale rather than numeric steps. It runs from zero to 6xlarge:

zero · 4xsmall · 3xsmall · 2xsmall · xsmall · small · medium · large · xlarge · 2xlarge · 3xlarge · 4xlarge · 5xlarge · 6xlarge

The global scale lives under space/context/{step} in Figma and surfaces as --cx-space-{step} in CSS. Component-level spacing — for example button padding — lives under space/{component}/{variant|size}/{property} and surfaces as --cx-{component}-{property}.

Typography

Brand tokens define the font family, weight scale, and size scale. App tokens compose these into named text styles under font/{family}/{size}/{weight}. The resulting CSS variables follow the --cx-font-{property} pattern.

Metrics

Component metrics — border radius, border width, icon size, grid columns, gap — live in the app-base layer. Global values become --cx-{property}; component-specific values become --cx-{component}-{property}.

Motion

Duration and easing tokens live in base/motion-base and surface as --cx-motion-{property}. Use them to keep transitions consistent across components.

Effects

Shadow definitions live in base/effect-base. They are consumed internally by shadow utilities and the elevation system and do not surface as standalone CSS variables.

Figma and CSS variables

Chassis Tokens and Chassis CSS share a naming structure, so a token in Figma and its CSS variable always point to the same design decision:

color/context/{context}/{token}  →  --cx-{context}-{token}
space/context/{step}             →  --cx-space-{step}

For example, color/context/primary/fg-main in Figma is --cx-primary-fg-main in CSS — the same value used by the fg-primary utility class and the .context.primary palette.

Toolchain

Tokens are authored with Tokens Studio inside Figma and synced to the chassis-tokens repository as JSON. Style Dictionary then transforms them into platform-specific output: SCSS for the web, Swift for iOS, and XML for Android. See the Chassis Tokens repository for build instructions and configuration details.

Token values are defined and customized in Chassis Tokens, not in Chassis CSS. Visit the Chassis Tokens documentation to browse token values, modify the token layer system, or create a custom brand.