Foundations

Token Pipeline

Scaffolded

Tokens are authored once in platform-agnostic W3C Design Tokens (DTCG) JSON, and transformed by Style Dictionary into every consumer format. CSS variables in the web app are one of many outputs — not the source of truth.

Architecture

The pipeline lives in the tokens/ folder at the repo root. Sources follow a three-tier model:

Core (primitives) — raw color scales, spacing ramp, type scale, radii, elevation, motion.
Semantic — purpose tokens (color.accent, surface.default) that reference core.
Brand — per-brand overrides of semantic tokens and print equivalents (CMYK, Pantone).

Outputs

Platform	Output	Consumer
Web	tokens/build/web/tokens.css	Imported by src/styles/theme.css
RN / JS	tokens/build/js/tokens.{js,d.ts}	React Native components, NativeWind preset
iOS	tokens/build/ios/Tokens.swift + .json	Xcode project, SwiftUI
Android	tokens/build/android/{colors.xml, dimens.xml, Tokens.kt}	Compose + classic Views
Windows	tokens/build/windows/Tokens.xaml	WinUI 3 ResourceDictionary
Print	tokens/build/print/tokens-print.json	InDesign / Illustrator swatch import
Motion	tokens/build/motion/motion.json	Lottie / Reanimated preset

Authoring a token (W3C DTCG)

// tokens/src/core/color.json
{
  "color": {
    "navy": {
      "900": {
        "$value": "#194A8D",
        "$type": "color",
        "$description": "TpGROUP brand primary — CMYK 94/70/8/0, Pantone 2935 C"
      }
    }
  }
}

// tokens/src/semantic/semantic.json
{
  "semantic": {
    "color": {
      "accent": { "$value": "{color.navy.900}", "$type": "color" }
    }
  }
}

Build

# From the repo root:
pnpm --filter @tpisent/tokens install
pnpm --filter @tpisent/tokens build       # all platforms
pnpm --filter @tpisent/tokens build:web   # CSS only (fast dev)
pnpm --filter @tpisent/tokens build:ios   # Swift + JSON
# ... etc