Skip to main contentSkip to docs navigation
View on GitHub

Core Concepts

The architectural ideas behind Chassis CSS — tokens, the color system, the context class, component anatomy, fluid sizing, RTL, and accessibility.

Design TokensThe single source of truth for every visual decision — colors, spacing, typography, motion, and effects, layered for multi-brand and multi-theme builds.
Color SystemA three-layer architecture from primitive scales to semantic context palettes to body variables, designed to retheme cleanly across light and dark modes.
Context ClassThe `.context` class is how Chassis applies a color palette to a component — re-aiming CSS variables so a single class change retints an entire subtree.
Component AnatomyHow components are built — token-fed CSS variables, placeholder extends, a small set of mixins, and the patterns Chassis uses for its own classes.
Box ModelThe global `border-box` reset plus stroke exclusion, the small padding adjustment that keeps Chassis components pixel-perfect against Figma regardless of border width.
Line HeightsPer-size line-height tokens — set by designers, not derived from a ratio — so headings and body text both feel right and align with Figma.
Fluid SizingHow Chassis scales typography and spacing fluidly between a minimum and maximum viewport width, without breakpoints.
RTLRight-to-left support via CSS logical properties — set dir="rtl" on your HTML element and Chassis adapts automatically.
AccessibilityHow Chassis approaches accessibility — context palettes designed for contrast, reduced-motion support, and the `.visually-hidden` utilities.

What's in this section

Chassis CSS is built on a few architectural ideas that show up in every component, utility, and customization path. The pages in this section explain what those ideas are, how they fit together, and how to apply them to your own work.

You don't need to read these pages to use Chassis — the components and utilities work fine without any of it. You'll want to read them when you start customizing, theming, or extending Chassis, because every customization surface — Sass variables, CSS custom properties, contexts, mixins — bottoms out in one of these concepts.

Where to start

The pages have a natural reading order. Earlier pages set up vocabulary the later ones rely on:

  1. Design Tokens — the foundation. Tokens hold every value Chassis uses, organized in layers (metric, brand, theme, app, effect, motion). Every CSS variable in Chassis comes from one.
  2. Color System — how the largest token category is structured. Three layers: primitive scales, semantic context palettes, and the body variables that components consume.
  3. Context Class — how that color architecture surfaces in markup. .context primary re-aims the body variables and any nested component picks up the new palette automatically.
  4. Component Anatomy — how all of the above composes inside a component. Walks through .notification and .list-action as worked examples and lists the placeholders and mixins available for your own work.
  5. Box Model and Line Heights — smaller, cross-cutting concerns. Stroke exclusion keeps padding pixel-aligned with Figma; per-size line-height tokens keep type rhythm correct at every size. Both can be read independently of the rest.
  6. Fluid Sizing — how Chassis scales typography and spacing fluidly with the viewport.
  7. RTL — right-to-left support via CSS logical properties.
  8. Accessibility — how Chassis approaches accessibility, including context palettes designed for contrast, reduced-motion support, and the .visually-hidden utilities.

If you're customizing existing components, the first three are the most useful. If you're writing your own components, work through the first five in order. Fluid Sizing, RTL, and Accessibility are standalone reference pages — read them when the topic applies.

How it fits together

The core architecture composes into a single data flow:

PLAINTEXT
Chassis Tokens  →  CSS variables  →  Context palettes  →  Body variables  →  Components
   (Figma)         (--cx-*-{step})    (--cx-{ctx}-{tok})    (--cx-{tok})       (.button, .notification, …)

A token authored in Figma surfaces as a --cx-* custom property. Color tokens additionally surface as palettes — one per context color — that the .context class can switch between. The active palette's tokens are aliased onto the canonical body variables (--cx-fg-main, --cx-bg-main, …) that components actually read. Components declare component-scoped variables (--cx-button-padding-y, …) and alias them onto those canonical names, giving consumers two override surfaces — one per component, one per element — without any extra source code.

Every customization mechanism in Chassis hooks into this flow at one of those points. Theming swaps tokens. Switching context re-aims the palette layer. Overriding a component CSS variable replaces a single value at the leaf. The pages that follow explain each layer in detail.