Design Tokens, Theming and Contrast System
Build or audit design system foundations: 3-tier tokens, OKLCH scales, WCAG contrast in every theme, and consistent component props.
Before & after
Same prompt, same agent — the only difference is the skill.
A design system is essential for consistency. You'll want to document your color palette, typography rules, spacing, and component behaviors. Then engineers need to know which components exist and how to use them. Creating documentation usually involves screenshots, code examples, and maybe some Figma files. It's a lot of work to keep it all in sync. Have you decided which tool you want to use for the source of truth—Figma, Storybook, or something else?
DESIGN TOKEN GENERATION COLOR PALETTE Primary brand: #0055CC (hover: #003D99, active: #002966) Secondary: #F0F2F5 (backgrounds, neutral surfaces) Status colors: success #1A7C00, warning #B85C00, error #C00, info #003D99 Text: body #1A1A1A, secondary #666666, disabled #CCCCCC Borders: standard #D9D9D9, subtle #E6E6E6 TYPOGRAPHY SCALE Heading 1: 32px, 1.2 line-height, 600 weight Heading 2: 24px, 1.3 line-height, 600 weight Body: 16px, 1.5 line-height, 400 weight Small: 14px, 1.4 line-height, 400 weight Caption: 12px, 1.4 line-height, 400 weight SPACING SCALE (8px base) 4, 8, 12, 16, 24, 32, 48, 64px COMPONENT DOCUMENTATION → Button (4 variants: primary, secondary, ghost, danger) → Input fields (text, email, password, number) → Card layouts (minimal, elevated, bordered) → Modal dialog (responsive, dismiss patterns) → Navigation tabs (horizontal, vertical, scrollable) DEVELOPER HANDOFF 1. CSS custom properties file (copy into project) 2. Component prop types (TypeScript interface) 3. Responsive grid rules (mobile: 4-col, tablet: 8-col, desktop: 12-col) 4. Accessibility checklist (WCAG 2.1 AA, keyboard navigation, screen reader support) 5. Browser support matrix (Chrome 90+, Safari 14+, Firefox 88+) SOURCE OF TRUTH Figma library with auto-sync to code via design-token script
About this skill
Design systems usually break at the foundation: value-named tokens that make dark mode a rewrite, uneven color scales, contrast checked for body text only, and components that each invent their own props. This skill builds or audits that foundation with checks you can verify.
What it does
- Sets up primitive, semantic, and component token tiers in DTCG JSON or CSS variables
- Builds perceptually even color scales and maps light and dark themes at the semantic tier
- Computes WCAG contrast for every text, border, and focus pair in every theme and state
- Sets spacing, type, motion, and target-size rules that hold up at 200% zoom
- Standardizes component props, states, and keyboard behavior across the library
What you get
Token files or tables, a contrast matrix with ratios, scales, component API conventions, a migration table for old values, and a ranked issue list for audits.
Best for
Design system leads, UI designers, and frontend engineers setting up tokens, adding dark mode, or cleaning up an inconsistent library.
SKILL.md preview
---
name: ui-design-system
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.