# Gradient

> Bold color transitions, mesh gradients, flowing color, vibrant.

- Skill: `jdsadminllc/gradient` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/gradient`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/gradient/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/gradient

---

# Gradient
## Mission
Use bold, intentional color transitions to create depth, energy, and visual direction — gradients are the primary design element, not decoration.
## Brand
### 🎨 Colors
- `#ff6b6b` — Coral (gradient start)
- `#4ecdc4` — Teal (gradient mid)
- `#7c3aed` — Violet (gradient end)
- `#1a1a2e` — Dark background
- `#ffffff` — Text on dark
- `#111827` — Text on light
### 🔤 Typography
- **Heading:** Space Grotesk (geometric, modern)
- **Body:** DM Sans (clean, neutral)
- **Scale:** xs: 0.75rem, sm: 0.875rem, base: 1rem, lg: 1.125rem, xl: 1.25rem, 2xl: 1.5rem, 3xl: 2.25rem
### 📐 Spacing
- 8px grid system
- Section padding: 5rem vertical, 2rem horizontal
- Card gaps: 2rem
- Border radius: 8–12px
### 🧩 Components
- **Buttons:** Gradient-filled with smooth color transitions (e.g., coral→violet), white text, subtle box-shadow on hover
- **Cards:** Dark background with gradient border (via border-image or pseudo-element), subtle inner gradient for depth
- **Nav:** Solid dark background, gradient accent line at bottom (2px), logo may use gradient text
- **Hero:** Full-viewport gradient mesh background, animated gradient shift on scroll
- **Footer:** Dark background with subtle gradient top border, minimal content
### ♿ Accessibility
- All gradient-over-text must pass 4.5:1 contrast at every point in the transition
- Focus states: high-contrast outline (not gradient) — 3px solid #ffffff or #000000
- Prefers-reduced-motion: disable gradient animation, use static gradients
- Never convey information through color alone — always pair with icons/labels
### ✍️ Writing Tone
Energetic and bold. Short, punchy headlines. Active verbs. Modern tech voice. Labels in sentence case.
## Do / Don't
### ✅ Do
- Test gradients at the endpoints — the lightest and darkest points must meet contrast minimums
- Use gradients to direct visual flow (top-to-bottom for hero, left-to-right for CTAs)
- Keep gradient angle consistent across related components
- Add subtle noise/texture overlays to prevent banding on large gradient surfaces
- Use conic and radial gradients for decorative accents, not core UI
### ❌ Don't
- Place white text over a gradient that fades to a light color — test every point
- Use more than 3 color stops in a single gradient without a clear reason
- Animate gradients continuously — it's distracting and impacts performance
- Apply gradients to small text or icons where the effect is invisible
- Use low-contrast gradient borders that blur into the background
## Quality Gates
- [ ] All gradient-text combinations pass 4.5:1 contrast at the lightest point of the gradient
- [ ] No visible color banding on large gradient surfaces (test on 10-bit displays)
- [ ] Gradient direction is consistent: CTAs use one angle, hero sections use another
- [ ] Fallback solid color is defined for all gradient elements
- [ ] Gradient animations respect prefers-reduced-motion
- [ ] Print stylesheet renders gradients as solid colors