Vercel Inspired — Developer Platform Surface

# Design System Inspiration of Vercel

Vercel is a developer-platform brand — a stark ink-on-near-white duet whose only decorative voice is a multi-color mesh gradient (cyan, blue, violet, pink, amber) that floats at hero scale. A custom geometric sans carries display, body, and button; a matching monospaced face carries every technical label. Headlines run sentence-case with aggressive negative tracking; CTAs ship in two pill scales — 100px marketing, 6px in-app.

Start Deploying Get a Demo

/0.1 · color-system

## Color Palette

A stark black-and-ink duet on near-white canvas. The brand introduces colour only via the multi-stop mesh gradient that lives at hero scale. Six neutral steps, four-pair gradient stack, and a tight semantic set.

### Brand & Accent

Ink

#171717

Primary CTA fill and headline text on light surfaces.

Cyan

#50e3c2

Mint-cyan stop inside the hero mesh gradient.

Highlight Pink

#ff0080

High-saturation magenta in the preview gradient.

Violet

#7928ca

Deep purple at the start of the preview gradient.

Link Blue

#0070f3

Inline links and legacy success semantic.

### Surface

Canvas

#ffffff

Pure-white card, dialog, modal surface.

Canvas Soft

#fafafa

Default page background — 98% white.

Canvas Soft 2

#f5f5f5

Slightly deeper inset region for editor and menus.

Hairline

#ebebeb

1px dividers, card borders, input borders.

Hairline Strong

#a1a1a1

500-level gray for deemphasised text.

### Text

Ink

#171717

Every heading and body paragraph on light surfaces.

Body

#4d4d4d

Secondary text — sub-headings, captions, footer column body.

Mute

#888888

Lowest-priority text — placeholders, fine print.

On Primary

#ffffff

All text on ink-primary surfaces.

### Semantic

Success / Link

#0070f3

Legacy success indicator + primary link color.

Link Deep

#0761d1

Pressed / visited tone for inline links.

Link Bg Soft

#d3e5ff

Soft pastel blue fill for informational badges.

Error

#ee0000

Validation red for destructive actions.

Error Soft

#f7d4d6

Soft pastel red destructive background.

Error Deep

#c50000

Pressed destructive state.

Warning

#f5a623

Caution / pending status indicator.

Warning Soft

#ffefcf

Soft pastel amber background.

Warning Deep

#ab570a

Pressed amber state.

### Brand Gradient (signature decoration)

Develop

#007cf0 → #00dfd8

Blue-to-teal pair marking the deploy/develop rhythm.

Preview

#7928ca → #ff0080

Violet-to-pink pair used for preview surfaces.

Ship

#ff4d4d → #f9cb28

Coral-to-amber pair used for ship surfaces.

/0.2 · typography

## Typography Scale

A custom geometric sans (Inter as substitute) carries display, body, button, and link. A monospaced face (JetBrains Mono as substitute) carries every technical label. Display sizes use aggressive negative tracking; weight ceiling is 600.

display-xl48px · 600 · 48 / -2.4px
Hero headline.
Build and deploy on the AI Cloud.
display-lg32px · 600 · 40 / -1.28px
Section headlines.
Your frontend, delivered.
display-md24px · 600 · 32 / -0.96px
Card-cluster headlines, pricing tier names.
A compute model for all workloads.
display-sm20px · 600 · 28 / -0.6px
Inline display micro-headings.
Production-grade preview, every push.
body-lg18px · 400 · 28 / 0
Lead paragraphs under section headlines.
Build modern websites and applications with a unified developer experience that handles framework defaults, edge logic, and global distribution out of the box.
body-md16px · 400 · 24 / 0
Default body paragraph.
The platform exists to compress the path from idea to production. Frameworks first, edge by default, observability bundled.
body-md-strong16px · 500 · 24 / 0
Bolded inline body.
The platform exists to compress the path from idea to production.
body-sm14px · 400 · 20 / -0.28px
Secondary body, nav-link text, button-md labels.
Secondary body copy and navigation labels read at this scale across the surface.
body-sm-strong14px · 500 · 20 / -0.28px
Nav CTA labels, table-row emphasis.
Sign Up, Log In, and Ask AI labels all run at this scale.
caption12px · 400 · 16 / 0
Footer secondary lines, badge labels.
Footer fine print sits at this scale; badge labels too.
caption-mono12px · 400 · 16 / 0
Section eyebrows + label captions.
/0.1 · section-eyebrow · platform-surface
code13px · 400 · 20 / 0
Inline code, terminal mockups, command snippets.
// placeholder code — set in JetBrains Mono
button-md14px · 500 · 20 / 0
Small / nav-scale button labels.
Small button label
button-lg16px · 500 · 24 / 0
Marketing-scale pill button labels.
Marketing pill button label

/0.3 · buttons

## Button Variants

Two pill scales coexist deliberately: 100px marketing pills for conversion CTAs and 6px square in-app radii for nav-scale controls. The ink fill carries every primary action; the white pill carries the secondary.

button-primary · 100px pill · 48px tall
button-secondary · 100px pill · canvas fill
button-primary-sm · 100px pill · 36px tall
button-secondary-sm · 100px pill
nav-cta-signup · 6px square · 28px
nav-cta-login · 6px square · canvas
nav-cta-ask-ai · 6px square · hairline border
tab-ghost · 64px pill
icon-button-circular · full-radius circle

/0.4 · cards & containers

## Cards & Containers

Cards never float on heavy drop-shadow. They sit on the page held by an inset hairline ring plus a stacked soft drop. Two marketing scales (8px / 12px) for feature and callout chrome.

