Agent skill · design visual · yonatangross
design-system-tokens
W3C design tokens: global, alias and component tiers, OKLCH color, Style Dictionary, dark mode. Use when creating token files or theme systems.
Why this skill is useful
Provides domain-specific knowledge on design token management and implementation patterns that the AI wouldn't reliably generate on its own.
What it needs
Requires style-dictionary installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Design System Tokens Design token management following the W3C Design Token Community Group (DTCG) specification. Tokens provide a single source of truth for design decisions — colors, spacing, typography, elevation — shared between design tools (Figma, Penpot) and code (CSS, Tailwind, iOS, Android). Major adopters include Figma (Variables API), Google (Material Design 3), Microsoft (Fluent UI), and Shopify (Polaris). Quick Reference Category Rule File Impact When to Use ---------- ----------- -------- ------------- W3C Token Format tokens-w3c-format.md CRITICAL Creating or reading .tokens.json files Contrast Enforcement tokens-contrast-enforcement.md CRITICAL Validating WCAG contrast at token definition time Three-Tier Hierarchy tokens-three-tier.md HIGH Organizing tokens into global/alias/component layers OKLCH Color Space tokens-oklch-color.md HIGH Defining colors with perceptual uniformity Spacing & Depth tokens-spacing-depth.md HIGH Defining elevation shadows and spacing scales as tokens Style Dictionary tokens-style-dictionary.md HIGH Transforming tokens to CSS/Tailwind/iOS/Android Theming & Dark Mode tokens-theming-darkmode.md HIGH Implementing theme switching and dark mode Versioning tokens-versioning.md HIGH Evolving tokens without breaking consumers Total: 8 rules across 8 categories Quick Start W3C DTCG token format (.tokens.json): Three-Tier Token Hierarchy Tokens are organized in three layers — each referencing the layer below: Tier Purpose Example ------ --------- --------- Global Raw values color.blue.500 = oklch(0.55 0.18 250) Alias Semantic meaning color.primary = {color.blue.500} Component Scoped usage button.bg = {color.primary} This separation enables theme switching (swap alias mappings) without touching component tokens. OKLCH Color Space OKLCH (Oklab Lightness, Chroma, Hue) provides perceptual uniformity — equal numeric changes produce equal visual changes. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/design-system-tokens