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.

Web & Frontend 179 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 86/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: 5 months ago
Last Updated: today
Language: TypeScript
License: MIT

Integrates with

LangChain · AI Shopify · Commerce FastAPI · Backend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

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.

35 Updated today

laurigates

AI & Automation Listed

design-tokens

Generate design token systems exportable to CSS variables, Tailwind config, JSON, and Style Dictionary — covering colour, typography, spacing, radius, shadow, and motion

3 Updated 4 days ago

anthril

Web & Frontend Listed

ckmdesign-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 2 days ago

SanctifiedOps

Web & Frontend Solid

ckmdesign-system

85,227 Updated 1 months ago

nextlevelbuilder

Web & Frontend Listed

theming-components

Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.

368 Updated 5 months ago

ancoleman