skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

colorful

Standardize vibrant, high-contrast UI styling with WCAG 2.2 AA design tokens.

Updated May 13, 2026
Search Tags:#design system#color palette#design tokens#accessible UI#interaction states#typography system#WCAG 2.2 AA
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill colorful-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorful
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/colorful
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill colorful-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Colorful provides a ready-to-use set of design tokens and interaction guidelines so teams can build vibrant, high-contrast interfaces that still meet accessibility expectations.

Core Features & Use Cases

  • Token-driven color system: Defines primary, secondary, success, warning, danger, surface, and text colors for consistent visual language across components.
  • Typography and spacing foundations: Establishes an Inter-based scale (12/14/16/20/24/32), JetBrains Mono for label-caps, and an 8pt baseline grid.
  • Accessible interaction rules: Guides keyboard-first behavior, visible focus states, semantic-first patterns, and touch target sizing.
  • Component-ready quality gates: Ensures guidance is testable via acceptance criteria and includes do/don’t anti-patterns for implementation.

Quick Start

Apply the Colorful skill’s tokens and rules to a new UI component set by generating component styling and interaction states that reference its palette, typography, spacing, and WCAG AA requirements.

Frequently Asked Questions about colorful

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

FAQPage Schema
How do I build a design system that meets WCAG 2.2 AA accessibility requirements?▼

Build a WCAG 2.2 AA accessible design system using a token-driven foundation that enforces keyboard-first interactions, visible focus states, and semantic HTML before ARIA. This ensures vibrant UI components meet strict accessibility and testable quality gates.

What design tokens are needed for accessible UI interaction states?▼

Accessible UI interaction states require semantic color role tokens for primary, secondary, success, warning, danger, surface, and text. These tokens standardize component styling and ensure consistent, high-contrast visual language across modern product interfaces.

How do I standardize typography and spacing for design system components?▼

Standardize typography and spacing using an Inter-based scale (12/14/16/20/24/32), JetBrains Mono for label-caps, and an 8pt baseline grid. This establishes consistent foundations for building buttons, forms, cards, and navigation components.

Can I use these design tokens to generate agent-generated or engineer-implemented interfaces?▼

Yes, these tokens apply directly to building design-system components for both agent-generated and engineer-implemented interfaces. The system provides do/don't anti-patterns and acceptance criteria to test and verify implementation quality.

What is the best way to enforce high-contrast color palettes without breaking accessibility?▼

The best way to enforce high-contrast color palettes is applying a token-driven color system with semantic roles paired with accessibility rules. This approach satisfies WCAG 2.2 AA thresholds while maintaining vibrant, modern visual styling.

Why do my UI components fail keyboard-first interaction requirements?▼

UI components fail keyboard-first interaction requirements when they lack visible focus states, proper semantic HTML ordering, or adequate touch target sizing. Applying accessible interaction rules with testable quality gates tied to tokens resolves these failures.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
superpollo02superpollo02

Spacious

Define spacing, typography, color, and accessibility rules for UI design systems.

Community
Intermediate
superpollo02superpollo02

clean

Generate accessibility-first UI component guidance using Clean tokens and WCAG 2.2 AA rules.

Community
Intermediate
PiercingXXPiercingXX
1

colorful

Generate Colorful design-system guidelines with WCAG 2.2 AA accessibility requirements.

Community
Intermediate