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

brandkit

Generate WCAG-verified DTCG design tokens and a theme.css from a brand brief.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Building a brand design foundation from scratch often produces inconsistent colors, inaccessible contrast, and scattered per-page palettes. This Skill generates a complete, verified token system so every screen renders from one themeable source. ## Core Features & Use Cases - Three-tier DTCG tokens: Generates primitive OKLCH color ramps, semantic role mappings (action, text, surface, border, feedback), and component-level tokens with designed light and dark themes. - Full design scales: Produces a Major Third type scale, 4px spacing scale, radius tiers, elevation, and motion durations/easings. - Automated verification: Validates JSON token aliases, WCAG AA contrast in light and dark modes, and theme variable references via included Python scripts. - Use Case: Given a brief for a fintech product with a calm, trustworthy mood, generate the full token set plus a single theme.css with [data-theme="dark"] overrides, then confirm all text and border pairs pass WCAG AA. ## Quick Start Generate a complete brand token system and theme.css for a new productivity app with a calm, focused mood, verified for WCAG AA in light and dark modes.

Frequently Asked Questions about brandkit

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

FAQPage Schema
How do I generate a design token system from a brand brief?▼

Provide the industry, audience, one mood adjective, and motion depth. The Skill infers an aesthetic archetype, generates OKLCH primitive ramps, maps semantic roles, and emits three-tier DTCG tokens plus a single theme.css with dark mode overrides.

How to verify design tokens meet WCAG contrast requirements?▼

Run the included validate_contrast.py script, which checks required text, action, and border pairs against WCAG AA in both light and dark themes. It enforces 4.5:1 for text, 3:1 for UI elements, and 3:1 for strong borders.

What is the DTCG token format used for design systems?▼

DTCG is the Design Tokens Community Group format, a JSON standard for design tokens. This Skill emits three tiers: primitives, semantic role mappings, and component tokens, with aliases that resolve across tiers.

Does the generated theme support dark mode?▼

Yes, dark mode is a designed override layer, not an automatic inversion. Semantic tokens include dark values delivered through [data-theme="dark"] overrides in the single theme.css file.

Why does token validation fail after generating a theme?▼

Failures typically come from unresolved token aliases, contrast pairs below WCAG AA thresholds, or component CSS variables that do not resolve to the theme. Run validate_tokens.py, validate_contrast.py, and validate_theme_refs.py to identify the specific issue.

Related Skills

Explore More Design & Creative Skills→
rampstackcorampstackco
523

brand-ideation

Generate brand directions with positioning, naming, mood, and narrative options.

Official
Advanced
GDSDNGDSDN
3

export-design-tokens-dtcg

Exports YAML design tokens to W3C DTCG JSON with validation and platform bundles.

Community
Advanced
bazokhanbazokhan
3

@sbtools/ui-web

Consolidate React UI rendering and design tokens across SSR pages and a Vite-based SPA dashboard.

Community
Advanced
ai-enhanced-engineerai-enhanced-engineer
3

frontend-design-systems

Integrate design systems while preserving brand identity and design tokens.

Official
Intermediate