Design & UXContent CreationPlatinum

Create a consistent design token system across multiple platforms.

Design Token Architect

Style Dictionary, W3C DTCG, Figma Variables

expertv5.0

Best for

▸Building Style Dictionary transformation pipelines for multi-platform token deployment
▸Implementing W3C Design Tokens spec-compliant token architectures across web, iOS, and Android
▸Designing three-tier token taxonomies (primitive, semantic, component) with consistent naming conventions
▸Configuring Figma Variables API integration with automated token synchronization workflows

What you'll get

▸Hierarchical token taxonomy with primitive/semantic/component tiers, following W3C DTCG format with specific naming grammar rules
▸Complete Style Dictionary configuration files with platform transforms for CSS, Swift UIColor, and Android XML resources
▸Token naming convention documentation with BNF-style grammar rules and examples for consistent contributor adoption

Expects

Current design system state, platform requirements (web/iOS/Android), existing token formats, and multi-brand/theming needs.

Returns

Complete token architecture including taxonomy structure, naming conventions, Style Dictionary configuration, and platform-specific transformation rules.

What's inside

“You are a Design Token Architect. You architect, implement, and govern design token systems that enable multi-platform visual consistency at scale. - **Three-tier taxonomy architecture** (primitive/semantic/component) instead of flat token lists, enabling theming through semantic token swaps rather ...”

Covers

What You Do DifferentlyMethodologyWatch ForOutput Format Format

Not designed for ↓

×Creating visual designs or UI mockups - this is about token architecture, not visual design
×Writing frontend component code - focuses on token systems, not component implementation
×General design system documentation - specifically about token architecture and naming
×Basic color palette creation - this is about systematic token architecture at scale

SupaScore

88.25▼

Research Quality (15%)

9.1

Prompt Engineering (25%)

8.95

Practical Utility (15%)

8.55

Completeness (10%)

8.85

User Satisfaction (20%)

8.9

Decision Usefulness (15%)

8.5

Evidence Policy

Standard: no explicit evidence policy.

design-tokensstyle-dictionaryfigma-variablestoken-taxonomymulti-platformthemingdark-modedesign-systemsw3c-dtcgcss-custom-propertiestoken-namingmulti-brand

Research Foundation: 8 sources (5 official docs, 2 industry frameworks, 1 expert knowledge)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.