design-system-tokens

Solid

Design token management with W3C Design Token Community Group specification, three-tier token hierarchy (global/alias/component), OKLCH color spaces, Style Dictionary transformation, and dark mode theming. Use when creating design token files, implementing theme systems, managing token versioning, or building design-to-code pipelines.

AI & Automation 208 stars 20 forks Updated today MIT

Install

View on GitHub

Quality Score: 88/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: 6 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 Listed

design-tokens-pipeline

The single source of truth for design values — author tokens in W3C DTCG format, build them through Style Dictionary into CSS custom properties, and consume them 1:1 in Tailwind v4's @theme. Use when setting up a token system, naming or aliasing tokens, wiring a Figma/Penpot export into code, or deciding where a color/spacing/type value should live. Triggers on "design tokens", "DTCG", "Style Dictionary", "@theme", "token pipeline", "where does this color come from".

0 Updated 2 days ago

BenMacDeezy

Web & Frontend Solid

design-system

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

0 Updated 4 days ago

kterfan

Web & Frontend Solid

design-tokens

Design tokens and CSS custom properties: theme systems, dark mode, component libraries. Use when implementing design systems or user mentions tokens, CSS variables, or theming.

48 Updated today

laurigates