For coding agents
Agents deploy in their native language, through Vercel's API, CLI, MCP and Skills. Observed
The system
Fixed, everywhere
- 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.
How loud each format gets
SilentLanding pageProposal pageEmail
QuietDeckAdSocial postError message
Calm
Warm
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes two checks
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.
Strategy
Vercel is agentic infrastructure for every app and agent. Observed
To ship apps and agents
Ship apps and agents in sandboxed VMs with durable backends, scaling from zero to millions. Observed
Automated by agents
Infrastructure that investigates errors, plans fixes and opens PRs on its own. Observed
Full spec
- For Observed
- 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).
- Problem Observed
- Infrastructure was built for humans clicking dashboards; agents need infrastructure that fits how they work (paraphrase).
- Promise Observed
- Deploy instantly and scale from zero to millions, whether you or your agents wrote the code (paraphrase).
- Headline Observed
- Vercel frees the world to ship what’s next.
Proof behind each pillar
- For coding agents. Notion powers millions of agent conversations daily on Vercel.
- To ship apps and agents. Zapier serves over 100 million monthly website visits on Vercel.
- To ship apps and agents. Apps and agents run with durable backends, powered by 400+ models (homepage copy).
- Automated by agents. Mintlify powers documentation for over 20,000 companies on Vercel.
Story Observed
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.
Values
Simplicity
One of the three design principles Geist embodies (paraphrase).
PublishedMinimalism
Second of the three Geist principles; drawn from the Swiss design movement (paraphrase).
PublishedSpeed
Third Geist principle; also the product promise: ship instantly (paraphrase).
PublishedCare and craft
The design team describes itself as stewards of the brand who imbue work with care and craft (paraphrase).
PublishedCategory. Agentic infrastructure (homepage, 2026); previously the Frontend Cloud Observed
Why them
- Agent-native interfaces: API, CLI, MCP and Skills so coding agents can deploy directly. Observed
- A full agent stack: AI SDK, AI Gateway (400+ models), Sandbox, Workflows. Observed
- Fluid Compute and global delivery that scale from zero to millions instantly. Observed
- Makers of Next.js, Turbo and the AI SDK: the frameworks developers already use. Published
Boilerplate Observed
Vercel is agentic infrastructure for every app and agent: the platform where humans and agents build software together.
Taglines
Agentic Infrastructure Observed
Built by you, or your agents Observed
Vercel frees the world to ship what’s next Observed
The Frontend Cloud Published
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.
Source: vercel.comvercel.com/about
Personality and voice
Minimalbut not BarePublished
Meticulousbut not FussyPublished
Fastbut not RushedPublished
Playfulbut not JokeyPublished
The Web Interface Guidelines treat copy as interface: fewer words and consistent nouns make the product faster to read.
Full spec
- 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)
PreciseConciseConfidentDeveloper-native
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.
- 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
- 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.
Their words
shipdeployagentsinfrastructureinstantlyscale
Never
NextJSNext JSEveEVESubmitOKContinue (as a button label)
Source: vercel.com/fontvercel.com/designvercel.com/design/guidelines
- Don’t first person
- Don’t bare Submit/OK/Continue buttons
- Don’t three periods for an ellipsis
- Don’t NextJS or Eve
| Marketing case | sentence |
|---|---|
| Product case | Title Case (Chicago) |
| Counts | numerals |
| Units | 10 MB (nbsp) |
Source: vercel.com/design/guidelinesvercel.com/geist/buttonvercel.com/design/brands
Logo
Official files from the Vercel brand assets zip linked on vercel.com/design/brands (logotype and icon, light and dark). Vercel marks are trademarks of Vercel, Inc.; the guidelines allow only truthful descriptive use and refuse use in other products. Shown for reference; not affiliated.
A single geometric shape reads at 14px in a nav and at 200px as a hero object; the same mark becomes the terminal prompt.
Full spec
- 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
| 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) |
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.
Source: vercel.com/design/brands
Color
Deploy now
Deploy now
Functional steps mean a color is chosen by job (hover, border, text), not by taste, so light and dark themes swap cleanly.
Full spec
- 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
| 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 |
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.
Not published: color proportions or ratios; brand accent beyond the functional scales.
Typography
Agentic Infrastructure
Agentic Infrastructure
AGENTIC INFRASTRUCTURE
One face in two widths keeps code, numbers and prose in a single voice; preset classes stop drift.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Geist Sans | Everything: hero 64px 400, section heads 56px 450, leads 24px 450, UI 14-16px | Open (SIL OFL 1.1). Vercel in collaboration with basement.studio; npm geist 1.9.0, Google Fonts, or .zip | Geist No stand-in needed: Geist is open and ships with this book (fonts folder). Load the variable face so the 450 weight renders. |
| Geist Sans | Copy and labels 13-16px at 400-500 | Open (SIL OFL 1.1) | Geist The real face; it is open. |
| Geist Mono | Code, status labels, the phone hero subline, tabular numbers | Open (SIL OFL 1.1) | Geist Mono The real face; it is open. |
- 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
| 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) |
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.
Graphic elements
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.
The triangle · The logomark, the hero object, the footer mark, the terminal prompt and text-only brand mentions (▲)
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.
Monochrome page, color as signal · Every marketing page
Zapier serves over 100 million monthly website visits on Vercel.
Two-tone proof sentence · Beside each product screenshot
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.
Pill CTAs with hairline rings · Hero and closing CTA
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.
Customer product screens that fade into the page · The three customer sections
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).
Geist Grid guides · Marketing pages, docs landing pages, feature breakdowns
Specimens use sample copy, not Vercel’s.
Elevation is encoded once in a material type, so the page stays flat and the few raised things read clearly.
Full spec
- 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
| Material base/small | 6px |
|---|---|
| Medium/large/menu/modal | 12px |
| Fullscreen | 16px |
| Hairline | 1px #EBEBEB ring |
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.
Source: vercel.com/geist/materialsvercel.com/geist/gridvercel.com/design/guidelinesvercel.com
Iconography
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.
Full spec
- 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
| Grid | 16px |
|---|---|
| Fill | outline paths, evenodd |
| Construction rules | not published |
Source: vercel.com/geist/introductionvercel.com/geist/buttonvercel.com/design/guidelinesvercel.com
Illustration
Illustration is built from interface parts, so it explains the product rather than decorating it.
Full spec
- 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
| Style guide | not published (observed recipe) |
|---|
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.
Source: vercel.com
Photography
Not published, and not used: the homepage carries no photographs.
Full spec
Not published, and not used: the homepage carries no photographs. Customer proof is shown as real product screenshots (Notion, Zapier, Mintlify) in light theme.
- 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
| Photography guide | not published |
|---|
Source: vercel.com
Motion
Motion principles are published as engineering rules: honor reduced motion, CSS first, transform and opacity only, interruptible and input-driven.
Full spec
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.
- 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
| Easing curves | not published |
|---|---|
| Durations | not published, except loading 150-300ms delay and 300-500ms minimum |
Interface & layout
The page, band by band
Navigation
Hero
Customer 1 (Notion)
Customer 2 (Zapier)
Customer 3 (Mintlify)
Recently shipped
Closing CTA
Footer
Buttons
Full spec
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.
Measured from vercel.com/design/brands's 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.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 24px | 24px |
| Section padding | 208px | 80px |
| Hero text width | max 444px, centered | full width |
| Card gap | 20px | 20px |
| Navigation | 64px | 64px |
Type, at size
Hero H1
Geist Sans · 64px (phone 48) · line 1 · tracking -3.84px · weight 400
Section H2
Geist Sans · 56px (phone 32) · line 1 · tracking -3.36px · weight 450
Proof sentence (two-tone lead)
Geist Sans · 24px · line 1.3333 · tracking -0.96px · weight 450
Card title
Geist Sans · 24px · line 1.1 · tracking -1.2px · weight 450
Hero pillar lines
Geist Sans · 16px · line 1.5 · tracking -0.32px · weight 450
Button (pill)
Geist Sans · 16px · line 1.5 · weight 500
Nav link / list / footer link / card copy
Geist Sans · 14px · line 1.4286 · weight 400
Chat bubble
Geist Sans · 13px · line 1.3846 · weight 400
Badge
Geist Sans · 11px · line 1.818 · weight 500
Phone hero subline
Geist Sans · 16px · line 1.5 · weight 400
Status label
Geist Sans · 12px · line 1.6667 · weight 500
Cards
LabelCard title, one line
One or two sentences on what this does for the reader.
LabelCard title, one line
One or two sentences on what this does for the reader.
Card: 6px corners on the surface band, 20px apart.
- Corner radius
- 6px
- Border
- 1px
- Motion
- Prefer CSS, animate only transform and opacity, honor prefers-reduced-motion, never transition: all
- Buttons
- pill
Page anatomy
How Vercel’s own landing pages are built, observed on vercel.com, 2026-10-31. The full measurements are in spec.md.
- Navigation
- 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.
- Hero
- 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.
- Customer 1: Notion (screen left)
- Customer section: H2, a real product screen fading into the page, and a two-tone proof sentence with a feature list.
- Customer 2: Zapier (screen right)
- Customer section: H2, a real product screen fading into the page, and a two-tone proof sentence with a feature list.
- Customer 3: Mintlify (screen left)
- Customer section: H2, a real product screen fading into the page, and a two-tone proof sentence with a feature list.
- Recently shipped
- One-line H2 and three linked product cards: a tall card left, two short cards stacked right.
- Closing CTA
- Centred one-line H2 and two pills.
- Footer
- 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.
Source: vercel.comvercel.com/geist/gridvercel.com/design/guidelines
In use
Agentic Infrastructure · 2026
The new category rides on an unchanged visual system, so the shift reads as continuity, not a rebrand (our reading). Our reading
Full spec
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).
- Agentic Infrastructure. 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. vercel.com
| Format | What they did | Source |
|---|---|---|
| terminal theme | Vercel Dark and Light terminal themes built from Geist, with a ▲ prompt that turns red on failure. | vercel.com/geist/terminal |
| font site | vercel.com/font: Geist Sans, Mono, Serif and Pixel with a glyph inspector and playground. | vercel.com/font |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 | 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 | #FAFAFA ground, #171717 ink, two-tone proof sentences, one black pill CTA | a fading product screen | |
| Ad | Black or white ground, one short sentence-case line in Geist, triangle | a lit triangle hero image | |
| Social post | Black or #FAFAFA, Geist headline at heading tracking, product UI crop | Geist Mono label | |
| White, #171717 text, one black pill button, Title Case button label | a small triangle at top | ||
| Error message | Say what to do next; red only on the status label with a text label | none |
Ads
DropMeta · Sep 2026 – now
Agentic InfrastructureLinkedIn · May 2026
NextjsGoogle · Jan 2026 – now
PricingGoogle · Feb 2026 – now- Campaign walk: One API Key, One Billad → landing page → Free sign-up
- Campaign walk: Drop It. It's Live.ad → landing page → Free sign-up
- Campaign walk: Compare Pricing Plansad → landing page → Free trial
Rules
Do
- 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
- show customer logos in color
- modify the Vercel marks
- use Vercel marks in your own product or domain name
- mix a second typeface
Source: vercel.com/design/brandsvercel.com/geist/colorsvercel.com/design/guidelinesvercel.com
Steal this kit
Your name and logo, Vercel’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Vercel doesn’t publish
- 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).
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Vercel.