design-system-tokens
Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines.
Design System Tokens helps you create and manage design tokens following the W3C DTCG specification with three-tier hierarchy, OKLCH colors, and theme support.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-28
Design System Tokens helps you create and manage design tokens following the W3C DTCG specification with three-tier hierarchy, OKLCH colors, and theme support. Manage design tokens using the W3C Design Token Community Group specification with a three-tier hierarchy (global, alias, component) that enables theme switching without touching component definitions. Built-in support for OKLCH color spaces ensures perceptually uniform shade scales, while Style Dictionary integration transforms tokens into CSS variables, Tailwind themes, and platform-specific outputs. Includes guidance on contrast enforcement, dark mode implementation, versioning strategies, and design-to-code pipelines.
Use it when
- design-system-tokens uses Style Dictionary integration to transform your token definitions into multiple formats: CSS variables for web.
- design-system-tokens enables dark mode through token aliasing and multi-theme systems.
Verify before relying
Read SKILL.md below before installing (15 files). Open directory: indexed for reading, not audited.
Install
yonatangross/orchestkit/design-system-tokens · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create design tokens in W3C format?
design-system-tokens follows the W3C Design Token Community Group specification with a three-tier hierarchy: global tokens define base values, alias tokens reference globals for semantic meaning, and component tokens scope styling to specific UI elements. This structure lets you define tokens once and reuse them across themes without modifying component code. The MIT-licensed toolkit includes templates and validation to ensure your token files conform to the W3C standard.
What outputs can design-system-tokens transform tokens into?
design-system-tokens uses Style Dictionary integration to transform your token definitions into multiple formats: CSS variables for web, Tailwind theme configurations, iOS platform files, and Android resources. This design-to-code pipeline eliminates manual transcription and keeps all outputs synchronized with your source tokens, supporting both light and dark themes across all target platforms.
How does design-system-tokens implement dark mode theming?
design-system-tokens enables dark mode through token aliasing and multi-theme systems. Define semantic alias tokens that reference different global tokens per theme, then switch themes by changing a CSS class or configuration flag—component definitions never change. The three-tier hierarchy makes it straightforward to maintain multiple color schemes, contrast levels, and visual treatments without code duplication.
Why use OKLCH color space for design tokens?
design-system-tokens supports OKLCH color space to generate perceptually uniform shade scales. Unlike RGB or HSL, OKLCH separates lightness from hue and chroma, so incremental lightness steps produce visually consistent color ramps. This ensures your design token shade scales feel balanced across the spectrum and maintain readability for contrast enforcement without manual tweaking.
How does design-system-tokens handle token versioning and migration?
design-system-tokens provides versioning strategies and migration guidance to evolve tokens without breaking consumer code. Track token changes, deprecate old names gradually, and use alias tokens to bridge old and new naming conventions during transitions. This approach lets design systems scale across teams and products while maintaining backward compatibility during updates.
What are semantic token naming conventions in design-system-tokens?
design-system-tokens recommends semantic naming that describes intent rather than appearance: use names like `color-background-interactive` instead of `color-blue-500`. Pair semantic tokens with the three-tier hierarchy so global tokens hold raw values, aliases add meaning, and component tokens scope to UI elements. This pattern makes tokens self-documenting and easier to maintain as designs evolve.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
(truncated - see the full file via the links below)
File tree — 15 files
src/skills/design-system-tokens/SKILL.md
src/skills/design-system-tokens/references/style-dictionary-config.md
src/skills/design-system-tokens/references/token-naming-conventions.md
src/skills/design-system-tokens/references/w3c-token-spec.md
src/skills/design-system-tokens/rules/_sections.md
src/skills/design-system-tokens/rules/_template.md
src/skills/design-system-tokens/rules/tokens-contrast-enforcement.md
src/skills/design-system-tokens/rules/tokens-oklch-color.md
src/skills/design-system-tokens/rules/tokens-spacing-depth.md
src/skills/design-system-tokens/rules/tokens-style-dictionary.md
src/skills/design-system-tokens/rules/tokens-theming-darkmode.md
src/skills/design-system-tokens/rules/tokens-three-tier.md
src/skills/design-system-tokens/rules/tokens-versioning.md
src/skills/design-system-tokens/rules/tokens-w3c-format.md
src/skills/design-system-tokens/test-cases.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create and manage design tokens following W3C DTCG specification”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill bridges design and development by automating the Figma-to-code pipeline. It covers extracting design tokens from Figma Variables, mapping Auto Layout to CSS Flexbox/Grid, documenting component specifications, and validating production UI against Figma designs using visual regression.
This skill provides templates and patterns for constructing production-grade design systems with Tailwind CSS v4's @theme directive. It covers semantic token naming, color scales, typography systems, spacing grids, shadow and motion tokens, plus multi-brand theming and dark mode configuration.
This skill streamlines the design-to-code workflow by connecting directly to Figma, extracting design tokens and component patterns, then auditing your codebase for alignment. It generates phased implementation plans with task breakdowns and acceptance criteria, cutting handoff time from hours to minutes.
Design Context Extract analyzes existing applications to capture their visual foundation—colors, fonts, spacing, and component structure—and exports the results as structured design tokens or Tailwind configuration. It works from screenshots, live URLs, screen recordings (including motion specs), or your project's existing styles, making it easy to audit designs or bootstrap a design system from a live reference.
Design Tokens manages design token files using the DTCG 2025.10 standard with a dependency-free Python core. It scaffolds token sets, validates them against the spec, merges project overrides with global brand bases, resolves aliases, and exports to CSS custom properties. The skill also generates preview pages, design documentation, and generation prompts for on-brand image creation.
UI Design System guides you through building production-ready design systems from the ground up. It covers the complete workflow: establishing primitive, semantic, and component token layers; architecting atomic to organism-level components; and implementing light/dark theming with responsive patterns. Built for Tailwind CSS v4 and CSS custom properties.
More skills design-md (MIT) · Ui Design System (unlicensed) · ui-components (MIT)