design-system-tokens

Featured

Design token management with the W3C Design Token spec, three-tier hierarchy (global/alias/component), OKLCH color, Style Dictionary transforms, and dark mode theming. Use when creating token files, implementing theme systems, or building design-to-code pipelines.

AI & Automation 229 stars 25 forks Updated today MIT

Install

View on GitHub

Quality Score: 89/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# 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`): ```j...

Details

Author: yonatangross
Repository: yonatangross/orchestkit
Created: 8 months ago
Last Updated: today
Language: TypeScript
License: MIT

Integrates with

Anthropic · AI LangChain · AI Shopify · Commerce FastAPI · Backend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

1,021 Updated 2 weeks ago

plugin87

Web & Frontend Listed

design-tokens

0 Updated 2 days ago

screamyx

Web & Frontend Listed

design-tokens

Encode approved visual and interaction decisions as DTCG-compatible primitive, semantic, component, theme, layout, density, motion, and agentic-state tokens. Use after a visual thesis exists or when evolving an established token system across web and mobile.

1 Updated today

Gaurav890