card-marketing · 8px · padding 24

#### Frontend, delivered

Default 3-up marketing card. Canvas fill, hairline inset, Level 3 soft stack shadow.

card-marketing-large · 12px · padding 32

#### AI Gateway

Larger callout chrome for "compute model" / "AI Gateway" sized features. Level 4 float-stack shadow.

card-soft · 8px · canvas-soft fill

#### Soft tinted card

Used inside cluster groups — softer than the canvas-soft page body.

template-card · 16:9 thumb · 8px

#### Next.js Starter

Deploy template tile inside the "Deploy your first app" grid.

/0.4b · code-editor-mockup

// placeholder code — set in JetBrains Mono function example() { return null } // nothing real here — chrome only

pricing-card · Hobby

Hobby

$0

Personal projects Up to 3 deployments Community support

pricing-card-featured · Pro

Pro

$20

Everything in Hobby Team collaboration Production analytics

pricing-card · Enterprise

Enterprise

Custom

Everything in Pro SSO + audit log SLA & dedicated support

/0.5 · form-elements

## Form Elements

All form inputs ship at three heights — 32 / 40 / 48px — with the brand's 6px square radius. Hairline border, ink text, canvas fill.

form-input · 40px (default)
form-input-sm · 32px
form-input-lg · 48px
textarea · 6px radius

/0.6 · spacing

## Spacing Scale

Base unit 4px. Marketing bands run 64–96px top/bottom; hero bands stretch to 192px for the gradient to breathe. Card interior padding stays 24–32px; inline gap stays 12–24px.

xxs · 4
xs · 8
sm · 12
md · 16
lg · 24
xl · 32
2xl · 40
3xl · 48
4xl · 64
5xl · 96
6xl · 128
section · 192

/0.7 · border-radius

## Border Radius Scale

Two pill scales coexist by design: 100px marketing CTAs and 6px square in-app controls. Card chrome lands at 8–12px; icon circles at full radius.

0none
4xs
6sm
8md
12lg
16xl
64pill-sm
100pill
∞full

/0.8 · elevation

## Elevation & Depth

Stacked shadows — multiple small offsets layered with 4–12% black opacity — never a single heavy drop. Inset 1px hairline ring always added so the card edge stays crisp.

Level 0 · Flat no shadow, no border
Level 1 · Inset 0 0 0 1px inset
Level 2 · Subtle 1px / 2px drop + inset
Level 3 · Soft 2px / 8px stack + inset
Level 4 · Float 2px / 16px stack + inset
Level 5 · Modal 1px / 16px / 32px stack

/0.9 · signature components

## Signature Components

Four section bands carry the page rhythm: canvas hero, mesh-gradient feature, soft showcase, and the polarity-flipped ink band. Plus the logo strip, banner pill, secondary badge, and inline link.

hero-band · canvas

#### Build and deploy on the AI Cloud.

Pure-white hero surface — display-xl headline, body-lg lead, two pill CTAs. Mesh gradient may sit behind at hero scale.

feature-mesh-band

#### Your frontend, delivered.

Mesh gradient atmospheric backdrop at section scale. Display-lg headline + body-md supporting copy.

showcase-band-light

#### Deploy your first app in seconds.

Soft-canvas band hosting template thumbnails or screenshot grids.

showcase-band-dark

#### A compute model for all workloads.

Polarity-flipped ink band. White display-lg on near-black. Often hosts a code-editor-mockup flush with the band.

Customer · 01 Customer · 02 Customer · 03 Customer · 04 Customer · 05
NewIntroducing the Vercel AI Cloud→ Beta Live Read the announcement

/1.0 · brand-gradient · signature

## Brand Gradient

The brand's entire decoration system collapses into a single multi-stop mesh. Treat it as one unified object — never crop down to a single colour, never reorder the stops, never miniaturise to icon scale. Used at hero scale only.

Develop

#007cf0 → #00dfd8

Preview

#7928ca → #ff0080

Ship

#ff4d4d → #f9cb28

/1.1 · responsive

## Responsive Behavior

A five-step breakpoint ladder. Hero stacks at mobile; 3-up grids collapse to 1-up; tab pill rows enable horizontal scroll; nav collapses to hamburger.

Name | Width | Key Changes
--- | --- | ---
Mobile | < 600px | Hero stacks; nav collapses to hamburger; 3-up grids drop to 1-up; tab pill row enables horizontal scroll.
Tablet | 600–959px | 3-up grids drop to 2-up; nav still horizontal.
Desktop | 960–1199px | Full 3-up grids; pricing 3-up.
Wide | 1200–1399px | Container caps at 1400px content width.
Ultra-wide | ≥ 1400px | Content stays centred at 1400px; bands stretch edge-to-edge in colour.

375
600
960
1200
1440

touch-targets

The button-primary pill renders at ~32px tall in nav contexts and ~48px tall in marketing contexts. Marketing CTAs meet WCAG AAA at all breakpoints; nav buttons inflate touch area through 8px padding on mobile to hit the 44 × 44px floor.

collapsing-strategy

- Nav: full link row + Ask AI / Log In / Sign Up at desktop; collapses to logo + hamburger on mobile.
- Hero: mesh gradient stays centred; headline + body stack vertically at every breakpoint.
- Three-feature row: 3-up → 2-up → 1-up; cards keep their 8px shape across viewports.
- Pricing grid: 3-up at desktop, vertical stack at mobile with the featured tier in the middle.
- Template grid: 5-up → 3-up → 2-up → 1-up; each card keeps 16:9 on its image.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding