skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

colorful

Define WCAG 2.2 AA-aligned design tokens and UI guidance for product interfaces.

2.3k|211|Updated Mar 9, 2026
Search Tags:#accessibility#color palette#design tokens#interaction states#UI theming#typography scale#WCAG 2.2
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill colorful-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colorful
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/colorful
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill colorful-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves inconsistency in colors, typography, and component interaction states by providing a single, implementation-ready style and accessibility foundation.

Core Features & Use Cases

  • Tokenized color system: Defines primary, secondary, success, warning, danger, surface, text, and neutral with exact hex values for reliable theming.
  • Typography and spacing foundations: Establishes a consistent type scale (12/14/16/20/24/32) using Inter and JetBrains Mono, plus an 8pt baseline grid spacing rhythm.
  • Accessibility-first interaction rules: Enforces WCAG 2.2 AA-aligned guidance, including visible focus states, keyboard-first behavior, reduced-motion support, and touch target sizing.

Quick Start

Use the colorful design skill to generate UI guidance for a new product surface that must look playful and premium while meeting WCAG 2.2 AA and consistent token-based styling.

Frequently Asked Questions about colorful

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

FAQPage Schema
How do I create accessible UI design tokens that meet WCAG 2.2 AA requirements?▼

Accessible UI design tokens meeting WCAG 2.2 AA requirements are created by defining explicit high-contrast hex color values and applying interaction rules like focus-visible states and minimum touch target sizing.

What typography scale and spacing grid should I use for consistent UI theming?▼

For consistent UI theming, use a typography scale of 12, 14, 16, 20, 24, and 32 pixels with Inter and JetBrains Mono fonts, paired with an 8pt baseline grid spacing system.

How do I define interaction states for UI components to ensure keyboard-first accessibility?▼

Defining interaction states for keyboard-first accessibility requires establishing explicit rules for visible focus states, keyboard navigation behavior, reduced-motion support, and adequate touch target constraints.

Can I use this color palette system for a new product surface that needs to look premium and playful?▼

Yes, this color palette system applies to new product surfaces needing a premium and playful look, providing tokenized primary, secondary, and neutral colors with exact hex values for reliable theming.

What is the best way to structure design tokens for primary, secondary, and surface colors?▼

The best way to structure design tokens for colors is defining explicit hex values across primary, secondary, success, warning, danger, surface, text, and neutral categories to ensure reliable system-level theming.

Do I need specific fonts to implement these design tokens and accessibility guidelines?▼

Yes, implementing these design tokens and accessibility guidelines requires using the Inter and JetBrains Mono typography scales to maintain consistent visual hierarchy across modern product interfaces.

Related Skills

Explore More Design & Creative Skills→
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate
gparker97gparker97
4

beanies.family Brand Theme Skill

Enforce beanies.family brand guidelines for UI copy, components, colors, and assets.

Community
Advanced
bergsidebergside
2.3k

publication

Define print-inspired design system rules for editorial UIs with WCAG 2.2 AA accessibility.

Official
Intermediate
ToqsickToqsick

ui-color-system

Generate accessible UI color palettes with WCAG contrast checking.

Community
Advanced