57 lines
2.9 KiB
Markdown
57 lines
2.9 KiB
Markdown
# vercel-mesh — Vercel (Gradient Mesh Era)
|
||
|
||
- **School**: Modern Tool / Builder SaaS (also touches Motion / Experimental)
|
||
- **Vibe**: Black-and-white precision broken by a single shimmering gradient mesh
|
||
- **Best for**: Platform / infrastructure tools, AI tools, deeply technical products that want to feel modern but not AI-cliché
|
||
- **Touchstone**: vercel.com, the v0.dev landing, nextjs.org
|
||
|
||
**Palette**
|
||
- Ground: `#000000` (true black)
|
||
- Surface 1: `#0A0A0A`
|
||
- Surface 2: `#111111`
|
||
- Hairline: `#1F1F1F` or `rgba(255,255,255,0.08)`
|
||
- Primary text: `#EDEDED`
|
||
- Secondary text: `#888888`
|
||
- Gradient mesh accents (used only in hero / section breaks):
|
||
- Cyan `#0070F3` → magenta `#FF0080` → orange `#F5A623` — but mixed at low saturation and high feathering, never a hard purple-pink AI gradient
|
||
- One sharp accent for CTAs: white `#FFFFFF` button on black ground (high contrast)
|
||
|
||
**Typography**
|
||
- Display: Geist Sans (weight 500–600) — Vercel's own family. Substitute Inter Tight weight 600.
|
||
- Body: Geist Sans at 15–16px, weight 400, line-height 1.6
|
||
- Mono: Geist Mono — for code, terminal-style commands, deploy logs
|
||
|
||
**Spacing**: 4 / 8 / 16 / 24 / 40 / 64 / 96 / 128
|
||
|
||
**Radius**: 8 (small) / 12 (medium) / 16 (large). Slightly more generous than Linear, but still disciplined.
|
||
|
||
**Shadow**: minimal at component level; the *page* feels lit by the gradient mesh, not by shadows.
|
||
|
||
**Motion**: snappy ease-out (cubic-bezier(0.16, 1, 0.3, 1)), 200ms hovers, 500–700ms for layout. The mesh itself slowly drifts (10–20s loop).
|
||
|
||
**Signature moves**
|
||
- One full-bleed gradient mesh in the hero — diffuse, dreamy, feathered to black edges
|
||
- Otherwise the page is black-and-white with hairline detail and monospace accents
|
||
- Deploy / terminal log readouts as a hero element (real-feeling, not lorem)
|
||
- Animated mesh on hover for cards (the card "lights up" with a soft glow from below)
|
||
- White solid buttons (`#FFFFFF` on `#000000`) — high contrast, no gradient, no shadow
|
||
|
||
**Avoid**
|
||
- Bright saturated purple → pink gradients (that's the AI cliché the recipe is *replacing*)
|
||
- More than one mesh per page
|
||
- Glow on every component (selective use — one hero, maybe one section break, that's it)
|
||
- Colored buttons (the brand button is white)
|
||
|
||
**AI prompt seed**
|
||
> Abstract atmospheric gradient on pure black #000000 background, deep blue #0070F3 fading into magenta #FF0080 and orange #F5A623, feathered edges blending into black, dreamy soft focus, no objects, no text, 16:9, very low saturation overall.
|
||
|
||
**Don't use when**
|
||
- The brand isn't a platform / infra / tooling product — meshes on a consumer site read as "trying too hard"
|
||
- Multiple gradient meshes are needed (use one or none, never several)
|
||
- The audience expects warm / human feel
|
||
|
||
---
|
||
|
||
> **Same school — Modern Tool / Builder SaaS**: [`linear`](./linear.md) · [`raycast`](./raycast.md) · [`notion-pre-ai`](./notion-pre-ai.md)
|
||
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)
|