Colorful design skill for AI agents

Overview

Colorful is a vibrant, high-energy design system skill for AI-powered development. It uses rich color palettes, bold gradients, and high-contrast compositions to create interfaces that are visually engaging, instantly memorable, and unmistakably premium. Where most design systems minimize color, Colorful makes it the centerpiece.

When you add this skill file to your AI coding tool, every component it generates — from gradient-washed hero sections to vivid badges and accent-rich data visualizations — uses color with purpose and confidence, backed by an 8pt grid system and comprehensive accessibility rules that keep vibrancy from becoming noise.

Design tokens

Color palette

Colorful builds on a blue-to-violet primary/secondary axis — two colors that sit close enough on the spectrum to blend beautifully in gradients, yet far enough apart to serve distinct functional roles:

The blue-violet pairing is designed for gradient use. The AI agent can sweep between primary and secondary across hero backgrounds, button fills, progress bars, and decorative accents — producing a cohesive color story that feels rich rather than random. The skill file teaches the AI when to use solid color and when to reach for gradients, so vibrancy stays controlled.

Typography

Colorful uses Inter for all body and display text, paired with JetBrains Mono for code and technical content. Inter's neutrality is a deliberate counterbalance — when color is this expressive, the typography stays clean and precise so the interface never feels overwhelming.

The type scale uses six sizes with a tighter upper range:

• 12px — Fine print, tertiary metadata
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 20px — Large body, lead text, card titles
• 24px — Section headings (h3)
• 32px — Page headings, hero text (h1/h2)

Font weights span 100 (thin) to 900 (black). The skill file pairs heavier weights with color accents for maximum impact, and lighter weights with neutral tones for supporting content — creating a rhythm where color and weight reinforce the same hierarchy.

Spacing

Colorful uses an 8pt baseline grid — every margin, padding, and gap aligns to multiples of 8px. This grid system is slightly more opinionated than the 4px scales used in other design skills, producing layouts with stronger visual rhythm and more consistent vertical spacing. When color is doing heavy lifting across the interface, a strict grid prevents the layout from feeling chaotic.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Colorful is built on the conviction that vibrant interfaces can be just as usable as minimal ones — if the color is applied with system-level discipline:

• Color as information — primary blue signals interactivity, secondary violet signals emphasis, success/warning/danger communicate state. Every color application carries meaning, not just decoration
• Gradient as a tool, not a trick — the blue-to-violet axis gives the AI a built-in gradient that works everywhere. The skill teaches when gradients add value (hero sections, CTAs, progress indicators) and when solid color is better (form inputs, labels, body text)
• Neutral typography as counterbalance — Inter stays clean and precise so the eye can rest. Color-heavy interfaces fail when both color and type compete for attention; Colorful keeps typography deliberately understated
• 8pt grid as anchor — the stricter grid compensates for visual complexity. When many colors are in play, tight spatial rhythm is what keeps the interface feeling designed rather than decorated
• High contrast by default — the style is described as high-contrast and playful, but the skill ensures that contrast serves readability, not just visual punch

This makes Colorful a strong fit for:

• Marketing sites and landing pages
• Consumer-facing SaaS products
• Social platforms and community apps
• E-commerce and product showcase pages
• Data visualization dashboards where color-coded data is essential
• Any product where visual engagement and brand memorability are priorities

Accessibility

Colorful has an expanded accessibility spec that ensures vibrant color never becomes a barrier, enforcing WCAG 2.2 AA plus additional requirements:

• Keyboard-first interactions for all interactive elements
• Visible focus states on every focusable component — calibrated to be clearly visible against both solid colors and gradient backgrounds
• Semantic HTML before ARIA — the skill instructs the AI to use native elements first and only reach for ARIA when semantics aren't available natively
• Screen-reader tested labels — every interactive element gets a label that communicates meaning when read aloud, especially important when color alone conveys state
• Reduced-motion support — gradient animations and color transitions respect prefers-reduced-motion
• 44px+ touch targets — all interactive elements meet minimum tap size requirements

The skill is particularly strict about never relying on color alone to convey information — every color-coded state must have a supplementary text label, icon, or pattern so the interface remains fully usable for color-blind users.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull colorful

2. The file is saved to .cursor/skills/colorful/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will apply the Colorful gradient system, blue-violet palette, 8pt grid, and vibrant interaction states when generating UI code.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Colorful guidelines — using the gradient-ready blue-violet axis, Inter typography as a clean counterbalance, and the 8pt baseline grid throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Colorful apart

Most design skills treat color conservatively — a single primary for actions, neutrals for everything else. Colorful teaches the AI agent to use color as the primary design tool:

• Gradient-native palette — blue and violet are close enough on the spectrum to produce smooth, natural gradients while distant enough to serve separate functional roles
• 8pt baseline grid — the stricter grid (vs. 4px in other skills) provides the structural discipline that lets vibrant color work without feeling chaotic
• Typography as counterweight — Inter is deliberately neutral, giving the eye a place to rest in a color-rich environment
• Color-blind safe by design — the skill enforces supplementary indicators (labels, icons, patterns) for every color-coded state, ensuring vibrancy never becomes an accessibility gap
• Anti-patterns built in — the skill blocks low contrast text and ambiguous labels, plus it teaches the AI when solid color beats gradients so the interface stays intentional
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the vivid output consistent across any number of generated components