Aurora / Mesh Gradient

---
name: aurora-mesh-gradient
description: Apply the Aurora / Mesh Gradient visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Aurora / Mesh Gradient, mentions aurora background, mesh gradient hero, northern lights UI, or describes blurred radial-gradient blobs, dark plum base canvas, slow aurora drift animation — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Aurora / Mesh Gradient Design System

Soft, blurred multi-color mesh backdrops — violet, teal, pink, and blue blobs drifting like northern lights over a near-black base — with glassy cards and crisp light type floating on top. The default dress code for AI and startup hero sections in the 2020s.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Aurora / Mesh Gradient.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (aurora background, mesh gradient hero, northern lights UI, gradient blob backdrop), or describes its traits: blurred radial-gradient blobs; dark plum base canvas; slow aurora drift animation; glass cards over the mesh; colored glow shadows; crisp light foreground type.

## Design tokens

### Color palette

- Near-black plum base under the mesh: `#0b0614` (--color-bg)
- Glass card fill, 6% white: `#ffffff0f` (--color-surface)
- Primary light text: `#f5f3ff` (--color-text)
- Secondary lavender-gray copy: `#a5a0b8` (--color-text-muted)
- Interactive teal — links, CTAs, focus: `#2dd4bf` (--color-accent)
- Mesh blob stop: `#7c3aed` (--color-mesh-violet)
- Mesh blob stop: `#ec4899` (--color-mesh-pink)
- Mesh blob stop: `#3b82f6` (--color-mesh-blue)
- 12% white card edges: `#ffffff1f` (--color-border)

### Typography

- Display / headings: Space Grotesk (fallback: Inter, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 80, 128 — Airy: the mesh needs unobstructed space to glow, so sections run 80–128px of padding and content stays in narrow centered columns.
- Border radius: md 12px, lg 20px, pill 999px — Soft but not clay-like; 12–20px keeps cards modern against the organic mesh.
- Border treatment: 1px solid rgba(255,255,255,0.12) — Light hairline separates glass cards from the mesh; brighten to 20% on hover.

### Shadows

- glow-violet: `0 0 80px rgba(124,58,237,0.35)` — Behind hero CTAs and featured cards
- glow-teal: `0 0 60px rgba(45,212,191,0.3)` — Accent elements and active states
- card: `0 8px 32px rgba(0,0,0,0.35)` — Glass card elevation over the mesh

### Layout

- Max content width: 1200px
- Full-bleed mesh confined mostly to hero and CTA bands; middle sections calm down to the plain dark base
- Content in centered columns floating over the blobs
- Glass cards at a single depth level — the mesh provides the drama
- Blobs anchored off-canvas so edges bleed naturally

### Effects

- 3–5 radial-gradient blobs with filter: blur(100px) composited on the dark base
- Slow drift/scale keyframes (20–40s, alternating) per blob
- 2% noise overlay to prevent gradient banding
- backdrop-filter: blur(16px) on cards sitting over the mesh

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 150ms / 300ms / 600ms
- Mesh drift is continuous, slow, and never synced — blobs breathe independently
- UI motion stays conventional: fade-and-rise entries, small hover lifts
- Freeze the mesh under prefers-reduced-motion; keep it as a static gradient

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0b0614;
  --color-surface: #ffffff0f;
  --color-text: #f5f3ff;
  --color-text-muted: #a5a0b8;
  --color-accent: #2dd4bf;
  --color-mesh-violet: #7c3aed;
  --color-mesh-pink: #ec4899;
  --color-mesh-blue: #3b82f6;
  --color-border: #ffffff1f;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-glow-violet: 0 0 80px rgba(124,58,237,0.35);
  --shadow-glow-teal: 0 0 60px rgba(45,212,191,0.3);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.35);
  --border-default: 1px solid rgba(255,255,255,0.12);
  --font-display: "Space Grotesk", Inter, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Transparent over the mesh, blurring and gaining the dark base color once scrolled; light logo, ghost links, teal pill CTA
- **Hero:** Headline in Space Grotesk 700 directly on the mesh with a violet glow behind the key phrase; subhead in text-muted; teal CTA with glow-teal shadow
- **Card:** 6% white glass fill, 12px hairline border, 20px radius, backdrop blur, card shadow; hover brightens border and deepens the nearest blob
- **Button (primary):** Solid #2dd4bf fill, near-black text, pill radius, glow-teal shadow that intensifies on hover
- **Button (secondary):** Glass fill with hairline border and light text; border brightens on hover
- **Form fields:** Glass fill, hairline border, light text with 50% lavender placeholder; focus ring in teal at 40% opacity

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A full-bleed animated mesh of 3–5 radial-gradient blobs (violet #7c3aed, teal #2dd4bf, pink #ec4899, blue #3b82f6) blurred 80–120px over #0b0614, drifting on a 20s+ loop behind the hero. Spend boldness here; keep everything else quiet.

## Do

- Blur blobs hard (80px+) and add a noise overlay — crisp-edged gradients read as clipart
- Confine the mesh to hero and CTA bands; give the middle of the page a calm dark resting state
- Keep foreground type high-contrast light and let the mesh supply all the color
- Animate blobs on long unsynchronized loops so the aurora feels alive, not looping

## Don't

- Don't run body copy directly over the brightest blob regions
- No more than ~5 blob colors — past that the mesh turns to mud
- Don't attach the mesh to scroll position; parallax gradients cause motion discomfort
- Avoid pairing with additional loud effects (glitch, heavy 3D) — the mesh is the effect

## Accessibility notes

- Foreground roles pass on the #0b0614 base, but the mesh raises local luminance unpredictably — test text over the brightest blob state, and add a subtle dark scrim behind hero copy if needed
- Teal accent on dark passes AA, but near-black text on the teal CTA is the safe fill direction; white-on-teal fails
- Continuous background animation must pause under prefers-reduced-motion

## Reference sites

- Stripe: https://stripe.com
- Linear: https://linear.app
- Dribbble mesh-gradient tag: https://dribbble.com/tags/mesh-gradient

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip aurora-mesh-gradient.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/aurora-mesh-gradient.json

Settings → Capabilities → Skills → Upload skill → aurora-mesh-gradient.zip