Dispersa

Why Dispersa?

DTCG 2025.10

Full support for the stable Design Tokens specification — resolver documents, sets, modifiers, and all token types.

6 Output Formats

CSS custom properties, JSON, JS/TS modules, Tailwind CSS v4, Swift/SwiftUI, and Kotlin/Jetpack Compose — all built in.

Extensible Pipeline

Custom preprocessors, filters, transforms, and renderers. Build exactly the output your platform needs.

In-Memory Mode

Run without the filesystem for build tools, APIs, testing, and serverless environments.

How It Works

Dispersa processes tokens through a pipeline:

Resolve → Preprocess → Parse → Global Filter → Global Transform → Filter → Transform → Render

1Resolve2Preprocess3Parse4Global Filter5Global Transform

6Filter6Filter6Filter6Filter7Transform7Transform7Transform7Transform8Render8Render8Render8RenderCSSJSONJS...

Resolve

Loads the DTCG resolver document, merges sets in order, and applies modifier contexts (themes, platforms, densities) to produce the raw token tree for each permutation.

Input:Resolver document + modifier inputs

Output:Raw token tree per permutation

Define your tokens in DTCG format, configure a resolver document with sets and modifiers, then build output for every platform from a single source of truth.

import { Dispersa, css } from 'dispersa'
import { colorToHex, nameKebabCase } from 'dispersa/transforms'

const dispersa = new Dispersa({
  resolver: './tokens.resolver.json',
  buildPath: './dist',
})

await dispersa.build({
  outputs: [
    css({
      name: 'css',
      file: 'tokens.css',
      preset: 'bundle',
      transforms: [nameKebabCase(), colorToHex()],
    }),
  ],
})

Explore the Docs

Understanding Design Tokens New to tokens? Learn the DTCG standard from the ground up.

Getting Started Install Dispersa and build your first output in minutes.

Output Formats CSS, JSON, JS, Tailwind, iOS, and Android -- all from one source.