skills.rest
100Thieves-team
100Thieves-teamOFFICIAL
Explore all skills by this author →
GitHub

design-token

Define and organize design tokens with naming conventions and tiered taxonomy.

Updated Jul 4, 2026
Search Tags:#typography#theming#design system#color palette#design tokens#naming convention#spacing scale
One-click install
npx skills add https://github.com/100Thieves-team/plady-expert-skills --skill design-token-100thieves-team
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token
Source: https://github.com/100Thieves-team/plady-expert-skills/tree/main/.claude/skills/design-token
Command: npx skills add https://github.com/100Thieves-team/plady-expert-skills --skill design-token-100thieves-team

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design teams struggle to keep colors, spacing, typography, and elevation consistent across platforms and components. This Skill provides a structured methodology for defining, naming, and documenting design tokens so visual decisions stay consistent and themeable. ## Core Features & Use Cases - Token Taxonomy Guidance: Covers color, spacing, typography, elevation, border, and motion token categories with concrete scale examples. - Three-Tier Architecture: Organizes tokens into global raw values, semantic alias tokens, and component-scoped tokens. - Naming Convention: Applies the {category}-{property}-{variant}-{state} pattern for predictable, scalable token names. - Use Case: When building a design system, use this Skill to define a spacing scale from a 4px base unit, create semantic aliases like color-action-primary, and document each token's usage context for developers. ## Quick Start Ask the AI to define a design token system for your product, including a color palette with alias tokens and a spacing scale based on an 8px base unit.

Frequently Asked Questions about design-token

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

FAQPage Schema
How do I structure design tokens for a design system?▼

Structure design tokens in three tiers: global tokens holding raw values like blue-500: #3B82F6, alias tokens with semantic names like color-action-primary, and component tokens scoped to specific elements like button-color-primary.

What naming convention should design tokens follow?▼

Use the pattern {category}-{property}-{variant}-{state} for token names. This creates predictable, hierarchical names that scale as the design system grows and make each token's purpose clear from its name.

What categories of design tokens exist?▼

Design tokens cover color, spacing, typography, elevation, border, and motion. Spacing uses a 4px or 8px base unit with scales from xs to 3xl, while motion tokens define duration scales and easing functions.

Should components reference raw color values directly?▼

No, components should never reference raw values directly. Always route through semantic alias tokens so theming works by swapping alias definitions while keeping component tokens abstract and stable.

How do design tokens support theming?▼

Theming works by keeping alias tokens abstract and swapping their underlying global value references per theme. Document each token with usage context and version tokens alongside the design system to manage theme changes safely.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
Pixel-Process-UGPixel-Process-UG
1

ui-design-system

Create scalable design systems with token-first architecture and Tailwind CSS v4.

Official
Advanced
tan-yong-shengtan-yong-sheng
72

visual-consistency-validation

Analyzes design tokens and UI components across breakpoints and color modes to identify visual inconsistencies.

Community
Advanced
Purple-GroupPurple-Group

tailwind-patterns

Configure Tailwind v4 CSS-first design tokens and container queries.

Official
Advanced