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
Install
yonatangross/orchestkit/design-system-tokens · repository language: TypeScript
git clone https://github.com/yonatangross/orchestkit
cp -r orchestkit/src/skills/design-system-tokens ~/.claude/skills/design-system-tokensnpx skillfed install yonatangross/orchestkit/design-system-tokensFrequently 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)
Read as markdown · JSON record · Browse the source repository
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