Project Structure

Basic Project

A minimal setup with core tokens and CSS output:

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

Themed Project

Use modifiers for light/dark themes and other contextual variants:

my-project/
├── tokens/
│   ├── base/
│   │   ├── colors.json
│   │   ├── spacing.json
│   │   └── typography.json
│   ├── semantic/
│   │   └── aliases.json
│   └── themes/
│       ├── light.json
│       └── dark.json
├── tokens.resolver.json
└── dist/

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

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.