Welcome to Chassis Tokens

Overview

Chassis Tokens is a comprehensive design token system that bridges design and development workflows. It provides a scalable, multi-brand, and multi-platform approach to managing design tokens from creation in Figma to implementation in production code.

Built on industry-leading tools like Tokens Studio and Style Dictionary, Chassis Tokens enables design systems to maintain consistency across multiple brands, themes, applications, and platforms while keeping token management simple and efficient.

Multi-Brand Support

Create and manage multiple brand identities from a single token source. Each brand can have its own color palettes, typography, and styling while sharing common token architecture.

• Independent brand definitions
• Automatic propagation of brand changes
• Easy brand switching in both design and code

Theme Variations

Support multiple color modes (light, dark, high contrast) that work independently from brand selection. Theme switching is seamless in both Figma and production applications.

• Light and dark mode support
• Custom theme variations (e.g., seasonal, promotional)
• Runtime theme switching capability

Scalable Architecture

The three-layer architecture (Brand, Theme, App) provides maximum flexibility with minimal duplication. Add new brands, themes, or applications without exponential file growth.

• Separation of concerns
• Clear token hierarchy
• Reference-based token system

Platform Flexibility

Generate platform-specific token outputs for web, iOS, and Android from a single source of truth. Each platform gets optimized token formats that follow native conventions.

• Web: SCSS variables, CSS custom properties, JavaScript objects
• iOS: Swift classes with native UIKit types
• Android: XML resource files with proper units

How It Works

Chassis Tokens follows a two-stage workflow that separates design token management from code generation:

Token Management

Tokens Studio serves as the design token creation and management layer:

1. Define Tokens: Create token files organized by category (brand, theme, app)
2. Store in Git: Version control tokens in a Git repository
3. Sync to Figma: Apply tokens directly in Figma as Variables
4. Manage Themes: Configure theme groups and options for different variations

Tokens Studio enables designers to work with tokens directly in Figma while maintaining a Git-based source of truth for collaboration and version control.

Code Generation

Style Dictionary transforms design tokens into platform-specific code:

1. Read Tokens: Load token definitions from JSON files
2. Apply Transforms: Convert values to platform-specific formats (px, rem, dp, etc.)
3. Filter Output: Generate separate files for colors, sizes, and other token types
4. Generate Code: Create SCSS, Swift, XML, and other platform files

Style Dictionary runs as a build step, generating production-ready token files that developers can import directly into their applications.

Theming Architecture

Chassis Tokens uses a three-layer architecture that provides independent control over brand identity, color modes, and platform-specific tokens:

Brand Identity Layer

Contains foundational tokens that define brand visual identity:

• Color palettes for all theme modes
• Typography families and weights
• Border radius styles
• Brand-specific styling decisions

Changes when: Switching between different brands or sub-brands
Independent from: Color mode (light/dark) and platform (web/mobile)

Color Theme Layer

Contains color mode variations that work across all brands:

• Light mode colors
• Dark mode colors
• High contrast modes
• Seasonal or promotional themes

Changes when: User switches color preference or accessibility mode
Independent from: Brand identity and platform

Application Style Layer

Contains platform and component-specific tokens:

• Component color assignments
• Sizing and spacing
• Typography applications
• Shadow and effect styles
• Platform-specific variations

Changes when: Building for different platforms, contexts or personas (e.g., web vs mobile or rider vs driver)
Independent from: Brand and color mode selections

This separation allows any combination of brand, theme, and platform to work together seamlessly. For example, "Brand A" in "Dark Mode" on "iOS" requires no special configuration—the tokens automatically combine correctly.

Built for Your Team

Chassis Tokens is designed to streamline collaboration between designers, developers, and design system maintainers. Each role benefits from specific features:

Designers

Designers can create and manage tokens directly in Figma using Tokens Studio plugin. The multi-file architecture allows for clear organization of tokens by brand, theme, and application.

• Create and manage design tokens in Tokens Studio
• Apply tokens in Figma using Variables
• Switch between brands and themes directly in Figma
• Maintain consistency across design files

Start with the Tokens Studio guide to learn how to set up your token management workflow.

Developers

Developers can run the build process to generate platform-specific token files that can be imported directly into applications. The generated code follows native conventions for each platform.

• Import generated token files into applications
• Use platform-native formats (SCSS, Swift, XML)
• Implement theme switching at runtime
• Build components with token-based styling

Start with the Style Dictionary guide to learn how to set up your build process and integrate tokens into your projects.

Maintainers

Design system maintainers can manage the overall token architecture, review changes, and ensure consistency across brands and themes. The Git-based workflow allows for version control and collaboration.

• Manage token definitions in Git
• Review and approve token changes via pull requests
• Run builds to generate platform-specific outputs
• Document token usage and conventions

Support and Resources

Find help, learn from documentation, and connect with the community to get the most out of Chassis Tokens.

Documentation

Explore comprehensive guides and references to help you work with Chassis Tokens:

• Quick Start: Step-by-step setup instructions for designers and developers
• Token Management: How to create and manage tokens with Tokens Studio
• Code Generation: How to build platform-specific token files with Style Dictionary
• Figma Variables: How to sync tokens to Figma and apply them as Variables

External Resources

Learn from the official documentation of the tools that power Chassis Tokens:

• Tokens Studio Documentation
• Style Dictionary Documentation
• Figma Variables Guide

Community

Connect with other users and contribute to the project:

• GitHub Issues: Report bugs or request features
• Discussions: Ask questions and share knowledge
• Contributing: Help improve Chassis Tokens