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

gradient

Define token-based UI styling guidance with WCAG 2.2 AA accessibility.

Updated May 13, 2026
Search Tags:#typography#accessibility#design system#tokens#ui components#interaction states#gradient design
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill gradient-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gradient
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/gradient
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill gradient-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Gradient standardizes how to use brand colors, typography, spacing, and interactive states so teams can build consistently styled, accessible UIs with gradient-rich visuals.

Core Features & Use Cases

It defines the Gradient style foundations (playful modern look, Montserrat/Space Grotesk/JetBrains Mono type, 8pt baseline spacing) and a tokenized color palette for primary/secondary/status feedback and readable text. It also provides accessibility guidance aligned to WCAG 2.2 AA and clear do/don’t rules for interaction states (default, hover, focus-visible, active, disabled, loading, error where relevant) to reduce inconsistency during implementation. Use it when building buttons, inputs, cards, modals, and other UI components that must look on-brand while remaining keyboard-first and testable in review.

Quick Start

Ask an AI agent to generate Gradient-aligned, WCAG 2.2 AA-ready component guidance and implementation rules for your target UI components using the Gradient tokens and interaction-state requirements.

Frequently Asked Questions about gradient

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

FAQPage Schema
How do I maintain WCAG 2.2 AA accessibility when using gradient design in UI components?▼

To maintain WCAG 2.2 AA accessibility with gradient design, apply token-based color scales and follow do/don’t rules for interaction states like default, hover, and focus-visible. This ensures readable text and testable QA acceptance criteria for components.

What's the best way to standardize spacing and typography for a playful design system?▼

The best way to standardize spacing and typography for a playful design system is using an 8pt baseline spacing rhythm alongside defined fonts like Montserrat, Space Grotesk, and JetBrains Mono. This approach enforces consistent UI styling across all components.

How do I define interaction states for UI components using design tokens?▼

Define interaction states using a tokenized color palette that specifies semantic usage for primary, secondary, and status feedback. Prescribe clear rules for default, hover, active, disabled, and loading states to reduce implementation inconsistency.

Can I use these design system rules to build keyboard-first accessible modals and inputs?▼

Yes, you can use these design system rules to build keyboard-first accessible modals and inputs. The guidance specifies testable accessibility criteria and focus-visible states, ensuring components remain on-brand and fully accessible during implementation.

What is a token-based design guidance approach for UI styling?▼

A token-based design guidance approach for UI styling standardizes how to use brand colors, typography, and spacing. It provides semantic token usage and implementation-ready instructions to build consistently styled, gradient-rich visual components.

Why do my gradient UI components fail accessibility checks during review?▼

Gradient UI components fail accessibility checks during review if they lack testable QA acceptance criteria for WCAG 2.2 AA compliance. Applying a tokenized color palette with defined interaction states ensures readable text and passes validation.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
superpollo02superpollo02

Energetic

Implement tokenized thick-bordered UI components with WCAG 2.2 AA interaction states.

Community
Intermediate
bergsidebergside
2.3k

elegant

Define typography, spacing, radii, and color tokens for Elegant design systems.

Official
Basic
agentconfigagentconfig
7

theme-styling

Apply Tailwind CSS 4 design tokens for consistent theming and dark mode.

Official
Intermediate