Skip to main content

CHASSIS ASSETS

Ship Assets to Every Brand, Every Platform

Build system for processing design assets into platform-ready distributions. Handles file naming, resolution variants, and folder structure conventions across platforms.

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

Currently v0.1.5 · Changes


What Chassis Assets Does

Processes source assets into platform-specific distributions using a build script. Supports multiple brands and apps from one repository with override-based architecture.

Automated File Processing

Transforms filenames to kebab-case for web, snake_case for mobile. Handles @2x/@3x resolution variants. Organizes Android drawables by density automatically.

Brand Override System

Define default assets once. Override specific files per brand using folder structure. Build system merges defaults with brand-specific assets automatically.

Multi-Platform Output

Single source generates three platform-specific distributions. WOFF2 fonts for web, TTF/OTF for mobile. SVG preserved, raster images processed per platform conventions.

Built for Production at Scale

Asset processing automation for multi-brand products. Handles the transformation pipeline from design tools to platform-ready code.

Multi-Brand Architecture

Source folder structure defines brand hierarchy: default/ for shared assets, brand-name/ for overrides. Build script merges layers automatically based on CLI flags.

Platform-Specific Transforms

Applies naming conventions per platform: kebab-case with hyphens for web, snake_case with underscores for mobile. iOS outputs flat structure, Android uses drawable-density folders.

Resolution Variant Handling

Detects @2x and @3x suffixes in source files. Maps to iOS @2x/@3x conventions and Android density folders (hdpi, xhdpi, xxhdpi, xxxhdpi) automatically.

Format Filtering by Platform

Web build: WOFF2 fonts only. Mobile builds: TTF/OTF fonts only. Configurable extension filters prevent unsupported formats from reaching wrong platforms.

CLI Build Filters

Command-line flags filter builds by brand, app, or platform. Useful for development iteration and CI/CD pipelines that deploy one app at a time.

Build Validation

Validates output structure after builds. Detects missing files, duplicate filenames after transformation, and unsupported file types. Provides file size analysis.

From Design to Production

Run one command to transform source assets into platform-specific distributions. The build script handles file naming, resolution variants, and folder structure for web, iOS, and Android.

Structure Source Folders

Organize assets under source/ using brand/app/type hierarchy. Files in default/ apply to all brands. Brand-specific folders override defaults when building.

source/
├── default/
│   └── demo/
│       ├── Hero Img.png
│       └── Hero Img@2x.png
├── chassis/
│   └── demo/
│       └── Brand Logo.svg
└── example/
    └── demo/
        └── Brand Logo.svg

Run Build Command

Execute pnpm assets to build all platforms, or use --brand, --app, --platform flags to filter output. Build script copies, renames, and organizes files per platform.

# Build all platforms
pnpm assets

# Build specific brand
pnpm assets --brand chassis

# Build specific app
pnpm assets --app demo

# Build with filters
pnpm assets --brand chassis --app demo

Integrate Build Output

Generated dist/ folder contains platform-specific asset bundles. Copy relevant folders into your web, iOS, or Android projects, or sync via CI/CD.

dist/
├── ios/chassis-demo/
│   ├── brand_logo.svg
│   ├── hero_img.png
│   └── hero_img@2x.png
└── android/chassis-demo/
    ├── drawable/
    │   ├── brand_logo.svg
    │   └── hero_img.png
    └── drawable_xhdpi/
        └── hero_img.png