Multi-Platform Tokens

The Scenario

One token source → CSS + Tailwind + Swift + Kotlin. Dispersa lets you maintain a single design token system and output to every platform your product supports.

Create Token Files

Create your token files in DTCG format. See Getting Started for the basics. You need at least:

Core tokens (colors, spacing, typography)
A resolver document that defines sets and modifiers

Create a Resolver with Theme Modifier

Your resolver should define a theme modifier for light/dark contexts so each platform can consume theme-aware tokens:

{
  "version": "2025.10",
  "sets": {
    "base": { "sources": [{ "$ref": "./tokens/base.json" }] }
  },
  "modifiers": {
    "theme": {
      "default": "light",
      "contexts": {
        "light": [{ "$ref": "./tokens/theme-light.json" }],
        "dark": [{ "$ref": "./tokens/theme-dark.json" }]
      }
    }
  },
  "resolutionOrder": [
    { "$ref": "#/sets/base" },
    { "$ref": "#/modifiers/theme" }
  ]
}

Build Configuration with 4 Outputs

Configure four outputs so web gets CSS + Tailwind, iOS gets Swift, and Android gets Kotlin:

import { Dispersa, css, tailwind, ios, android } from 'dispersa'
import { colorToHex, dimensionToPx, nameKebabCase, nameCamelCase } from 'dispersa/transforms'

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

await dispersa.build({
  outputs: [
    css({
      name: 'web-css',
      file: 'web/tokens.css',
      preset: 'bundle',
      selector: (mod, ctx, isBase) => isBase ? ':root' : `[data-${mod}="${ctx}"]`,
      transforms: [nameKebabCase(), colorToHex(), dimensionToPx()],
    }),
    tailwind({
      name: 'web-tailwind',
      file: 'tailwind/theme.css',
      preset: 'bundle',
      transforms: [nameKebabCase(), colorToHex(), dimensionToPx()],
    }),
    ios({
      name: 'ios',
      file: 'ios/DesignTokens-{theme}.swift',
      preset: 'standalone',
      structure: 'enum',
      accessLevel: 'public',
      transforms: [nameCamelCase()],
    }),
    android({
      name: 'android',
      file: 'android/DesignTokens-{theme}.kt',
      preset: 'standalone',
      packageName: 'com.example.tokens',
      objectName: 'DesignTokens',
      transforms: [nameCamelCase()],
    }),
  ],
})

What Each Output Looks Like

CSS (web):

:root {
  --color-brand-primary: #3366e6;
  --spacing-medium: 16px;
}

[data-theme="dark"] {
  --color-brand-primary: #6699ff;
  --spacing-medium: 16px;
}

Swift (iOS):

public enum DesignTokens {
  public static let colorBrandPrimary = Color(.sRGB, red: 0.2, green: 0.4, blue: 0.9)
  public static let spacingMedium: CGFloat = 16
}

Kotlin (Android):

object DesignTokens {
  val colorBrandPrimary: Color = Color(0xFF3366E6.toInt())
  val spacingMedium: Dp = 16.dp
}

Theming with Modifiers Implement light/dark themes, density modes, and brand variants using DTCG modifiers.