skills.rest
lukaskellerstein
lukaskellersteinCOMMUNITY
Explore all skills by this author →
𝕏@lkellersteinGitHub

design-system

Generate color palettes, type scales, and audit design systems for WCAG contrast compliance.

3|1|Updated Nov 19, 2025
Search Tags:#accessibility#design system#color palette#wcag#contrast ratio#typography scale#spacing grid
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill design-system-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/design-plugin/skills/design-system
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill design-system-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Maintaining visual consistency and accessibility across a product is hard: colors drift off-palette, text fails WCAG contrast requirements, and spacing becomes arbitrary. This Skill provides the formulas, scales, and audit checklists needed to build and verify a coherent design system. ## Core Features & Use Cases - Color Palette Generation: Derive a full 50-950 shade scale from a single primary hue using HSL, plus semantic color mapping for success, warning, error, and info states. - WCAG Contrast Auditing: Calculate contrast ratios between any two colors and validate them against AA/AAA requirements for normal text, large text, and UI components. - Typography & Spacing Systems: Apply modular type scales (Major Third, Perfect Fourth, etc.) and a 4px spacing grid with usage guidelines per UI context. - Use Case: A designer notices gray text on a white background looks washed out. Ask the Skill to check the contrast ratio — it reports 3.0:1, failing AA for normal text, and suggests gray-700 (10.3:1) as a compliant alternative. ## Quick Start Audit my design system and check whether my text colors meet WCAG AA contrast requirements.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I check WCAG contrast ratio between two colors?▼

Calculate the relative luminance of each color from its RGB values, then divide the lighter luminance plus 0.05 by the darker plus 0.05. AA requires 4.5:1 for normal text, 3:1 for large text and UI components.

How to generate a full color palette from one brand color?▼

Take the hue and saturation of your primary color and vary the lightness in HSL from 97% down to 10%, producing shades 50 through 950. This yields a consistent scale for backgrounds, borders, and text.

What contrast ratio is needed for WCAG AA compliance?▼

WCAG AA requires 4.5:1 for normal text under 18px, 3:1 for large text (18px bold or 24px and up), and 3:1 for UI components. AAA raises these to 7:1 and 4.5:1 respectively.

Which type scale ratio should I use for UI design?▼

Major Third (1.250) is a popular default balancing hierarchy and density, while Major Second (1.125) suits tight UI layouts. Larger ratios like Perfect Fourth (1.333) create more dramatic heading contrast.

Why does my light gray text fail accessibility checks?▼

Light grays like #9CA3AF on white yield only about 3.0:1 contrast, failing AA for normal text. Darken to gray-500 (5.0:1) or gray-700 (10.3:1) to pass, or reserve light grays for large headings only.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
modu-aimodu-ai
4

agency-design-system

Create brand-aligned design tokens, typography, layout rules, and component specs.

Official
Advanced
jacocanetejacocanete

review-accessibility

Audit React and Tailwind codebases for accessibility issues and generate a prioritized report.

Community
Advanced
ai-ecoverseai-ecoverse
28

theme

Customize SLICC browser-native AI agent UI themes via CSS tokens.

Official
Intermediate