Design System
Analysis of Vercel

A near-black, almost monochrome system carried by a single near-white ink, structured with 1px hairlines instead of shadows, and accented by one electric blue — set in Vercel's own Geist typeface with Geist Mono for technical eyebrows.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in Geist — Vercel's own open-source grotesque — with Geist Mono for eyebrows and labels. Hierarchy is built through size and tight negative tracking far more than weight; the display tiers run a punishing −0.06em.

03 — Components

Button Variants

button · primary
The signature inverted CTA — near-white surface, near-black text. Maximum contrast, used sparingly.
button · accent
The lone saturated action — Vercel blue (#0072f5), reserved for high-intent or informational CTAs.
button · secondary
Dark surface with a 1px hairline ring — the default for secondary actions.
button · pill
Fully-rounded utility control for chips, filters, and assistive actions.
04 — Components

Cards & Surfaces

Cards rarely take a fill — they sit on the canvas and are drawn by a single 1px ring, lifting to a brighter white-alpha ring only on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

Built on a 4px base unit (--geist-space); 24px is the default column and section gutter.

07 — Foundations

Border Radius

A small, tight radius family — 6px is the workhorse default; the full pill handles CTAs, tags, and avatars.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The resting state of every card and button (ring at #2e2e2e).
Level 1 — a brightened white-alpha ring on hover, plus a faint drop shadow.
Level 2 — true float: menus, popovers, and modals (--ds-shadow-medium).
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; fluid clamp() type scales the 64px display down; CTAs go full-width.
Tablet768–1023pxTwo-column grids; primary nav condenses to a menu.
Laptop1024–1279pxThree- and four-column grids; content held within the 1400px max width.
Desktop≥ 1280pxFull 1400px canvas with 24px margins; hero gives one object the centre.

Token-first responsiveness. Type and spacing interpolate continuously via clamp()-based --text-fluid-* and --spacing-fluid-* variables, so sizes glide between breakpoints rather than snapping — there are very few hard layout jumps.

Pricing Tiers

Vercel's real plan structure, rendered in the system's own tokens — the featured tier flips to the inverted white surface.

Hobby
$0/mo
For personal projects and experimentation.
  • 100 GB bandwidth
  • Automatic CI/CD
  • Preview deployments
  • Community support
Pro● Most popular
$20/mo
For professional developers and teams shipping to production.
  • 1 TB bandwidth
  • Edge Functions & Middleware
  • Team collaboration
  • Advanced analytics
  • Email support
Enterprise
Custom
For organizations with security and scale requirements.
  • Custom bandwidth
  • SAML SSO & SCIM
  • 99.99% uptime SLA
  • Dedicated support
  • Audit logs

Data Table

A deployments list — dense rows, hairline dividers, monospace IDs, and pill status chips.

IDProjectEnvironmentStatusWhen
dpl_9f2a4cacme-storeProductionReady2m ago
dpl_7b1e88docs-siteProductionReady14m ago
dpl_2c9d10api-edgePreviewBuildingjust now
dpl_55a3f7marketingPreviewReady1h ago
dpl_0e84bbdashboardProductionQueued3h ago
1–5 of 412
123

Auth Forms

Sign-in surfaces use the same ringed cards, monospace labels, and the inverted primary button.

Sign in

Welcome back

OR
Create account

Create your account

OR