Vercel
High-contrast black/white editorial layout with grid-line motifs; three-tier pricing; split sign-up page with provider buttons.
Summary
High-contrast black/white editorial layout with grid-line motifs; three-tier pricing; split sign-up page with provider buttons.
What it is
A well-designed public website, captured by us (hero, key pages and a public flow) as a reference.
Who it’s for
Designers and front-end developers studying landing pages, pricing pages and sign-up entry points.
Key takeaways
- Captured vercel.com: white canvas, oversized black headline, triangle logo mark and thin grid lines; pricing in three columns; sign-up as a split page with provider buttons.
- Color: high-contrast theme; dominant colors #FAFAFA, #3B3B3B, #A0A1A2 (ESTIMATED from our capture).
- Layout: centered hero pattern, stark, editorial, technical mood.
Best practices to borrow
- Use strong black/white contrast and a clear type hierarchy.
- Center one headline, one sentence and at most two actions; let the next section carry detail.
- Borrow structure and hierarchy, not brand assets; check contrast on any accent you take.
Palette preview
Quick links
Screenshots and the step-by-step flow are in the Flow tab.
Dominant palette from our captures
Measured by us from our screenshot(s) of https://vercel.com (median-cut quantization; share = % of pixels). Approximate and not official.
Layout pattern: Centered hero
Observed by us on the captured page(s). See all entries by layout.
How to apply it: Center one headline, one sentence and at most two actions; let the next section carry detail.
Other entries with this layout: Lucide Icons, Iconify, LogoLounge, Slack media kit, Raycast, Arc, Framer, Apple, Multiavatar, unDraw, Notion onboarding flow.
Components
Observed on the captured pages.
- Top nav
- Grid-line hero
- Logo wall
- Three-tier pricing
- Provider sign-in buttons
Landing → Pricing → Sign-up entry
Captured with a headless browser. The capture stopped at the sign-up or entry page: no forms were submitted and no login walls were passed. These screenshots are fair-use reference captures; the sites, content and marks belong to their owners.
Mermaid source
flowchart LR
S1["Landing"] --> S2
S2["Pricing"] --> S3
S3["Sign-up entry"]
Our analysis
Captured vercel.com: white canvas, oversized black headline, triangle logo mark and thin grid lines; pricing in three columns; sign-up as a split page with provider buttons.
Similar to this
Ranked by shared color theme, layout, category, type and mood tags.
Downloads
PDF: research notes made for this library; third-party images inside follow the credits in their captions. Screenshots are fair-use reference captures; the sites and their content belong to their owners. License / terms of the source: Screenshots: fair-use reference captures; site content © Vercel
DESIGN.md for AI coding agents
Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.
# DESIGN.md · Vercel (WR-003) > Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens. ## Overview - Type: Website Reference · Category: I. Website References - Platforms: Web - Color theme: High-contrast · Layout pattern: Centered hero · Mood: Stark, editorial, technical - License / terms: Screenshots: fair-use reference captures; site content © Vercel High-contrast black/white editorial layout with grid-line motifs; three-tier pricing; split sign-up page with provider buttons. ### Analysis (ours) Captured vercel.com: white canvas, oversized black headline, triangle logo mark and thin grid lines; pricing in three columns; sign-up as a split page with provider buttons. ## Color tokens No official color tokens documented for this entry. ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official: - `#FAFAFA` ~76% - `#3B3B3B` ~2% - `#A0A1A2` ~1% - `#E0E1E2` ~1% - `#BDBCBC` ~1% ## Typography No official type scale documented for this entry; use the product’s own typography guidance. ## Spacing, radii, shadows Not documented for this entry. Do not invent values; derive from your own design system. ## Components - Top nav - Grid-line hero - Logo wall - Three-tier pricing - Provider sign-in buttons ## Layout rules - Observed layout pattern: **Centered hero** (from our captures). - Public flow (captured, stopped before any form submission): Landing (https://vercel.com/) → Pricing (https://vercel.com/pricing) → Sign-up entry (https://vercel.com/signup) ## Do’s and don’ts - Do: Use pure black/white contrasts and strong type hierarchy. - Don’t: Don’t use mid-grays for important text. - Do: follow the source’s license/terms listed above. - Don’t: present ESTIMATED colors as official tokens. ## Sources - https://vercel.com - Capture: https://vercel.com/ - Capture: https://vercel.com/pricing - Capture: https://vercel.com/signup - Library entry: https://design-library-byt.pages.dev/entry/WR-003