Skip to main content

CHASSIS CSS

Token-Driven CSS Framework for Multi-Brand Design Systems

Complete CSS framework built on Chassis Tokens. Automatic Figma Variable sync, responsive grid system, 50+ accessible components, and utilities for rapid development across multiple brands and themes.

git clone git@github.com:chassis-ui/css.git

Currently v0.2.3 · Changes


Built for teams managing design systems at scale.

Chassis CSS gives your team a production-ready foundation for building consistent, accessible interfaces across brands and products with less code and better performance.

Token-Driven Architecture

Direct integration with Chassis Tokens and Figma Variables ensures that any changes to colors, typography, spacing, and design decisions are automatically applied throughout the entire system.

Perfect Figma Alignment

CSS class names and variable names match exactly what you see in Figma. Inspect Figma design and know precisely which CSS classes to use—no guessing, no translation layer.

Extreme Theming Capabilities

Built-in support for multiple brand identities and themes with CSS custom properties. Features automatic dark mode, RTL layout support, and runtime theme customization.

Enterprise-Grade Features

A comprehensive CSS framework with components, utilities, and layout systems designed for large-scale applications and multi-brand design systems.

Option to Exclude Strokes

Chassis CSS components subtract border values from padding to ensure the UI matches the pixel-perfect look of Figma designs.

Responsive Font Sizes

Chassis CSS automatically adjust text size based on the screen size, providing a consistent and accessible user experience.

Comprehensive Components

Buttons, cards, modals, navigation, forms, and more. Battle-tested components ready for production with full customization.

Powerful Grid System

Flexible 12-column grid with responsive breakpoints. Build any layout with gap utilities, auto-layout, and nested grids.

Utility-First Approach

Hundreds of utility classes for spacing, typography, colors, and more. Build custom designs without writing CSS.

Accessibility Built-In

WCAG AA compliant components with proper ARIA attributes, keyboard navigation, and focus management out of the box.

Implementation Overview

Follow a simple three-step process that connects design tokens to production-ready CSS components with full theme support.

Install & Configure

Install via npm or CDN. Configure your brand tokens and theme settings. Import the full framework import or individual components.

Build Your Interface

Use components, utilities, and grid system to build responsive layouts. Customize with SCSS variables or CSS custom properties.

Deploy & Maintain

Generate RTL variants and dark mode themes automatically. Update design tokens to propagate changes across all components and utilities.

Built on Modern Standards

Powered by industry-standard tools and methodologies, Chassis CSS integrates seamlessly with your existing stack without vendor lock-in.

SCSS

Powerful styling

PostCSS

Modern CSS processing

CSS Variables

Runtime theming

RFS

Responsive typography

How to Get Started?

Complete documentation covering installation, configuration, components, utilities, customization, and integration guides for all major frameworks and build tools.

Quick Start

Get up and running in minutes with our step-by-step guides covering installation, setup, and your first components.

Components

Browse our library of production-ready components with live examples, code snippets, and customization options.

Resources

Deep dive into utilities, layout systems, and customization options to build exactly what you need.