skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-tokens

Generate and validate DTCG design tokens using a 3-tier primitive-semantic-component architecture.

Updated Jul 20, 2026
Search Tags:#theming#accessibility#design system#color palette#design tokens#oklch#dtcg
One-click install
npx skills add https://github.com/idy-00/paytrack --skill design-tokens-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/design-tokens
Command: npx skills add https://github.com/idy-00/paytrack --skill design-tokens-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Maintaining consistent colors, typography, spacing, and theming across a design system is error-prone when values are hardcoded. This Skill produces structured DTCG-format token files that follow a strict 3-tier architecture, keeping primitives, semantic aliases, and component tokens cleanly separated. ## Core Features & Use Cases - Token Generation: Create or extend DTCG JSON tokens for colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, and theming. - Accessible Palette Creation: Generate 11-shade OKLCH color palettes with contrast verification (500 ≥ 4.5:1 on white for text, 600 ≥ 3:1 for UI). - Multi-Brand Theming: Manage brand and density variations through a dedicated theming.json file. - Use Case: When adding a new brand to your product, ask the Skill to generate a full OKLCH palette, wire it into the semantic layer for dark mode support, and validate the output with the token validation script. ## Quick Start Generate a new accessible color palette as DTCG design tokens and add it to my tokens directory with dark mode support.

Frequently Asked Questions about design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create design tokens in DTCG format?▼

Define tokens using $type and $value fields organized in three tiers: primitives hold raw values, semantic tokens alias primitives by purpose, and component tokens reference semantic ones. Validate the JSON files with a token validation script to check alias resolution.

How to generate an accessible color palette for a design system?▼

Generate 11 shades per hue using the OKLCH color space, then verify contrast ratios: shade 500 must reach at least 4.5:1 on white for text and shade 600 at least 3:1 for UI elements. A contrast-checking script can automate this audit.

What is the difference between primitive and semantic design tokens?▼

Primitive tokens store raw values like specific OKLCH colors and are never used directly in components. Semantic tokens are purpose-based aliases, such as text-primary, that reference primitives and enable features like dark mode at the semantic layer.

Can design tokens support multiple brands and dark mode?▼

Yes, multi-brand and density variations are handled in a dedicated theming.json file. Dark mode is implemented at the semantic layer so component tokens automatically adapt when the active theme changes.

Why does my design token file fail validation?▼

Validation typically fails due to invalid JSON syntax or aliases that reference non-existent tokens. Run the validate_tokens.py script to check JSON validity and confirm every alias resolves to a defined token.

Related Skills

Explore More Design & Creative Skills→
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
Samuelca6399Samuelca6399

design-systems

Guide teams in building scalable design systems with semantic tokens, CSS variable theming, and Storybook documentation.

Community
Advanced
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate