# Vercel: brand book and build spec

A black triangle on a near-white page, one open typeface with tight negative tracking, grays for everything and color only as a signal; voice and motion written as engineering rules.

From unfairly.ai/brand-guidelines/vercel, checked 2026-10-31. Unofficial study; not affiliated with Vercel.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Infrastructure you can see through. Vercel strips the page to gray, one face and one shape so the customer’s product and the number beside it are the only things that stand out. Based on: From the published grayscale Geist system, the Swiss-inspired Geist face, the single-shape logo, and a homepage built from customer screens and one-line proof sentences.

## Purpose

Headline: Vercel frees the world to ship what’s next. (observed; https://vercel.com/about)

Story: Vercel started as the company behind Next.js and frontend hosting, called itself the Frontend Cloud, and now presents itself as agentic infrastructure: the platform where people and coding agents build and ship software together. Its design team publishes the Geist design system, the Geist typeface and a public list of web interface guidelines. (observed)

| Value | What it means in the work | Source |
|---|---|---|
| Simplicity | One of the three design principles Geist embodies (paraphrase). | published: https://vercel.com/font |
| Minimalism | Second of the three Geist principles; drawn from the Swiss design movement (paraphrase). | published: https://vercel.com/font |
| Speed | Third Geist principle; also the product promise: ship instantly (paraphrase). | published: https://vercel.com/font |
| Care and craft | The design team describes itself as stewards of the brand who imbue work with care and craft (paraphrase). | published: https://vercel.com/design |

## Fixed and flexible

Never changes:
- The black triangle
- Geist Sans and Geist Mono
- Grayscale ground and ink; color only as signal
- Tight negative tracking on headlines
- Sentence-case marketing copy

The one thing that varies: Which product screens and customers appear, the hero object’s lighting, light or dark theme, seasonal touches to the nav mark.

## Positioning

- **Statement**: Vercel is agentic infrastructure for every app and agent. (observed)
- **Category**: Agentic infrastructure (homepage, 2026); previously the Frontend Cloud (observed)
- **Audience**: Developers, platform and design engineers, and the coding agents that work for them; from startups to enterprises (paraphrase of navigation: Platform Engineers, Design Engineers, Enterprise). (observed)
- **Problem**: Infrastructure was built for humans clicking dashboards; agents need infrastructure that fits how they work (paraphrase). (observed)
- **Promise**: Deploy instantly and scale from zero to millions, whether you or your agents wrote the code (paraphrase). (observed)
- **Differentiators**: Agent-native interfaces: API, CLI, MCP and Skills so coding agents can deploy directly.; A full agent stack: AI SDK, AI Gateway (400+ models), Sandbox, Workflows.; Fluid Compute and global delivery that scale from zero to millions instantly.; Makers of Next.js, Turbo and the AI SDK: the frameworks developers already use.

## Messaging

Boilerplate (observed): Vercel is agentic infrastructure for every app and agent: the platform where humans and agents build software together.

Taglines:
- Agentic Infrastructure (Homepage H1 and page title)
- Built by you, or your agents (Homepage closing CTA)
- Vercel frees the world to ship what’s next (About page headline)
- The Frontend Cloud (Previous positioning, still shown as the sample banner on the Geist colors page)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| For coding agents | Agents deploy in their native language, through Vercel's API, CLI, MCP and Skills. | Notion powers millions of agent conversations daily on Vercel. | observed |
| To ship apps and agents | Ship apps and agents in sandboxed VMs with durable backends, scaling from zero to millions. | Zapier serves over 100 million monthly website visits on Vercel.; Apps and agents run with durable backends, powered by 400+ models (homepage copy). | observed |
| Automated by agents | Infrastructure that investigates errors, plans fixes and opens PRs on its own. | Mintlify powers documentation for over 20,000 companies on Vercel. | observed |

## Voice

Tone words: Precise, Concise, Confident, Developer-native.

Traits:
- Minimal, but not Bare (published)
- Meticulous, but not Fussy (published)
- Fast, but not Rushed (published)
- Playful, but not Jokey (published)

- Write in second person and active, action-oriented language: say "Install the CLI", not "The CLI will be installed" (Web Interface Guidelines, paraphrase).
- As few words as possible, and as few unique terms as possible.
- Marketing pages use sentence case; product headings and buttons use Title Case (Chicago).
- Homepage headlines are short claims about what you can build, often with no full stop ("Agentic Infrastructure", "Recently shipped").
- Proof is one named customer and one number per section, written as a plain sentence.
- Positive, problem-solving framing even for errors; every error says how to fix it.

Rules a copy check enforces:
- Sentence case headlines
- Headings and buttons in the product use Title Case (Chicago); the homepage nav buttons follow it (Get a Demo, Log In, Sign Up)
- Active voice: "Install the CLI", not "The CLI will be installed"
- Write in second person; avoid first person
- Say "&", not "and"
- Use numerals for counts: "8 deployments", not "eight deployments"
- Separate numbers and units with a (non-breaking) space: 10 MB, not 10MB
- Use the ellipsis character … and end follow-up or loading labels with it (Rename…, Saving…)
- Prefer curly quotes over straight quotes
- Button labels name what happens (Save API Key, Deploy Project), never bare Submit, OK or Continue
- Error messages say how to fix the problem, not just what went wrong
- American spelling
- American spelling
- In text-only contexts the brand may be written as the ▲ symbol (U+25B2)

Their words: ship, deploy, agents, infrastructure, instantly, scale.
Never: NextJS, Next JS, Eve, EVE, Submit, OK, Continue (as a button label).

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Background 2 | #FAFAFA | surface | The homepage ground and every band; scrolled nav. |
| Background 1 | #FFFFFF | paper | Default element background: secondary buttons, bubbles, inputs. |
| Gray 1000 | #171717 | ink | Primary text and icons; primary buttons; customer logos. |
| Gray 900 | #4D4D4D | ink_muted | Secondary text: nav links, the gray half of leads, footer links. |
| Gray 400 | #EBEBEB | hairline | Default border, drawn as a 1px ring. |
| Gray 700 | #8F8F8F | icon | Tertiary icons and high-contrast fills. |
| Blue 700 | #0072F5 | accent_secondary | Information, links in product, small product signals. |
| Red 700 | #E5484D | error | Errors and destructive states. |
| Amber 700 | #FFB224 | warning | Warnings. |
| Green 700 | #45A557 | success | Success. |
| Black | #000000 | night | Dark theme ground (Background 2 dark) and the logo on light. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Geist Sans | Open (SIL OFL 1.1). Vercel in collaboration with basement.studio; npm geist 1.9.0, Google Fonts, or .zip | Geist | Geist, "Helvetica Neue", Arial, sans-serif |
| body | Geist Sans | Open (SIL OFL 1.1) | Geist | Geist, "Helvetica Neue", Arial, sans-serif |
| mono | Geist Mono | Open (SIL OFL 1.1) | Geist Mono | "Geist Mono", ui-monospace, Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | Geist | 64px | 48px | 1 | -3.84px | 400 |
| Section H2 | --text-display-l-* | Geist | 56px | 32px | 1 | -3.36px | 450 |
| Proof sentence (two-tone lead) | --text-lead-* | Geist | 24px | 24px | 1.3333 | -0.96px | 450 |
| Card title | --text-title-m-* | Geist | 24px | 24px | 1.1 | -1.2px | 450 |
| Hero pillar lines | --text-body-l-* | Geist | 16px | 16px | 1.5 | -0.32px | 450 |
| Button (pill) | --text-button-16-* | Geist | 16px | 16px | 1.5 | 0px | 500 |
| Nav link / list / footer link / card copy | --text-body-s-* | Geist | 14px | 14px | 1.4286 | 0px | 400 |
| Chat bubble | --text-copy-13-* | Geist | 13px | 13px | 1.3846 | 0px | 400 |
| Badge | --text-label-11-* | Geist | 11px | 11px | 1.818 | 0px | 500 |
| Phone hero subline | --text-mono-16-* | Geist Mono | 16px | 16px | 1.5 | 0px | 400 |
| Status label | --text-mono-12-* | Geist Mono | 12px | 12px | 1.6667 | 0px | 500 |

## Layout

Measured on https://vercel.com/design/brands: Vercel's public brand page and the Geist design system (vercel.com/geist: colors, typography, materials, grid, button, terminal), the Geist font page, and the Web Interface Guidelines, read 2026-10-31; color values from the Geist CSS tokens in light theme.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 24px | 24px |
| Section padding | 208px | 80px |
| Container max width | 1392px | full |
| Hero text width | max 444px | full |
| Grid columns | 2 | 1 |
| Gutter | 20px | 20px |
| Card gap | 20px | 20px |
| Navigation height | 64px | 64px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Vercel's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 64px
   - Phone: 64px: triangle + hamburger
   - Sticky; #FAFAFA with a 1px rgba(0,0,0,0.08) shadow line once scrolled
2. Hero
   - Desktop: y 64-900
   - Phone: y 64-844, centred stack
   - Logo row inside the hero section at y 816-861
3. Customer 1 (Notion)
   - Desktop: y 1108-1725
   - Phone: y 1004-1693
   - 921px screen, 333px text column
4. Customer 2 (Zapier)
   - Desktop: y 1981-2598
   - Phone: y 1773-2421
   - Mirror of customer 1
5. Customer 3 (Mintlify)
   - Desktop: y 2853-3470
   - Phone: y 2501-3182
   - Same as customer 1
6. Recently shipped
   - Desktop: y 3678-4395
   - Phone: y 3342-4310
   - Tall card left, two stacked right
7. Closing CTA
   - Desktop: y 4672-4808
   - Phone: y 4523-4735
   - Onboard your agent chip
8. Footer
   - Desktop: y 5084-5930
   - Phone: y 4987-6905
   - 6 columns desktop, 2 phone

## Page anatomy

How Vercel's own landing pages are built, part by part (observed; https://vercel.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: Desktop: triangle logo at left, four text links (Products ▾, Resources ▾, Enterprise, Pricing), three buttons at right (Get a Demo, Log In, Sign Up). Phone: triangle left, two-line hamburger right.
- ground: Transparent over the #FAFAFA page at rest (reads #FAFAFA, no line). Sticky; once scrolled: #FAFAFA fill with box-shadow 0 1px 0 rgba(0,0,0,0.08). Build the at-rest state.
- height: 64px desktop and phone
- border: none at rest
- logo: variant Vercel triangle symbol only, black #000000 as in the supplied file (vercel-triangle-logo.svg); do not recolor; px 21x18 desktop and phone; position x 24, y 23
- links: count 4; labels Products,Resources,Enterprise,Pricing; size 14px/20px; weight 400; color #4D4D4D; alignment left, immediately after the logo: each link is a 32px-tall hit box with 12px side padding starting x 65, so label text starts at x 77, 171, 276, 365; Products and Resources carry a 14px chevron-down icon (nav-chevron-down.svg, #4D4D4D) after the label (chevrons at x 137 and 242). Link hit boxes: Products x 65-159, Resources x 159-263, Enterprise x 264-353, Pricing x 353-421 (labels at x 77, 171, 276, 365)
- actions: Right-aligned to x 1416, 12px gaps, all 32px tall with 6px radius and 14px/21px Geist 500 labels: Get a Demo (101px, #FFFFFF fill, 1px #EBEBEB ring as box-shadow, #171717 text, x 1152), Log In (64px, same white style, x 1265), Sign Up (75px, #171717 fill, #FFFFFF text, x 1341). Labels are Title Case.
- sticky: true
- phone: 64px: triangle 21x18 at x 24 y 23; hamburger 24x24 at x 342 y 20 (phone-menu-icon.svg: two 16px lines, 1.5px stroke, round caps, #171717, at y 8 and 16 of the box); no buttons in the bar

**Hero**
- summary: Three columns on one #FAFAFA ground: headline and two pill CTAs at left, a big black triangle lit from above in the centre, three short pillar lines at right; a justified row of six customer logos along the bottom of the fold.
- desktop: section y 64-900 (height = 100svh - 64px, max 1100; 836px at the 1440x900 reference). Content column x 24-1416; headline H1 at x 24, y 328, box 444px wide; two lines broken as "Agentic" / "Infrastructure"; 64px/64px Geist 400, tracking -3.84px, #171717. Text block (H1 + buttons) spans y 328-528, vertically centred around y 428; cta y 488-528 (40px below the H1 bottom at 456 is 32px gap): Deploy now pill x 24, 124x40, #171717 fill, #FFFFFF 16px/24px Geist 500, padding 0 12px; Talk to sales pill x 160, 130x40, #FFFFFF fill, 1px #EBEBEB ring, #171717 text. Gap 12px. Radius 9999px; media Centred triangle: a 222x222 box at x 609, y 337 holds an equilateral #000000 triangle 192px wide, apex at (720, 337), base y 503 from x 624 to 816. Around it a soft grey drop shadow below and a faint white halo above (resting frame of a WebGL canvas). Place hero-triangle-glow-desk.png (560x500) at x 480, y 120 on the #FAFAFA ground; it contains the triangle and its lighting. No rings, no gradient; right Three lines at x 1060, y 385, 417, 449 (32px pitch): "For coding agents", "To ship apps and agents", "Automated by agents"; 16px/24px Geist 450, tracking -0.32px, #171717; no bullets, no icons; logos Row y 816-861, vertically centred on y 838: six #171717 logos justified edge to edge between x 24 and x 1416 with equal 152px gaps: Meta 88x18 (x 24), DoorDash 147x17 (x 264), OpenAI 78x21 (x 563), SpaceX 132x16 (x 792), The Weather Company 58x45 (x 1076), Polymarket 130x30 (x 1286)
- phone: order nav, triangle, H1, mono subline, two full-width buttons, logo marquee; alignment centred; sizes Section y 64-844. Triangle: 195px box at x 97, y 176 (place hero-triangle-glow-phone.png 390x290 at x 0, y 80). H1 y 444-556, 48px/56px Geist 400, tracking -2.88px, centred, two lines "Agentic" / "Infrastructure". Subline y 572, Geist Mono 16px/24px 400 #4D4D4D centred: "For coding agents". Deploy now 342x40 at x 24, y 624 (full width pill); Talk to sales 342x40 at y 676. Logo marquee y 756-796: same six logos at about 88% size (Meta 79x16, DoorDash 130x15, OpenAI 67x18, SpaceX 116x14, Weather 51x40, Polymarket 113x26) with 56px gaps, overflowing the screen edges; in the reference frame SpaceX starts near x 12, The Weather Company near x 182, Polymarket near x 290
- at rest: Triangle and its lighting fully faded in; phone subline shows "For coding agents" (it types through the three pillar lines; animation only); phone logo row frozen (it scrolls as a marquee; animation only). A "Drop to deploy" label exists in the canvas but is hidden at rest: do not show it.
- media: hero-triangle-glow-desk.png / hero-triangle-glow-phone.png (resting frame captured from the live canvas)
- type: H1 Geist 400 64/64 -3.84px desktop, 48/56 -2.88px phone
- cta: two pills: black primary, white with hairline ring
- proof: customer logo row (Meta, DoorDash, OpenAI, SpaceX, The Weather Company, Polymarket)

**Customer 1: Notion (screen left)**
- summary: Customer section: H2, a real product screen fading into the page, and a two-tone proof sentence with a feature list.
- ground: #FAFAFA
- desktop: H2 at x 24, y 1108, max 673px wide, two lines "Build agents on infrastructure" / "that thinks like them"; 56px/56px Geist 450, tracking -3.36px, #171717. Screen at x 24, y 1264 (44px below the H2): notion-desktop-light.webp. Product screen container 921x461 (overflow hidden, no radius, no border, no shadow) holding the image at full width; its bottom 160px is covered by linear-gradient(to top, #FAFAFA, transparent) so the screen dissolves into the page. Text column at x 1083 (right-aligned to 1416), proof sentence at y 1380 (2 lines: "Notion powers millions" dark / "of agent conversations daily on Vercel." gray), Features label y 1484, items y 1510-1608. Next section H2 starts 256px after the screen container ends (container ends y 1725, next H2 y 1981)
- phone: H2 at y 1004, 32px/40px Geist 450, tracking -1.6px, three lines broken exactly "Build agents on" / "infrastructure that" / "thinks like them", left-aligned at x 24. Screen 342x257 visible (notion-mobile-light.webp, 342x273 image, bottom 160px faded) at y 1168. Proof sentence y 1465 (2 lines), Features y 1569, items to y 1693. 80px to the next H2
- anatomy:
  - Features: Durable Orchestration / Sandboxed Environments / AI Model Gateway / Fluid Compute
  - Text column 333px wide: proof sentence 24px/32px Geist 450, tracking -0.96px, subject and number in #171717 and the rest in #4D4D4D (one <p>, the dark part a <span>); 40px below it a list: "Features" label 14px/20px 400 #4D4D4D then four items 14px/20px Geist 500 #171717 at 26px pitch, no bullets
  - Text column is vertically centred on the screen container
- components:
  - two_tone_lead
  - feature_list
  - fading_screen

**Customer 2: Zapier (screen right)**
- summary: Customer section: H2, a real product screen fading into the page, and a two-tone proof sentence with a feature list.
- ground: #FAFAFA
- desktop: H2 at x 495 (aligned to the screen's left edge, text left-aligned), y 1981, two lines "Ship apps that scale from" / "zero to millions instantly"; same H2 style. Screen at x 495, y 2137: zapier-desktop-light.webp, Product screen container 921x461 (overflow hidden, no radius, no border, no shadow) holding the image at full width; its bottom 160px is covered by linear-gradient(to top, #FAFAFA, transparent) so the screen dissolves into the page. Text column at x 24: proof sentence y 2253 ("Zapier serves over 100 million" dark / "monthly website visits on Vercel." gray), Features label y 2357, items y 2383-2481
- phone: H2 y 1773, two lines "Ship apps that scale from" / "zero to millions instantly"; screen at y 1897 (zapier-mobile-light.webp); proof y 2193; Features y 2297; items to y 2421
- anatomy:
  - Features: Global Delivery / Deployment Environments / Serverless Functions / Web Application Firewall
  - Text column 333px wide: proof sentence 24px/32px Geist 450, tracking -0.96px, subject and number in #171717 and the rest in #4D4D4D (one <p>, the dark part a <span>); 40px below it a list: "Features" label 14px/20px 400 #4D4D4D then four items 14px/20px Geist 500 #171717 at 26px pitch, no bullets
  - Mirror of section 1: screen right, text left
- components:
  - two_tone_lead
  - feature_list
  - fading_screen

**Customer 3: Mintlify (screen left)**
- summary: Customer section: H2, a real product screen fading into the page, and a two-tone proof sentence with a feature list.
- ground: #FAFAFA
- desktop: H2 at x 24, y 2853, two lines "Host platforms that" / "serve every customer"; same H2 style. Screen at x 24, y 3009: mintlify-desktop-light.webp, Product screen container 921x461 (overflow hidden, no radius, no border, no shadow) holding the image at full width; its bottom 160px is covered by linear-gradient(to top, #FAFAFA, transparent) so the screen dissolves into the page. Text column at x 1083: proof sentence y 3110 in three lines ("Mintlify powers" / "documentation for over" / "20,000 companies on Vercel.", dark through "20,000", gray from "companies"), Features label y 3246, items y 3272-3370
- phone: H2 y 2501, two lines "Host platforms that" / "serve every customer"; screen at y 2625 (mintlify-mobile-light.webp); proof y 2922 (3 lines); Features y 3058; items to y 3182
- anatomy:
  - Features: Tenant Isolation / Domain Management / Custom SSL Certificates / Preview URLs
  - Text column 333px wide: proof sentence 24px/32px Geist 450, tracking -0.96px, subject and number in #171717 and the rest in #4D4D4D (one <p>, the dark part a <span>); 40px below it a list: "Features" label 14px/20px 400 #4D4D4D then four items 14px/20px Geist 500 #171717 at 26px pitch, no bullets
- components:
  - two_tone_lead
  - feature_list
  - fading_screen

**Recently shipped**
- summary: One-line H2 and three linked product cards: a tall card left, two short cards stacked right.
- ground: #FAFAFA
- desktop: H2 "Recently shipped" at x 24, y 3678, one line, H2 style. Cards from y 3815 (81px below the H2): Backends 685x580 at x 25; Agents 685x280 at x 730, y 3815; Sandbox 685x280 at x 730, y 4115 (20px gaps). Section ends y 4395
- phone: H2 y 3342 (32/40). Cards stacked full width 340px at x 25, 20px gaps: Backends 340x425 (y 3463), Agents 340x191 (y 3908), Sandbox 340x191 (y 4119). Descriptions wrap at 170px. Phone art: Backends uses backends-page-curl-corner-phone.png (112x112) at the card bottom-right; Agents shows only the first bubble, scaled to 129x41, top-right 12px inset (bubbles 2-3 and the avatar hidden); Sandbox uses sandbox-window-stack-phone.png (148x190) flush right, full card height, with the text over the left part
- anatomy:
  - Card: #FAFAFA fill, 6px radius, 1px #EBEBEB ring (box-shadow 0 0 0 1px), whole card is a link, no hover state at rest
  - Card text pinned bottom-left, 20px inset: title 24px/26.4px Geist 450, tracking -1.2px, #171717; 6px below, description 14px/20px Geist 400 #4D4D4D with explicit line breaks as given below (desktop); description bottom sits 20px above the card bottom
  - Backends (tall card): otherwise empty; in its bottom-right corner a 113x113 page-curl: a blue sheet (#52AEFF to #0072F5 vertical gradient with faint white 1px grid lines) peeking from under a white folded corner with a soft grey shadow on the fold. Use backends-page-curl-corner.png at the card's bottom-right (x 598, y 4283). Text: "Backends" / "Run Python backends, queues, and" + line break + "daemons on Vercel, alongside your frontend."
  - Agents: three white chat bubbles at the right, 13px/18px Geist #171717, padding 16px, each bubble set in exactly 2 lines (explicit line break where quoted), 20px radius, 1px #EBEBEB ring and box-shadow 0 1px 2px rgba(0,0,0,0.04): bubble 1 (x 1176, y 3839, 215x68) "@data-agent" in 600 then "How did revenue trend last quarter by region?", with a tail at its bottom-right (bubble-tail.svg); bubbles 2 and 3 (x 1095, 265x68, y 3919 and 3993, 6px apart) "Pulled Q3 revenue from the warehouse. EMEA grew 18%, ahead of plan." and "North America dipped 4% in August. I posted the chart in channel #revenue.", bubble 3 broken after "August."; each tail (bubble-tail.svg) overlaps its bubble corner by 7px so bubble and tail read as one continuous white shape; the last bubble has its tail at its bottom-left beside a 32px white circular avatar holding the 16px agent icon (agent-robot-icon.svg) at x 1050, y 4028. Text: "Agents" / "Build agents and run them" + line break + "on Vercel's agent stack."
  - Sandbox: right 492px of the card filled by sandbox-window-stack.png (a field of small white window outlines with three grey dots, one centred window holding a terminal-bracket icon), fading out to the left over 256px into #FAFAFA. Text: "Sandbox" / "The safest way to run code you didn't write."
  - Hover-only (animation only, not at rest): Backend / Queue / Daemon chips in Geist Mono on the blue sheet
- components:
  - card
  - chat_bubble

**Closing CTA**
- summary: Centred one-line H2 and two pills.
- ground: #FAFAFA
- desktop: H2 "Built by you, or your agents" centred, x 401-1039, y 4672, one line, H2 style. Buttons y 4768, centred as a pair with 11px gap: Deploy now 124x40 (x 519, #171717 pill); "Onboard your agent" chip 267x40 (x 654): white pill with 1px #EBEBEB ring holding, from the left, three overlapping 22px white circles with 14px third-party agent marks (onboard-agent-icon-1..3.svg at x 669, 685, 701), the label 16px Geist 500 #171717 at x 728, and a 16px #8F8F8F copy icon (copy-icon.svg) at x 891. Section ends about y 5084 (footer)
- phone: H2 y 4523, 32/40, centred, two lines "Built by you, or" / "your agents". Deploy now 124x40 centred at y 4643; Onboard your agent 267x40 centred at y 4695
- anatomy:
  - About 270px of empty #FAFAFA above the H2 and about 280px below the buttons
- components:
  - button_primary_pill
  - onboard_chip

**Footer**
- summary: No ground change and no top border: 12 link groups in a 6-column grid (two rows), then the triangle, then a status line and a theme switcher.
- ground: #FAFAFA (same as page); footer box starts y 5084; first headings at y 5136 (52px in); 40px bottom padding
- anatomy:
  - Grid: 6 columns, column pitch 236px (x 24, 260, 496, 732, 968, 1204), 212px wide each
  - Row 1 group headings at y 5136; row 2 headings at y 5456. Heading 14px/20px Geist 500 #171717. First link 34px below the heading top, then 28px pitch; links 14px/20px Geist 400 #4D4D4D
  - "New" badges: 11px/20px Geist 500 #171717 on a #EBEBEB pill, 40x20, 6px after the label
  - Agent Stack: AI SDK / AI Gateway / Sandbox / Workflows / Connect [New] / Passport [New] / eve [New]
  - Core Platform: CI/CD / Content Delivery / Fluid Compute / Observability
  - Security: Platform Security / WAF / Bot Management / BotID
  - Tools: Vercel Drop / Vercel Agent / Vercel Plugin / Agent Skills / Domains / v0 (Geist Mono)
  - Frameworks: eve [New] / Next.js / Nuxt / SvelteKit / Nitro / Turborepo / Tanstack Start / FastAPI / All frameworks
  - SDKs: Vercel SDK / Workflow SDK / Flags SDK / Chat SDK / Queues SDK / Streamdown
  - Build: AI Apps / Web Apps / Marketing Sites / Platforms / Commerce / Platform Engineers / Design Engineers
  - Learn: Docs / Blog / Changelog / Knowledge Base / Academy / Articles / Community / Is Agentic
  - Explore: Customers / Marketplace / Templates / Partner Finder / Vercel + AWS
  - Company: About / Careers / Press / Events / Startups / Shipped on Vercel / Open Source Program / Enterprise / Pricing / Help
  - Legal & Trust: Privacy Policy / Terms of Service / Cookie Policy / DPA / Acceptable Use Policy / Legal (all documents) / Trust Center / Status
  - Social: GitHub / X / LinkedIn / YouTube / Instagram
  - Triangle 16x14 #171717 at x 24, y 5801
  - Status line y 5863: an 8px #0070F3 dot at x 24, then "ALL SYSTEMS NORMAL." in Geist Mono 12px/20px 500 uppercase #0070F3 at x 40
  - Theme switcher at right, y 5861: a 72x24 pill with a 1px #EBEBEB ring holding three 16px #8F8F8F icons (theme-system.svg, theme-light.svg, theme-dark.svg) at x 1316, 1340, 1364; then a 16px #8F8F8F icon (footer-panel-icon.svg) at x 1396
  - No copyright line, address or phone number is shown on the homepage footer (observed)
  - Page ends at y 5930
- phone: Same groups in 2 columns (x 24 and x 205, 159px wide), in pairs: Agent Stack | Core Platform (y 4999), Security | Tools (y 5251), Frameworks | SDKs (y 5487), Build | Learn (y 5819), Explore | Company (y 6099), Legal & Trust | Social (y 6459); follow these y values (about 42px from the last link line of the taller group to the next heading). Footer top: first heading 12px below y 4987. Theme switcher on its own row under the status line, left-aligned. Triangle then status line ("ALL SYSTEMS NORMAL." when loaded) at the bottom; page ends at 6905

**On dark grounds**
- note: The homepage has no dark band. In dark theme (system setting) Geist swaps: ground #000000 / #0A0A0A, text #EDEDED and #A1A1A1, primary button #EDEDED fill with black text, logo white. Build the light theme.
- secondary button: #0A0A0A fill, 1px rgba(255,255,255,0.14) ring
- link: #EDEDED
- muted text: #A1A1A1
- hairline: #2E2E2E
- logo variant: white triangle

## Components

- **button primary pill** (observed): fill #171717, text #FFFFFF, border none, radius pill, padding 0 12px, height 40, example Deploy now (124x40), text style 16px/24px Geist 500, font size 16, weight 500, padding x 12, face body
- **button secondary pill** (observed): fill #FFFFFF, text #171717, border none, ring #EBEBEB, ring px 1, radius pill, padding 0 12px, height 40, example Talk to sales (130x40), text style 16px/24px Geist 500, font size 16, weight 500, padding x 12, face body, css box-shadow: 0 0 0 1px #EBEBEB
- **nav button primary** (observed): fill #171717, text #FFFFFF, radius 6, height 32, padding 0 12px, example Sign Up (75x32), text style 14px/21px Geist 500, font size 14, weight 500, padding x 12, face body
- **nav button secondary** (observed): fill #FFFFFF, text #171717, ring #EBEBEB, ring px 1, radius 6, height 32, padding 0 12px, example Get a Demo (101x32), Log In (64x32), text style 14px/21px Geist 500, font size 14, weight 500, padding x 12, face body, css box-shadow: 0 0 0 1px #EBEBEB
- **card** (observed): fill #FAFAFA, ring #EBEBEB, ring px 1, radius 6, padding 20px (text pinned bottom-left), example Recently shipped cards
- **badge** (observed): fill #EBEBEB, text #171717, radius pill, height 20, padding 0 8px, text style 11px/20px Geist 500, example New
- **chat bubble** (observed): fill #FFFFFF, text #171717, ring #EBEBEB, ring px 1, radius 20, padding 16px, text style 13px/18px Geist 400; @handle 600, example Agents card
- **onboard chip** (observed): fill #FFFFFF, text #171717, ring #EBEBEB, ring px 1, radius pill, height 40, example Onboard your agent (267x40), anatomy 3 overlapping icon circles, label, copy icon
- **two tone lead** (observed): text #4D4D4D, on #171717, text style 24px/32px Geist 450 -0.96px, anatomy Dark span for the customer, verb and number; gray for the rest
- **feature list** (observed): text #171717, text style label 14/20 400 #4D4D4D, items 14/20 500 #171717, 26px pitch
- **fading screen** (observed): anatomy 921x461 container, image full width, bottom 160px linear-gradient(to top, #FAFAFA, transparent)

States (hover, focus, pressed, disabled) weren't measured; define them before you build.

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| reduced-motion |  |  | Honor prefers-reduced-motion and give every animation a reduced variant | published |
| compositor-only |  |  | Animate transform and opacity only; never transition: all; list the properties you animate | published |
| css-first |  |  | Prefer CSS, then the Web Animations API, then JS libraries | published |
| loading-delay |  | 150ms | Spinners and skeletons wait ~150–300ms before showing and stay ~300–500ms to avoid flicker | published |
| tooltip-timing |  |  | Delay the first tooltip in a group; its peers open with no delay | published |
| autoplay-limit |  | 5000ms | No autoplay except muted, non-essential loops; motion longer than 5s alongside content needs pause, stop or hide | published |
| hero-glow (observed) |  |  | The hero triangle sits in a WebGL canvas that fades in a soft shadow and halo; build the resting frame (supplied image), never the animation | observed |
| typing-subline (observed) |  |  | On phone the hero subline types out "For coding agents", "To ship apps and agents", "Automated by agents" in Geist Mono; the resting frame shows "For coding agents" | observed |
| logo-marquee (observed) |  |  | On phone the six customer logos scroll horizontally as a marquee; on desktop they sit still in one justified row | observed |

## Icon tokens

Grid 16px viewBox (data-slot="geist-icon"), stroke filled outline paths (fill-rule evenodd), not stroked lines; drawn as about 1.5px outlines at 16px (observed).
| Name | Size | Use |
|---|---|---|
| default | 16px |  |
| small | 14px |  |
| inline-large | 20px |  |

## Signature moves

### The triangle

Where: The logomark, the hero object, the footer mark, the terminal prompt and text-only brand mentions (▲).
Do: An equilateral black triangle, nothing else. Hero: 192px-wide triangle centred in a 222px box at the centre of the page, lit from above with a soft drop shadow and a faint white halo (supplied image hero-triangle-glow-*.png). Nav: 21x18px. Footer: 16x14px. Prompt: ▲ U+25B2.
Don't: Add a gradient, outline, rotation or a second shape to the triangle, or use it more than once per view.

### Monochrome page, color as signal

Where: Every marketing page.
Do: #FAFAFA ground, #171717 ink, #4D4D4D secondary, #EBEBEB hairlines. Color appears only as a small status or product signal (the blue status dot, the blue sheet in the Backends card). Customer logos are flattened to #171717.
Don't: Tint a section, color a headline, or show customer logos in their own colors.

### Two-tone proof sentence

Where: Beside each product screenshot.
Do: A 24/32px Geist 450 sentence (-0.96px tracking) whose subject and number are Gray 1000 #171717 and the rest Gray 900 #4D4D4D: "<Customer> <verb> <number>" dark, "<rest of sentence> on Vercel." gray.
Don't: Bold the number or set the whole sentence in one color.
Example: "Zapier serves over 100 million monthly website visits on Vercel.", with "Zapier serves over 100 million" set as color.

### Pill CTAs with hairline rings

Where: Hero and closing CTA.
Do: 40px-tall full pills, 16px Geist 500, 12px side padding. Primary #171717 fill, white text. Secondary #FFFFFF fill with a 1px #EBEBEB ring drawn as box-shadow. 12px gap.
Don't: Give the secondary a gray fill or a visible border color darker than #EBEBEB; use pills in the nav (nav buttons are 32px with a 6px radius).

### Customer product screens that fade into the page

Where: The three customer sections.
Do: A real customer UI screenshot 921px wide (desktop) whose bottom 160px fades into #FAFAFA with linear-gradient(to top, #FAFAFA, transparent). No frame, no shadow, no radius on the image itself.
Don't: Put the screenshot in a browser chrome, a device frame or a card.

### Geist Grid guides

Where: Marketing pages, docs landing pages, feature breakdowns.
Do: Two-dimensional cell-and-guide layouts where the 1px rule lines and cell borders are part of the design; solid cells occlude guides; guides are decorative (aria-hidden).
Don't: Nest grids more than one level, or use the grid when guides are not visible.

## Messaging: rules

The homepage reduces Vercel to one category name, three pillar lines and three customer proofs, each a single sentence beside a product screen. The closing line hands the work to the reader or their agents.

Why it works: Each section pairs one claim with one named customer and one number, so the proof does the selling and the headline stays short.

- One H1 naming the category, no subhead
- Three pillar lines beside the hero: For coding agents / To ship apps and agents / Automated by agents
- Every product section = H2 claim + real customer UI + two-tone proof sentence + 4 feature names
- Close with one sentence and two CTAs

Sources: https://vercel.com/, https://vercel.com/about

## Voice: rules

Plain, declarative and short. Product UI follows strict Title Case and action labels; marketing pages use sentence case. Numbers are numerals, units get a space, ellipses are real characters.

Why it works: The Web Interface Guidelines treat copy as interface: fewer words and consistent nouns make the product faster to read.

|  |  |
|---|---|
| Marketing case | sentence |
| Product case | Title Case (Chicago) |
| Counts | numerals |
| Units | 10 MB (nbsp) |

- Active voice, second person
- Sentence case on marketing pages; Title Case for product headings and buttons
- Numerals for counts; space between number and unit
- Labels say what happens: Deploy Project, not Submit
- Errors explain the fix
- Prefer & over and in short labels
- Don't first person
- Don't bare Submit/OK/Continue buttons
- Don't three periods for an ellipsis
- Don't NextJS or Eve

Real examples, to look at on Vercel's own pages (not for reuse):
- The Brands page: plain, short guidance: https://vercel.com/design/brands

Sources: https://vercel.com/design/guidelines, https://vercel.com/geist/button, https://vercel.com/design/brands

## Logo: rules

A black equilateral triangle, alone (the symbol) or before the Vercel wordmark (the logotype), black on light and white on dark. The symbol is for tight spaces or rows of brand symbols, and may stand in as the ▲ character in plain text.

Why it works: A single geometric shape reads at 14px in a nav and at 200px as a hero object; the same mark becomes the terminal prompt.

|  |  |
|---|---|
| Clear space | height of the symbol |
| Minimum size | not published |
| Symbol ratio | 1155:1000 (from the official SVG) |
| Logotype ratio | 2048:407 (from the official SVG) |

- Use the logotype by default; the symbol only where the full logo does not fit or beside other brands’ symbols
- Clear space around the logo = the height of the symbol
- Black on light, white on dark; never modify the marks
- Plain-text form: ▲ (U+25B2)
- Include the trademark attribution line when the marks appear in permitted uses
- Don't modify, recolor or animate the mark into something else
- Don't use Vercel marks in your product, company or domain name
- Don't show the marks more prominently than your own
- Don't imply sponsorship or endorsement
- Don't use the marks on merchandise for your commercial products

Real examples, to look at on Vercel's own pages (not for reuse):
- Logotype on white and black; the symbol and its unicode form: https://vercel.com/design/brands

Sources: https://vercel.com/design/brands

## Color: rules

Geist is a grayscale system with nine supporting scales (blue, red, amber, green, teal, purple, pink), each in ten functional steps, rendered in P3 where supported. Two backgrounds, then steps 1-3 for component fills, 4-6 for borders, 7-8 for high-contrast fills and 9-10 for text and icons. The homepage uses almost only the grays.

Why it works: Functional steps mean a color is chosen by job (hover, border, text), not by taste, so light and dark themes swap cleanly.

|  |  |
|---|---|
| Scales | 10 (backgrounds, gray, gray-alpha, blue, red, amber, green, teal, purple, pink) |
| Steps | 100-1000, ten per scale |
| Gamut | P3 on supported displays |
| Page ground (site) | #FAFAFA |

- Use Background 1 by default, especially under color; Background 2 sparingly for subtle differentiation
- Colors 1-3: component default, hover, active backgrounds
- Colors 4-6: default, hover, active borders; solid gray by default, gray-alpha only where the edge must blend
- Colors 7-8: high-contrast backgrounds
- Colors 9-10: secondary and primary text and icons
- Draw each border once; keep the divider inside the border
- Keep material shadows translucent
- Semantic: red errors, green success, amber warnings, blue information, with text labels too
- Terminal semantic colors meet 4.5:1
- Don't overlap alpha borders
- Don't use opaque gray shadows (they leave a halo)
- Don't rely on color alone for status

Not published: color proportions or ratios; brand accent beyond the functional scales.

Do and don't:
- Do: "Deploy now". Primary CTA: #171717 pill, white Geist 500.
- Don't: "Deploy now". Blue copy: on marketing pages text stays #171717 or #4D4D4D.

Real examples, to look at on Vercel's own pages (not for reuse):
- Geist color scales and step roles: https://vercel.com/geist/colors

Sources: https://vercel.com/geist/colors, https://vercel.com/geist/terminal

## Typography: rules

Geist Sans and Geist Mono, Vercel’s own open typeface, drawn for developers and designers and inspired by Swiss design. A fixed pixel scale (Heading 72 to 14, Copy 24 to 13, Label 20 to 12, Button 16 to 12) sets size, leading, tracking and weight together; headings carry negative tracking.

Why it works: One face in two widths keeps code, numbers and prose in a single voice; preset classes stop drift.

|  |  |
|---|---|
| Heading 72 | 72/72, -4.32px |
| Heading 64 | 64/64, -3.84px |
| Heading 56 | 56/56, -3.36px |
| Heading 48 | 48/56, -2.88px |
| Heading 32 | 32/40, -1.28px |
| Heading 24 | 24/32, -0.96px |
| Copy 24 | 24/36 |
| Copy 16 | 16/24 |
| Copy 14 | 14/20 |
| Label 14 | 14/20 |
| Button 16 | 16/20, 500 |
| Metrics | cap 710, x-height 530, descender -150 (UPM 1000) |

- Use the preset classes: size, line height, tracking and weight together
- Product heading classes: 72-56 line height equals size, tracking -6% (-4.32px at 72); 48: 48/56; 40: -2.4px; 32: -1.28px. The homepage phone H2 is 32/40 at -1.6px (observed): use the page values for a landing page
- Copy styles for multi-line text (Copy 14 is the most common); Label styles for single lines
- Mono pairs with Label 14/13 and inline code
- Tabular numbers for comparisons
- Marketing headings render at weight 450-400 on the homepage (observed), lighter than the 600 product heading
- Don't letter-space body copy
- Don't mix in a second sans
- Don't set mono inside a sans paragraph except for code

Do and don't:
- Do: "Agentic Infrastructure". Geist at -6% tracking, weight 400-450.
- Don't: "AGENTIC INFRASTRUCTURE". All caps: marketing copy is sentence case.

Real examples, to look at on Vercel's own pages (not for reuse):
- Geist type classes: headings, buttons, labels, copy: https://vercel.com/geist/typography

Sources: https://vercel.com/geist/typography, https://vercel.com/font

## Graphic elements: rules

The triangle, hairline rings, fading product screens and the Geist Grid. Surfaces come from Materials: base and small at 6px radius, medium and large at 12px, menus and modals at 12px, fullscreen at 16px, each with a preset shadow.

Why it works: Elevation is encoded once in a material type, so the page stays flat and the few raised things read clearly.

|  |  |
|---|---|
| Material base/small | 6px |
| Medium/large/menu/modal | 12px |
| Fullscreen | 16px |
| Hairline | 1px #EBEBEB ring |

- Use a Material type instead of hand-rolled radii and shadows
- Pick the lowest elevation that still reads
- Tooltips are the only floating element with a stem
- Layered shadows: ambient plus direct light, two layers or more
- Combine borders and shadows; semi-transparent borders sharpen edges
- Nested radii: child radius ≤ parent
- Don't stack two materials on one element
- Don't over-elevate
- Don't nest grids more than one level

Real examples, to look at on Vercel's own pages (not for reuse):
- The Backends card page-curl: a blue grid sheet under a white fold: https://vercel.com/

Sources: https://vercel.com/geist/materials, https://vercel.com/geist/grid, https://vercel.com/design/guidelines, https://vercel.com/

## Iconography: rules

Geist icons are a 16px set "tailored for developer tools": filled outline shapes at a consistent weight, colored by currentColor in Gray 1000 or Gray 700.

|  |  |
|---|---|
| Grid | 16px |
| Fill | outline paths, evenodd |
| Construction rules | not published |

- 16px default; 14px inside small pills; 20px inline in large chips
- Color via currentColor: #171717 primary, #8F8F8F tertiary
- Icon-only buttons carry an aria-label naming action and target
- A thin-stroke icon may need a bolder stroke next to medium text
- Don't mix another icon set
- Don't rely on an icon without a text equivalent

Real examples, to look at on Vercel's own pages (not for reuse):
- Geist icon at 16px (agent): https://vercel.com/

Sources: https://vercel.com/geist/introduction, https://vercel.com/geist/button, https://vercel.com/design/guidelines, https://vercel.com/

## Illustration: rules

Vercel does not publish an illustration style. The homepage uses product-native drawings instead: a stack of browser-window outlines for Sandbox, a blue grid sheet curling at a card corner for Backends, and chat bubbles for Agents, all in grays with one blue.

Why it works: Illustration is built from interface parts, so it explains the product rather than decorating it.

|  |  |
|---|---|
| Style guide | not published (observed recipe) |

- Build illustration from UI parts: windows, bubbles, sheets, grids
- Grays plus at most one functional color
- Hairlines at #EBEBEB and soft translucent shadows
- Don't characters or scenes (except brief seasonal mascots)
- Don't gradients across a whole section

Real examples, to look at on Vercel's own pages (not for reuse):
- Sandbox card: stacked window outlines (observed): https://vercel.com/

Sources: https://vercel.com/

## Photography: rules

Not published, and not used: the homepage carries no photographs. Customer proof is shown as real product screenshots (Notion, Zapier, Mintlify) in light theme.

|  |  |
|---|---|
| Photography guide | not published |

- Use real customer product UI, light theme, uncropped at the top, fading out at the bottom
- No stock photography
- Don't device mockups or perspective tilts
- Don't lifestyle or people photos on product pages

Real examples, to look at on Vercel's own pages (not for reuse):
- Zapier product screen as used on the homepage: https://vercel.com/

Sources: https://vercel.com/

## Motion: rules

Motion principles are published as engineering rules: honor reduced motion, CSS first, transform and opacity only, interruptible and input-driven. On the homepage the hero triangle fades in its lighting, the phone subline types, and the phone logo row scrolls.

|  |  |
|---|---|
| Easing curves | not published |
| Durations | not published, except loading 150-300ms delay and 300-500ms minimum |

- Honor prefers-reduced-motion
- Prefer CSS > Web Animations API > JS
- Animate transform and opacity only
- Animate only to clarify cause and effect or for deliberate delight
- Easing fits what changes; animations are interruptible
- No autoplay over 5s without pause controls
- Don't transition: all
- Don't animate width, height, top or left
- Don't autoplay noisy loops

Sources: https://vercel.com/design/guidelines, https://vercel.com/

## Interface and layout: rules

A 24px page margin and a full-width 1392px column at 1440; one #FAFAFA ground from nav to footer with no section bands. Sections alternate a 921px media column left or right against a 333px text column, with 150-230px between sections.

|  |  |
|---|---|
| Page margin | 24px |
| Column at 1440 | 1392px |
| Nav | 64px |
| Media column | 921px |
| Text column | 333px |

- 24px page margin at every width
- One ground for the whole page; sections separated by space, not color
- Alternate media left and right
- Align everything to the margin or the column edges
- Optical alignment: adjust ±1px when perception beats geometry

Not published: a numbered column grid for marketing pages; a spacing scale.

Sources: https://vercel.com/, https://vercel.com/geist/grid, https://vercel.com/design/guidelines

## Rules: rules

- Black triangle, Geist, grays: those three make it Vercel
- Sentence case on marketing pages
- One customer, one number per section
- Hairline rings, not borders, on white pills and cards
- Real product UI, never mockups
- Honor reduced motion
- Don't color a headline or section
- Don't show customer logos in color
- Don't modify the Vercel marks
- Don't use Vercel marks in your own product or domain name
- Don't mix a second typeface

Sources: https://vercel.com/design/brands, https://vercel.com/geist/colors, https://vercel.com/design/guidelines, https://vercel.com/

## Campaigns

### Agentic Infrastructure (2026)

The homepage repositions Vercel from the Frontend Cloud to agentic infrastructure, organised around three lines: for coding agents, to ship apps and agents, automated by agents.

How the system shows: Same grayscale Geist page; the hero object is the lit triangle; proof is customer agent products (Notion AI).
Why it works: The new category rides on an unchanged visual system, so the shift reads as continuity, not a rebrand (our reading).
Channels: web. Source: https://vercel.com/

## Applications

| Format | What | Source |
|---|---|---|
| terminal theme | Vercel Dark and Light terminal themes built from Geist, with a ▲ prompt that turns red on failure. | https://vercel.com/geist/terminal |
| font site | vercel.com/font: Geist Sans, Mono, Serif and Pixel with a glyph inspector and playground. | https://vercel.com/font |

## By format

How our engine applies Vercel's system to each format. This is our recipe built from their rules, not something Vercel publishes. Level = how much color the format carries (0 grayscale, 5 full functional color). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 0 | Build it the way vercel.com is built (kit.spec.page): one #FAFAFA ground, 64px nav, 64px Geist 400 hero headline at -3.84px with pill CTAs, a centred lit black triangle, three pillar lines right; a justified row of six #171717 customer logos; alternating 921px fading product screens with two-tone proof sentences and feature lists; a three-card Recently shipped grid; a centred closing CTA; a 6-column footer | Which customers and products; the hero object (the triangle by default) |
| Deck | 1 | Black or #FAFAFA slides, Geist with negative tracking, one claim per slide, triangle in a corner | Geist Grid guides behind diagrams; one functional color for data |
| Proposal page | 0 | #FAFAFA ground, #171717 ink, two-tone proof sentences, one black pill CTA | a fading product screen |
| Ad | 1 | Black or white ground, one short sentence-case line in Geist, triangle | a lit triangle hero image |
| Social post | 1 | Black or #FAFAFA, Geist headline at heading tracking, product UI crop | Geist Mono label |
| Email | 0 | White, #171717 text, one black pill button, Title Case button label | a small triangle at top |
| Error message | 1 | Say what to do next; red only on the status label with a text label | none |

## Checks before anything ships

- **Logo hidden**: Cover the triangle. It should still read as Vercel: #FAFAFA ground, tight Geist headlines, gray two-tone sentences, hairline pills, real product UI.
- **Swap test**: Put another cloud vendor’s logo on it. If the grayscale restraint and one-number proof feel generic, add the lit triangle hero and the fading customer screens.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Vercel's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Logo minimum size: not published.
- Color proportions or ratios: not published.
- Easing curves and durations: not published (only the loading 150-300/300-500ms rule).
- Illustration and photography guidelines: not published.
- A spacing scale and a marketing column grid: not published (layout values here are observed).
- Icon construction rules: not published (icons page lists the set only).
- Brand voice tone words: not published; ours are inferred from the guidelines.
- Competitive alternatives: not published (the homepage and about page name no competitor).

Logos and reference images belong to Vercel. Look at them on Vercel's own pages; don't reuse them.