Vercel

Difficulty:
Company
Vercel Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Geist

  • Ag

    Body 16px · regular

    Geist

  • Ag

    Labels 13px · medium

    Geist Mono

Vercel is the Frontend Cloud for teams building for the web and the creator of Next.js. Its style compresses Geist Sans with extreme negative tracking, delegates code to Geist Mono, swaps borders for 0 0 0 1px shadow rings, and uses #171717 instead of pure black on near-white. Made for developer and infrastructure products.

DeveloperMinimal

Prompt Template

Base Template
Design a Vercel-inspired interface. - Geist Sans with extreme negative letter-spacing (-2.4px to -2.88px at display) — text as compressed infrastructure; - Geist Mono for code and technical labels with OpenType "liga" globally; - Shadow-as-border technique: box-shadow 0px 0px 0px 1px replaces traditional borders throughout; - Multi-layer shadow stacks for nuanced depth (border + elevation + ambient in single declarations); - Near-pure white canvas with #171717 text — not quite black, creating micro-contrast softness. Colors: #171717, #ffffff, #000000, #ff5b4f with #ff5b4f accent. Typography: Geist.

Variant Prompts

📱 Mobile
Design a mobile app with Vercel aesthetics. Use Vercel color identity with #ff5b4f accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Vercel style. Use Vercel color identity with #ff5b4f accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Vercel design language. Use Vercel color identity with #ff5b4f accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Vercel visual identity. Use Vercel color identity with #ff5b4f accents. Compelling, conversion-focused.

Usage Examples

Vercel App

Web
Build a web app with Vercel design language and #ff5b4f color system.

Vercel Dashboard

Dashboard
Create a dashboard using Vercel style with data visualization and Geist typography.

✅ Best For

  • Developer
  • Developer platforms and deployment tools
  • Minimal black-and-white tech sites

❌ Avoid For

  • High-saturation consumer e-commerce
  • Hand-drawn playful products

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download