CHASSIS ASSETS
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.gitCurrently v0.1.5 · Changes
Processes source assets into platform-specific distributions using a build script. Supports multiple brands and apps from one repository with override-based architecture.
Transforms filenames to kebab-case for web, snake_case for mobile. Handles @2x/@3x resolution variants. Organizes Android drawables by density automatically.
Define default assets once. Override specific files per brand using folder structure. Build system merges defaults with brand-specific assets automatically.
Single source generates three platform-specific distributions. WOFF2 fonts for web, TTF/OTF for mobile. SVG preserved, raster images processed per platform conventions.
Asset processing automation for multi-brand products. Handles the transformation pipeline from design tools to platform-ready code.
Source folder structure defines brand hierarchy: default/ for shared assets, brand-name/ for overrides. Build script merges layers automatically based on CLI flags.
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.
Detects @2x and @3x suffixes in source files. Maps to iOS @2x/@3x conventions and Android density folders (hdpi, xhdpi, xxhdpi, xxxhdpi) automatically.
Web build: WOFF2 fonts only. Mobile builds: TTF/OTF fonts only. Configurable extension filters prevent unsupported formats from reaching wrong platforms.
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.
Validates output structure after builds. Detects missing files, duplicate filenames after transformation, and unsupported file types. Provides file size analysis.
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.
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.svgExecute 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
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