Design Tokens Skill: Math-First Scales and Contrast

What is the design-tokens skill?

Everything in this skill hangs off one formula: font size equals a base size multiplied by a ratio raised to a step. The same habit of deriving values instead of guessing them carries through colors, spacing and dark mode.

It lives in the design-tokens folder at the root of dylanfeltus/skills, a library the README describes as AI agent skills for research and design. The folder holds a SKILL.md for the agent and a README for people.

What it generates

• Type scales from seven named ratios, from Minor Second at 1.067 up to Perfect Fifth at 1.500, each matched to a use such as dense dashboards or hero-heavy pages.
• Line height and letter spacing rules that tighten as text grows, plus a weight pairing from 400 for body to 800 for display.
• Color shade scales from 50 to 950 built by shifting lightness and saturation from a base color, then mapped to semantic roles such as background, border and text.
• A base-4 spacing scale that the skill says matches Tailwind's default, and a container width scale from 640px to 1536px.

Contrast checks and dark mode

The skill spells out the WCAG relative luminance formula and the thresholds: 4.5 to 1 for normal text, 3 to 1 for large text and UI components, 7 to 1 for enhanced. A failing pair moves one step darker.

Dark mode is derived by flipping shades rather than hand-picking: neutral 50 becomes 950 for backgrounds, and the primary color moves to a lighter step. Components reference semantic tokens, so switching themes swaps a mapping.

Who the design-tokens skill suits

Best for

• Starting a new project and wanting a type scale, palette and spacing system before any component exists.
• Tailwind or plain CSS projects that want theme values with a clear derivation.
• Checking that text and background pairs pass WCAG AA before a design ships.

Not for

• Reading tokens out of an existing Figma file or website. This skill generates values from formulas and does not extract them. For that, see extract-design-system.
• Picking a brand color or visual direction. You supply the brand color and it derives the rest.
• Auditing finished code against a rule list. It is a generator, not a reviewer.

Use it with UiChemy

The skill writes token files for your codebase and has no connection to WordPress. Have your agent build a page from the tokens, then bring that build in with UiChemy AI to WordPress. Click Get Started on uichemy.com.

Tokens that arrive from Figma are a different route. Related guidance lives in design-token and tailwind-design-system.

How to install Design Tokens Skill: Math-First Scales and Contrast

the skills CLI add command pointed at dylanfeltus/skills, with --skill design-tokens

1. Run the skills CLI

   Use the skills CLI add command pointed at dylanfeltus/skills with --skill design-tokens. The README lists this as the recommended route and says it auto-detects your agent.

2. Or copy it by hand

   Clone https://github.com/dylanfeltus/skills.git and copy the design-tokens folder, found at the root of the repository, into your agent's skills directory. The README's manual route says to have the agent follow the SKILL.md inside it.

3. Give it a starting point

   Name the project type and a brand color, for example a SaaS dashboard or a color such as #6366F1. The SKILL.md walks from type scale to colors, contrast, spacing, dark mode and output.

Check that it loaded

Ask the agent to set up design tokens for a small project. It should pick a ratio, produce shade scales, report contrast checks and output CSS custom properties or a Tailwind config.

Read the official instructions on GitHub

Key features

• Seven named type ratiosA table runs from Minor Second at 1.067 to Perfect Fifth at 1.500, with a best-for note on each, so the agent picks a ratio from the project type.
• Scale steps from step minus 2 to 6Starting from a 16px base, the skill lists steps from xs up to 5xl and says to round to the nearest half pixel or convert to rem.
• Line height and tracking rulesLine height drops from 1.6 to 1.7 for small text to 1.0 to 1.1 for display text, and letter spacing tightens from 0em for body to negative values for headings.
• Shade scales from 50 to 950Each base color is shifted in lightness and saturation by a fixed table, with values clamped to 0 to 100 percent, and the base sits at the 500 step.
• Semantic token mappingShade steps are mapped to roles such as bg, border, text-muted and primary-hover, so components use meaning instead of raw shades.
• WCAG contrast checkingThe skill gives the luminance formula, the AA and AAA thresholds, and five pairs to verify, then says to darken the failing color one step.
• Base-4 spacing and containersThe scale is presented as base 4 and runs from 0px to 128px, with 2px and 6px half steps among the 4px multiples. A usage guide and container widths for sm, md, lg, xl and 2xl sit alongside it.
• Dark mode inversion patternBackground and text shades flip, middle shades shift by one or two steps, and the primary color moves to the 400 or 500 step for dark backgrounds.
• Three output formatsResults can be CSS custom properties, a Tailwind config with extended fontSize and colors, or W3C-style JSON tokens using $value and $type.

Frequently asked questions