Chassis is the backbone of scalable design systems built for complex, evolving product ecosystems. It unifies Figma components, advanced design tokens, multi-platform transformers, asset libraries, and a fully token-synced CSS framework — all working in harmony across brands, platforms, and products.
Whether you're shipping a client-facing app, operational tool, or internal dashboard, Chassis helps you centralize and scale design decisions.
Design tokens can be modded per brand, app, or platform — enabling a multi-brand, multi-platform system from a single source of truth.
Extend your design system across different brand identities without redundant investment in component rebuilding.
Deploy uniform design principles to web, mobile, and desktop with platform-appropriate expressions.
Eliminate costly handoff delays between design and development teams through a shared, automated design language.
// JSON
// tokens/figma/brandA-appA.json
{
"color": {
"button": {
"primary": {
"bg-hover": {
"$type": "color",
"$value": "{color.context.primary.bg-hover}"
}
}
}
}
}
Each component file has a documentation page provides comprehensive information on variants, properties, specifications, and design tokens. Empower product managers, design leads, and engineering teams to enhance projects with clarity and confidence.
Chassis creates distinct color tokens linked to essential UI elements—text, backgrounds, icons, and indicators. With multiple emphasis levels, it ensures a cohesive and visually appealing design across all components, making it easier for product managers, design leads, and engineering teams to enhance their projects.
Each component file has a documentation page provides comprehensive information on variants, properties, specifications, and design tokens. Empower product managers, design leads, and engineering teams to enhance projects with clarity and confidence.
Chassis brings a modular, token-first approach to designing in Figma — built to scale and adapt over time. Every component is powered by tokens for color, spacing, typography, and sizing, ensuring future-proof flexibility across brands and platforms.
Semantic color roles allow every brand or app persona to express identity without breaking component structure.
Typography definitions for key UI elements using consistent tokens. Each font size comes with a specified line height.
Granular tokens for sizing, spacing, and borders ensure components scale responsively and remain visually consistent.
Eliminate asset duplication and disorganization. Chassis lets you store, manage, and distribute icons, logos, fonts, and illustrations across brands and platforms with ease.
A single source of truth for all your design assets, ensuring consistency and easy access across teams.
Keep track of asset versions and updates, making it easy to manage changes over time.
Seamlessly integrate assets into web, iOS, Android, and other platforms with built-in support.
Chassis provides robust token architecture to manage themes, colors, spacing, and typography at scale. Define, transform, and sync tokens across mobile, web, embedded, and headless platforms.
Create and modify tokens at global, brand, app, and component levels.
Build tokens that reference other tokens, enabling cascading updates across your entire system.
Convert tokens automatically for different platforms while preserving relationships and hierarchy.
// dist/web/brandA-appA/tokens.scss
$cx-color-button: #000000// dist/ios/brandA-appA/tokens.swift
@objc public static let CxColorButton = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 0.9)<!-- dist/android/brandA-appA/tokens.xml -->
<color name="cx_color_button">#ffffffff</color>Chassis is designed for the real world of enterprise product development — multiple brands, diverse platforms, distributed teams, and constant evolution. Rather than assuming ideal conditions, it is built for the complexity that successful products inevitably face.
// JSON
// tokens/figma/brandA-appA.json
{
"color": {
"button": {
"primary": {
"bg-hover": {
"$type": "color",
"$value": "{color.context.primary.bg-hover}"
}
}
}
}
}