Gradient design skill for AI agents

Overview

Gradient is a vibrant, flow-driven design system skill for AI-powered development. It's built entirely around the principle that color transitions are more powerful than static fills. A deep purple melting into hot pink across a hero section, a button that shifts hue on hover, a progress bar that evolves through the spectrum as it fills — gradients aren't decoration here, they're the design language itself.

When you add this skill file to your AI coding tool, every component it generates uses color transitions as a primary visual tool — not as an occasional flourish, but as the consistent, systematic way the interface communicates hierarchy, interactivity, and energy.

Design tokens

Color palette

Gradient anchors its palette on two endpoints designed to produce the most visually striking color transitions possible — a deep electric purple and a hot pink:

The purple-to-pink axis is engineered for smooth spectral transitions. These two hues sit at positions on the color wheel that produce a rich, warm midpoint rather than a muddy blend — the gradient passes through magenta, creating a three-color visual experience from just two tokens. The AI agent uses this axis everywhere: button fills, hero backgrounds, border accents, text gradients on headings, progress indicators, and decorative elements. Solid purple or solid pink appear in contexts where gradients would be impractical (small badges, thin borders, text labels), giving the system both its signature transition and clean fallback states.

Typography

Gradient uses a dual-typeface system that pairs geometry with character:

• Montserrat — Primary/body font. A geometric sans-serif with rounded, open letterforms that feel modern and approachable. Montserrat handles body text, form labels, navigation, and all content that needs to be read quickly. Its clean forms let gradient accents on nearby elements take the visual spotlight.

• Space Grotesk — Display font. A proportional sans-serif with distinctive letterforms — slightly quirky terminals, ink traps, and a personality that sets it apart from standard grotesques. Space Grotesk gives headings and display text a character that complements the gradient energy without competing with it.

• JetBrains Mono — Monospaced font for code blocks, technical data, and tabular content.

The type scale uses seven sizes with Premium-level granularity:

• 12px — Fine print, tertiary metadata
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 18px — Large body, lead text
• 24px — Section headings (h3)
• 30px — Page headings (h2)
• 36px — Hero headings (h1)

Font weights span 100 (thin) to 900 (black). The display font at heavier weights paired with gradient text effects creates the skill's most distinctive visual moment — a 700-weight Space Grotesk heading with a purple-to-pink gradient fill is immediately recognizable as Gradient's signature.

Spacing

Gradient uses an 8pt baseline grid — every margin, padding, and gap aligns to multiples of 8px. The 8pt grid provides the structural discipline that gradient-heavy interfaces need. When color is in constant transition across the layout, precise, consistent spacing is what prevents the visual richness from becoming visual chaos. The grid ensures that gradient-filled elements sit in a predictable rhythm, making the color flow feel intentional.

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

Gradient treats color transitions as a first-class design primitive — as fundamental as borders, shadows, or type scale:

• Gradients as the primary visual tool — where other systems use solid color fills and rely on shadows or borders for depth, Gradient uses color transitions. A button's fill sweeps from purple to pink. A card's border shimmers along the spectrum. A hero section's background flows across the full axis. The gradient is the visual identity
• Two-token, three-color experience — the purple-to-pink transition passes through magenta, creating a richer visual range than the two endpoints suggest. The AI agent gets a full warm-spectrum palette from just two tokens
• Solid as fallback, not default — the AI uses solid purple or solid pink only where gradients are impractical (inline text color, tiny icons, thin underlines). Every surface large enough to show a transition gets one
• Dual-typeface rhythm — Montserrat's clean geometry recedes behind gradient elements, while Space Grotesk's distinctive display forms become the canvas for gradient text effects. The two fonts create a visual rhythm between "readable" and "expressive"
• Grid as stabilizer — the 8pt grid provides the structural consistency that keeps gradient-rich layouts feeling designed rather than psychedelic. Strict spacing rhythm is the counterbalance to fluid color

This makes Gradient a strong fit for:

• Creative agency and design studio portfolios
• Music, entertainment, and streaming platforms
• Social media and community applications
• AI and machine learning product interfaces
• Startup landing pages and product marketing sites
• Event, festival, and nightlife platforms
• Any product where visual energy and brand memorability are priorities

Accessibility

Gradient has an expanded accessibility spec that ensures vibrant color transitions remain fully usable, 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 and gradient backgrounds
• Semantic HTML before ARIA — native elements first, ARIA only 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 gradient effects carry visual meaning that screen readers can't perceive
• 44px+ touch targets — all interactive elements meet minimum tap size requirements

Gradient-specific accessibility considerations: the skill ensures the AI never relies on gradient direction or color position to convey information (e.g., "the purple end means start, the pink end means end"). All meaning communicated through gradients must have a supplementary text or icon indicator. Text placed on gradient backgrounds must meet contrast requirements at every point along the transition, not just at the endpoints.

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 gradient

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

3. Start prompting — Claude will generate gradient-driven interfaces with purple-to-pink transitions, Montserrat + Space Grotesk typography, and 8pt grid precision.

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 Gradient guidelines — using color transitions as the primary visual tool, the dual-typeface system for rhythm, and gradient text effects for display headings.

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 Gradient apart

Other typeui.sh skills use gradients as an optional accent. Gradient makes them the entire design language:

• Gradient as primitive — color transitions aren't decorative touches; they're the primary tool for communicating hierarchy, interactivity, and visual flow. Every sufficiently large surface gets a transition
• Engineered color axis — purple #990FFA to pink #E60076 passes through magenta, producing a three-color experience from two tokens. The midpoint is as carefully considered as the endpoints
• Space Grotesk display personality — the most characterful display font of any skill using a sans-serif. Its ink traps and distinctive terminals make gradient text effects feel crafted rather than generic
• Seven-step type scale — the extra 18px and 30px stops (matching Premium's granularity) give the AI finer control over hierarchy, important when gradient text effects amplify size differences
• Gradient-on-text accessibility — the skill specifically addresses contrast along the full length of a gradient, not just at endpoints. Text on gradient backgrounds must pass AA at every point in the transition
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the fluid, colorful output consistent whether the AI generates a single button or an entire multi-section landing page