skills.rest
jvsandhu
jvsandhuCOMMUNITY
Explore all skills by this author →
GitHub

design_tokens

Defines spacing, typography, and color tokens for consistent design systems.

Updated Jan 14, 2026
Search Tags:#typography#theming#design system#color palette#design tokens#wcag#style dictionary
One-click install
npx skills add https://github.com/jvsandhu/agentic-skills --skill design-tokens-jvsandhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design_tokens
Source: https://github.com/jvsandhu/agentic-skills/tree/main/skills/design_tokens
Command: npx skills add https://github.com/jvsandhu/agentic-skills --skill design-tokens-jvsandhu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent spacing, typography, and colors across a product lead to visual fragmentation and maintenance overhead. This Skill provides a standardized design token system so teams can define, export, and enforce core design variables across platforms. ## Core Features & Use Cases - 8-Point Grid Spacing System: Standardized spacing scale from 4px to 128px with padding rules for cards, buttons, inputs, and sections. - Typography & Color Standards: Font size scale, line-height ratios, font weights, WCAG contrast requirements, and 10-shade color palette structure. - Token Workflow: Three-phase process covering audit and hierarchy, JSON definition with Style Dictionary multi-platform export, and consumption with governance. - Use Case: A frontend team migrating a legacy app can audit existing colors, define primitive and semantic tokens in JSON, export them to CSS and mobile formats via Style Dictionary, and replace hardcoded values with token variables. ## Quick Start Use the design tokens skill to audit my project's colors and spacing and generate a token hierarchy with Style Dictionary export.

Frequently Asked Questions about design_tokens

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

FAQPage Schema
How do I create a design token system for my project?▼

Start by auditing existing colors and typography, then classify tokens into primitive, semantic, and component levels. Define them in a central JSON file and use Style Dictionary to export CSS, JavaScript, and mobile formats.

What is the 8-point grid system in UI design?▼

The 8-point grid requires all spacing values to be multiples of 8, ranging from 4px micro spacing to 128px hero padding. It standardizes padding for cards, buttons, inputs, and sections to create visual consistency.

How do I export design tokens to multiple platforms?▼

Define tokens in a central JSON file and use Style Dictionary to transform them into CSS variables, JavaScript objects, and Swift or Kotlin formats. Semantic mappings enable dark and light theme variations from the same source.

What contrast ratio is required for WCAG accessibility?▼

Normal text requires a minimum 4.5:1 contrast ratio, large text of 18px or more requires 3:1, and UI components require 3:1. The AAA ideal target is 7:1 for maximum accessibility.

When should I use design tokens instead of hardcoded values?▼

Use tokens whenever a project needs consistent theming, multi-platform support, or brand updates across many components. Hardcoded values make theme changes and governance audits difficult to maintain at scale.

Related Skills

Explore More Design & Creative Skills→
joserprietojoserprieto
2

avincis-brand-design

Deliver the Avincis brand design system as portable tokens for consistent visuals.

Community
Advanced
dylantarredylantarre
38

react

Create token-driven React components with TypeScript and ARIA compliance.

Community
Intermediate
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

visual-regression-test-setup

Set up automated visual regression testing with Percy, Chromatic, Playwright, or BackstopJS.

Official
Intermediate
TimeKastTimeKast

kb-tailwind-v4

Standardize Tailwind CSS v4 utility generation for Next.js CSS-first @theme token systems.

Official
Intermediate