skills.rest
dtsong
dtsongCOMMUNITY
Explore all skills by this author →
GitHub

Design System Architecture

Define primitive, semantic, and component tokens with theming for web, iOS, and Android.

1|1|Updated Feb 21, 2026
Search Tags:#theming#design system#style guide#component library#design tokens#cross-platform
One-click install
npx skills add https://github.com/dtsong/claude-code-windows-setup --skill design-system-architecture-dtsong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Architecture
Source: https://github.com/dtsong/claude-code-windows-setup/tree/main/skills/council/artisan/design-system-architecture
Command: npx skills add https://github.com/dtsong/claude-code-windows-setup --skill design-system-architecture-dtsong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating and maintaining a consistent visual language across multiple platforms and products by establishing a robust, token-based design system architecture.

Core Features & Use Cases

  • Token Hierarchy: Defines primitive, semantic, and component tokens for a structured approach.
  • Theming Strategy: Enables easy implementation of light/dark modes and other theme variations.
  • Cross-Platform Consistency: Provides a plan for consistent application across web, iOS, and Android.
  • Use Case: A product team needs to ensure their web and mobile applications share a unified look and feel, including consistent colors, spacing, and typography, while also supporting a dark mode.

Quick Start

Design a token-based design system architecture for a new web application with dark mode support.

Frequently Asked Questions about Design System Architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is a token-based design system architecture?▼

A token-based design system architecture structures design decisions into primitive, semantic, and component tokens to maintain visual consistency. It defines color palettes, spacing scales, and typography, enabling scalable and maintainable theming across products.

How do I build a design system that works across web, iOS, and Android?▼

To build a cross-platform design system, define a structured theming strategy with primitive and semantic tokens. This approach translates foundational design decisions into consistent visual outputs across web, iOS, and Android applications.

How do you structure design tokens for light and dark mode theming?▼

Design tokens for light and dark mode theming are structured hierarchically. Primitive tokens define raw values, semantic tokens reference primitives to define purpose, and component tokens apply semantic tokens, allowing seamless theme overrides.

When do I need semantic and component design tokens?▼

You need semantic and component design tokens when scaling a product across multiple platforms. Semantic tokens abstract raw values for purpose, while component tokens encapsulate specific UI element styles, ensuring maintainable cross-platform consistency.

What is the best way to scale a component library across multiple platforms?▼

The best way to scale a component library across multiple platforms is implementing a hierarchical token architecture. Defining primitive, semantic, and component tokens creates a unified visual language that is highly maintainable and scalable.

Can I use design tokens to define spacing scales and typography?▼

Yes, design tokens are used to define spacing scales and typography. By capturing these foundational design decisions as structured tokens, you establish a scalable architecture that ensures consistent application across web and mobile interfaces.

Related Skills

Explore More Design & Creative Skills→
stribusstribus
1

reversa-design-system

Extract and normalize design tokens from CSS and theme files into structured documentation.

Community
Intermediate
timequitytimequity
6

mobile-ui

Automate mobile UI interactions for React Native apps with animations and gestures.

Official
Intermediate
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced
masermediagroup-stackmasermediagroup-stack
1

theming-components

Centralize design tokens for color, typography, spacing, and themes.

Community
Advanced