Skill Guide

Design token architecture and multi-platform theming

Design token architecture is the systematic process of defining, managing, and distributing platform-agnostic style values (color, spacing, typography) as a single source of truth, enabling consistent multi-platform theming.

It drastically reduces design-development debt and accelerates UI iteration by enforcing consistency across web, iOS, Android, and other platforms from a single codebase. This directly impacts time-to-market and brand cohesion, making it a high-leverage investment for any product organization.

1 Careers

1 Categories

9.0 Avg Demand

15% Avg AI Risk

How to Learn Design token architecture and multi-platform theming

1. Master the core concept: Tokens are named, platform-agnostic values (e.g., 'color-primary' instead of '#007AFF'). 2. Understand the three-tier token structure: Primitive (raw values), Semantic (purpose-based aliases), and Component/Component-level tokens. 3. Use a static site generator like Style Dictionary to transform JSON tokens into CSS, iOS, and Android files.

1. Transition from a flat file to a structured token schema using JSON/YAML, organizing by category (color, spacing) and state (hover, active). 2. Implement theming by creating multiple semantic token files (light.json, dark.json) that reference the same primitive values. 3. Avoid the pitfall of hard-coding platform-specific values; always alias through semantic tokens.

1. Architect a token pipeline integrated into CI/CD, where token changes are versioned, tested for accessibility contrast ratios, and automatically deployed to design tools (Figma) and code repositories. 2. Design a token governance model for a large organization, defining ownership, change request workflows, and deprecation strategies. 3. Mentor design and engineering teams on token-first design thinking, aligning token systems with product roadmaps and A/B testing capabilities.

Practice Projects

Beginner

Project

Build a Basic Style Dictionary Pipeline

Scenario

You need to create a single source of truth for a simple app's colors and spacing that outputs to CSS custom properties and Swift code.

How to Execute

1. Create a `tokens` folder with a `color.json` file defining primitive tokens (e.g., `{"color": {"blue": {"500": {"value": "#007AFF"}}}}`). 2. Create a `config.json` for Style Dictionary defining transforms (e.g., `['attribute/cti', 'color/css']`) and platforms (`css`, `ios`). 3. Run `style-dictionary build` and inspect the generated `variables.css` and `StyleDictionaryColor.swift` files. 4. Modify a token value in JSON and rebuild to see the change propagate.

Intermediate

Project

Implement a Multi-Theme System

Scenario

Your product requires light and dark themes, plus a high-contrast accessibility theme, managed from one token source.

How to Execute

1. Define a `primitive.json` file with raw color values. 2. Create three semantic files: `light.json`, `dark.json`, `high-contrast.json`. Each maps semantic names (e.g., `color.background.primary`) to different primitives. 3. Configure Style Dictionary to build three separate output sets (e.g., `theme-light.css`, `theme-dark.css`). 4. In your web app, use CSS custom properties and toggle them via a class on `` or a media query. Test by switching themes at runtime.

Advanced

Project

Design a Token Governance and CI/CD Pipeline

Scenario

You are the lead architect for a design system serving 10 product teams. You need to enforce quality, manage breaking changes, and automate deployment.

How to Execute

1. Define a JSON Schema for token validation (enforce naming conventions, required fields). 2. Set up a Git repository with branch protection; token changes require a PR with a linked Figma change and approval from the design system team. 3. Create a CI pipeline (GitHub Actions) that: validates token JSON against the schema, runs accessibility contrast checks, builds all platform outputs, and publishes a versioned npm package for developers. 4. Implement a deprecation workflow where obsolete tokens are marked and generate console warnings.

Tools & Frameworks

Software & Platforms

Style Dictionary (Amazon)Theo (Salesforce)Token Studio (Figma plugin)Tokens in Figma (native variables)

Use Style Dictionary as the industry-standard transform and build engine. Token Studio allows designers to author tokens directly in Figma with sync to JSON. Native Figma variables are for design-only workflows or simple handoff.

Technical Specifications & Formats

W3C Design Tokens Community Group FormatJSONYAMLCSS Custom PropertiesSwiftUI/Android Kotlin Resource Files

Adhere to the emerging W3C standard for interoperability. JSON/YAML are the source formats. The build targets are platform-specific files like CSS variables, SwiftUI Color/Font extensions, and Android `colors.xml`.

Mental Models & Methodologies

Atomic Design (token mapping to atoms/molecules)Single Responsibility Principle (for token files)Semantic Versioning (for token packages)

Map tokens to Atomic Design levels for clarity. Apply SRP so each token file has one clear purpose (e.g., primitive colors vs. component spacing). Use semver to communicate breaking changes to consuming teams.

Interview Questions

Answer Strategy

The candidate must demonstrate a layered, scalable approach. They should describe a three-tier model (primitive → semantic → component) and explain how theming and branding are achieved by swapping semantic layers, not primitives. A strong answer will mention build pipelines (Style Dictionary) and versioning.

Answer Strategy

This tests system thinking and stakeholder management. The strategy is to evaluate the request against the token system's principles: reusability, scalability, and clarity. A good answer would involve checking if the color is a one-off or a new pattern, consulting the design system's governance rules, and making a decision that either adds a new semantic token (if it's a new reusable pattern) or enforces the use of an existing modifier (if it's a variant).