Project Structure

Basic Project

A minimal setup with core tokens and CSS output:

my-project/
├── tokens/
│   ├── colors.json
│   ├── spacing.json
│   ├── typography.json
│   └── effects.json
├── tokens.resolver.json
├── dispersa.config.ts        # if using CLI
├── build-tokens.ts           # if using API directly
└── dist/                     # generated output
    └── tokens.css

Themed Project

For projects with light/dark themes and semantic aliases, the TypeScript Starter scaffold uses base/, alias/, and themes/ subdirectories. Run pnpm create dispersa and choose the TypeScript template to get this layout pre-configured.

Multi-Platform Project

Output to multiple targets from a single token source:

my-project/
├── tokens/
│   └── ...
├── tokens.resolver.json
└── dist/
    ├── web/
    │   └── tokens.css
    ├── tailwind/
    │   └── theme.css
    ├── ios/
    │   └── DesignTokens.swift
    └── android/
        └── DesignTokens.kt

Tips

• Keep token files small and focused — One concern per file (colors, spacing, typography)
• Use semantic aliases — Decouple consumer-facing names from base values for easier theming and maintenance

Core Concepts — The Pipeline Understand how resolution, transforms, and rendering work together.

Guides — Multi-Platform Tokens Build tokens for web, iOS, Android, and Tailwind from one source.