{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#FAFAFA", "ink": "#171717", "ink_muted": "#4D4D4D", "accent": "#171717", "on_accent": "#FFFFFF", "accent_secondary": "#0072F5", "night": "#000000", "on_night": "#EDEDED", "hairline": "#EBEBEB", "extras": [ { "name": "Background 1 (background-100)", "hex": "#FFFFFF", "role": "Default element background; use in most instances, especially under color", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "Hero and nav button fills (Talk to sales, Get a Demo, Log In), chat bubbles (observed https://vercel.com/ (2026-10-31))" }, { "name": "Background 2 (background-200)", "hex": "#FAFAFA", "role": "Secondary background, used sparingly for subtle differentiation", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "The whole homepage ground, every band, the scrolled nav fill and card fills (observed https://vercel.com/ (2026-10-31))" }, { "name": "Gray 100", "hex": "#F2F2F2", "role": "Color 1: default component background", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Gray 200", "hex": "#EBEBEB", "role": "Color 2: hover background; small elements like badges", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "\"New\" badge fill in the footer (observed https://vercel.com/ (2026-10-31))" }, { "name": "Gray 300", "hex": "#E6E6E6", "role": "Color 3: active background; small elements like badges", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Gray 400", "hex": "#EBEBEB", "role": "Color 4: default border (the computed light value equals Gray 200 at time of reading)", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "1px ring on white buttons and cards, rgb(235,235,235) (observed https://vercel.com/ (2026-10-31))" }, { "name": "Gray 500", "hex": "#C9C9C9", "role": "Color 5: hover border", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Gray 600", "hex": "#A8A8A8", "role": "Color 6: active border", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Gray 700", "hex": "#8F8F8F", "role": "Color 7: high-contrast background", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "Copy icon on the Onboard your agent pill, theme switcher icons (observed https://vercel.com/ (2026-10-31))" }, { "name": "Gray 800", "hex": "#7D7D7D", "role": "Color 8: hover high-contrast background", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Gray 900", "hex": "#4D4D4D", "role": "Color 9: secondary text and icons", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "Nav links, the gray half of every lead sentence, \"Features\" labels, card descriptions, footer links (observed https://vercel.com/ (2026-10-31))" }, { "name": "Gray 1000", "hex": "#171717", "role": "Color 10: primary text and icons", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "Headlines, primary buttons (Deploy now, Sign Up), customer logos, feature lists (observed https://vercel.com/ (2026-10-31))" }, { "name": "Blue 700", "hex": "#0072F5", "role": "Blue scale, solid step (scale role: color 7, high-contrast fill)", "prov": "published", "source": "https://vercel.com/geist/colors", "site_use": "Bottom stop of the blue sheet in the Backends card corner (observed https://vercel.com/ (2026-10-31))" }, { "name": "Blue 900", "hex": "#0068D6", "role": "Blue scale, accessible text step (color 9)", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Blue 600 (gradient top, observed)", "hex": "#52AEFF", "role": "Top stop of the Backends card blue sheet gradient", "prov": "observed", "source": "https://vercel.com/", "site_use": "Backends card page-curl gradient, rgb(82,174,255) to #0072F5 (observed https://vercel.com/ (2026-10-31))" }, { "name": "Status blue (observed)", "hex": "#0070F3", "role": "Footer status dot and ALL SYSTEMS NORMAL. label; the long-standing Vercel/Next.js link blue. Not a Geist scale value", "prov": "observed", "source": "https://vercel.com/", "site_use": "Footer status line (observed https://vercel.com/ (2026-10-31))" }, { "name": "Red 700", "hex": "#E5484D", "role": "Red scale solid step: errors", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Red 900", "hex": "#CB2A2F", "role": "Red scale text step: error text", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Amber 700", "hex": "#FFB224", "role": "Amber scale solid step: warnings", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Amber 900", "hex": "#A35200", "role": "Amber scale text step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Green 700", "hex": "#45A557", "role": "Green scale solid step: success", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Green 900", "hex": "#297A3A", "role": "Green scale text step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Teal 700", "hex": "#12A594", "role": "Teal scale solid step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Teal 900", "hex": "#067A6E", "role": "Teal scale text step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Purple 700", "hex": "#8E4EC6", "role": "Purple scale solid step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Purple 900", "hex": "#7820BC", "role": "Purple scale text step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Pink 700", "hex": "#EA3E83", "role": "Pink scale solid step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Pink 900", "hex": "#BD2864", "role": "Pink scale text step", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Dark Background 1", "hex": "#0A0A0A", "role": "Dark theme background-100", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Dark Background 2", "hex": "#000000", "role": "Dark theme background-200; the terminal Dark theme is pure black", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Dark Gray 1000", "hex": "#EDEDED", "role": "Dark theme primary text (also the terminal Dark primary #EDEDED)", "prov": "published", "source": "https://vercel.com/geist/terminal" }, { "name": "Dark Gray 400", "hex": "#2E2E2E", "role": "Dark theme default border", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Dark Gray 900", "hex": "#A1A1A1", "role": "Dark theme secondary text", "prov": "published", "source": "https://vercel.com/geist/colors" }, { "name": "Terminal Light ground", "hex": "#FBFBFA", "role": "The Vercel Light terminal theme ground: a soft off-white", "prov": "published", "source": "https://vercel.com/geist/terminal" } ] }, "typography": { "display": { "family": "Geist", "weight": 450, "tracking": -0.06, "line_height": 1, "fallback_stack": "Geist, \"Helvetica Neue\", Arial, sans-serif", "real": "Geist Sans (Vercel with basement.studio, SIL OFL 1.1, npm geist 1.9.0)", "stand_in": false, "prov": "published", "source": "https://vercel.com/font", "site": { "weight": "400 on the hero H1, 450 on every section H2 (variable face)", "size_px": "64 hero H1 desktop / 48 phone; 56 section H2 desktop / 32 phone", "line_height": "1.0 (64/64, 56/56) desktop; 56/48 hero and 40/32 H2 on phone", "tracking": "-0.06em (-3.84px at 64, -3.36px at 56, -2.88px at 48); -0.05em on phone H2 (-1.6px at 32)", "font_feature_settings": "\"calt\" 0, \"rlig\", \"ss11\" on every element", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" } }, "body": { "family": "Geist", "weight": 400, "tracking": 0, "line_height": 1.43, "scale": 1, "fallback_stack": "Geist, \"Helvetica Neue\", Arial, sans-serif", "real": "Geist Sans", "stand_in": false, "prov": "published", "source": "https://vercel.com/font", "site": { "weights": "400 nav links and copy, 450 leads and hero right column, 500 buttons, feature items and footer headings, 600 the @handle in chat bubbles", "sizes_px": "24 lead, 16 buttons and hero lines, 14 nav, lists, footer, card copy, 13 chat bubbles, 11 badges", "line_height": "32/24, 24/16, 20/14, 18/13", "tracking": "-0.04em on 24px leads (-0.96px), -0.02em on 16px hero lines (-0.32px), normal at 14 and below", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" } }, "mono": { "family": "Geist Mono", "weight": 400, "fallback_stack": "\"Geist Mono\", ui-monospace, Menlo, monospace", "real": "Geist Mono (SIL OFL 1.1)", "stand_in": false, "prov": "published", "source": "https://vercel.com/font", "site": { "use": "Phone hero subline (16/24 #4D4D4D), footer status (12/20 500 uppercase #0070F3), the v0 footer link, code", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" } } }, "style": { "button_shape": "pill", "button_note": "Marketing CTAs are full pills (Geist Button shape=\"rounded\" with the shadow prop, which the docs say is often used on marketing pages); nav and product buttons are 6px-radius rectangles", "corners": "6px on cards and nav buttons (Material Base/Small), 12px menus and modals, 16px fullscreen; 9999px on marketing CTAs", "linework": "1px hairlines drawn as box-shadow rings in Gray 400 #EBEBEB; Geist Grid guides on marketing pages", "motion": "Prefer CSS, animate only transform and opacity, honor prefers-reduced-motion, never transition: all", "prov": "published", "source": "https://vercel.com/geist/materials", "also": [ "https://vercel.com/geist/button", "https://vercel.com/design/guidelines" ], "radius": 6, "border_width": 1 }, "voice": { "tone": [ "Precise", "Concise", "Confident", "Developer-native" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "published", "source": "https://vercel.com/design/guidelines", "scope": "Marketing pages. Product headings and buttons use Title Case." }, { "id": "product-title-case", "kind": "guidance", "text": "Headings and buttons in the product use Title Case (Chicago); the homepage nav buttons follow it (Get a Demo, Log In, Sign Up)", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "active-voice", "kind": "guidance", "text": "Active voice: \"Install the CLI\", not \"The CLI will be installed\"", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "second-person", "kind": "guidance", "text": "Write in second person; avoid first person", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "ampersand", "kind": "prefer", "term": "&", "over": [ "and" ], "prov": "published", "source": "https://vercel.com/design/guidelines", "scope": "Short UI labels and headings; full marketing sentences on the homepage still use \"and\"" }, { "id": "numerals", "kind": "guidance", "text": "Use numerals for counts: \"8 deployments\", not \"eight deployments\"", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "unit-space", "kind": "guidance", "text": "Separate numbers and units with a (non-breaking) space: 10 MB, not 10MB", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "ellipsis", "kind": "guidance", "text": "Use the ellipsis character … and end follow-up or loading labels with it (Rename…, Saving…)", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "curly-quotes", "kind": "guidance", "text": "Prefer curly quotes over straight quotes", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "specific-labels", "kind": "guidance", "text": "Button labels name what happens (Save API Key, Deploy Project), never bare Submit, OK or Continue", "prov": "published", "source": "https://vercel.com/geist/button" }, { "id": "error-exit", "kind": "guidance", "text": "Error messages say how to fix the problem, not just what went wrong", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "id": "spell-nextjs", "kind": "spelling", "text": "Next.js (Next after first use if used several times; never NextJS)", "prov": "published", "source": "https://vercel.com/design/brands" }, { "id": "spell-eve", "kind": "spelling", "text": "eve is always lowercase, including headings, links and buttons", "prov": "published", "source": "https://vercel.com/design/brands" }, { "id": "symbol-unicode", "kind": "guidance", "text": "In text-only contexts the brand may be written as the ▲ symbol (U+25B2)", "prov": "published", "source": "https://vercel.com/design/brands" } ], "approved": { "phrases": [ "Deploy now", "Talk to sales", "Agentic Infrastructure", "Built by you, or your agents", "ship" ], "words": [ "ship", "deploy", "agents", "infrastructure", "instantly", "scale" ] }, "banned": [ "NextJS", "Next JS", "Eve", "EVE", "Submit", "OK", "Continue (as a button label)" ], "prov": "published", "source": "https://vercel.com/design/guidelines" }, "spec": { "source": "https://vercel.com/design/brands", "how": "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", "provenance": "published", "motion": [ { "name": "reduced-motion", "use": "Honor prefers-reduced-motion and give every animation a reduced variant", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "name": "compositor-only", "use": "Animate transform and opacity only; never transition: all; list the properties you animate", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "name": "css-first", "use": "Prefer CSS, then the Web Animations API, then JS libraries", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "name": "loading-delay", "duration_ms": 150, "use": "Spinners and skeletons wait ~150–300ms before showing and stay ~300–500ms to avoid flicker", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "name": "tooltip-timing", "use": "Delay the first tooltip in a group; its peers open with no delay", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "name": "autoplay-limit", "duration_ms": 5000, "use": "No autoplay except muted, non-essential loops; motion longer than 5s alongside content needs pause, stop or hide", "prov": "published", "source": "https://vercel.com/design/guidelines" }, { "name": "hero-glow (observed)", "use": "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", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "name": "typing-subline (observed)", "use": "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\"", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "name": "logo-marquee (observed)", "use": "On phone the six customer logos scroll horizontally as a marquee; on desktop they sit still in one justified row", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" } ], "icons": { "grid": "16px viewBox (data-slot=\"geist-icon\")", "sizes": [ { "name": "default", "px": 16 }, { "name": "small", "px": 14 }, { "name": "inline-large", "px": 20 } ], "stroke": "filled outline paths (fill-rule evenodd), not stroked lines; drawn as about 1.5px outlines at 16px", "color": "Gray 1000 #171717 or Gray 700 #8F8F8F; take currentColor", "rule": "One icon set \"tailored for developer tools\"; icon-only buttons need an aria-label naming action and target", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31", "also": [ "https://vercel.com/geist/introduction", "https://vercel.com/geist/button" ] }, "signature": [ { "id": "triangle", "name": "The triangle", "where": "The logomark, the hero object, the footer mark, the terminal prompt and text-only brand mentions (▲)", "spec": "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", "dont": "Add a gradient, outline, rotation or a second shape to the triangle, or use it more than once per view", "prov": "published", "source": "https://vercel.com/design/brands", "also": [ "https://vercel.com/", "https://vercel.com/geist/terminal" ] }, { "id": "monochrome", "name": "Monochrome page, color as signal", "where": "Every marketing page", "spec": "#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", "dont": "Tint a section, color a headline, or show customer logos in their own colors", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31", "also": [ "https://vercel.com/geist/colors" ] }, { "id": "two-tone-lead", "name": "Two-tone proof sentence", "where": "Beside each product screenshot", "spec": "A 24/32px Geist 450 sentence (-0.96px tracking) whose subject and number are Gray 1000 #171717 and the rest Gray 900 #4D4D4D: \" \" dark, \" on Vercel.\" gray", "example": { "ground": "surface", "text": "Zapier serves over 100 million monthly website visits on Vercel.", "mark": "Zapier serves over 100 million", "mark_style": "color", "mark_color": "#171717", "base_color": "#4D4D4D" }, "dont": "Bold the number or set the whole sentence in one color", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "hairline-pills", "name": "Pill CTAs with hairline rings", "where": "Hero and closing CTA", "spec": "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", "dont": "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)", "prov": "published", "source": "https://vercel.com/geist/button", "also": [ "https://vercel.com/" ] }, { "id": "fading-screens", "name": "Customer product screens that fade into the page", "where": "The three customer sections", "spec": "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", "dont": "Put the screenshot in a browser chrome, a device frame or a card", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "geist-grid", "name": "Geist Grid guides", "where": "Marketing pages, docs landing pages, feature breakdowns", "spec": "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)", "dont": "Nest grids more than one level, or use the grid when guides are not visible", "prov": "published", "source": "https://vercel.com/geist/grid" } ], "page": { "source": "https://vercel.com/", "date": "2026-10-31", "prov": "observed", "voices": "One voice. The homepage (and so any landing page built from this spec) speaks in short sentence-case claims with no full stop on headlines (\"Agentic Infrastructure\", \"Recently shipped\"), one-sentence customer proofs ending \"on Vercel.\", and Title Case only on the nav buttons (Get a Demo, Log In, Sign Up) per the product rule. The Web Interface Guidelines copy rules (second person, numerals, & in short labels) are the brand law; the homepage is how they look on a marketing page. Settled for builders: (1) Hero H1 is weight 400, every section H2 weight 450 (Geist variable); never 600. (2) Every text color is #171717 or #4D4D4D except the footer status line (#0070F3). (3) There is NO section background change anywhere: the whole page is #FAFAFA. (4) Build at the 1440x900 reference: hero section height = viewport height - 64 = 836px.", "nav": { "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)" }, "sections": [ { "name": "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

, the dark part a ); 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" ] }, { "name": "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

, the dark part a ); 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" ] }, { "name": "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

, the dark part a ); 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" ] }, { "name": "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" ] }, { "name": "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" }, "dark_ground": { "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" } }, "bands": [ { "label": "Navigation", "ground": "#FAFAFA", "content": "triangle, 4 links, Get a Demo / Log In / Sign Up", "desktop": "64px", "phone": "64px: triangle + hamburger", "anatomy": [ "Sticky; #FAFAFA with a 1px rgba(0,0,0,0.08) shadow line once scrolled" ] }, { "label": "Hero", "ground": "#FAFAFA", "content": "H1 + 2 pills | lit triangle | 3 pillar lines; logo row", "desktop": "y 64-900", "phone": "y 64-844, centred stack", "anatomy": [ "Logo row inside the hero section at y 816-861" ] }, { "label": "Customer 1 (Notion)", "ground": "#FAFAFA", "content": "H2, screen left, proof right", "desktop": "y 1108-1725", "phone": "y 1004-1693", "anatomy": [ "921px screen, 333px text column" ] }, { "label": "Customer 2 (Zapier)", "ground": "#FAFAFA", "content": "H2 and screen right, proof left", "desktop": "y 1981-2598", "phone": "y 1773-2421", "anatomy": [ "Mirror of customer 1" ] }, { "label": "Customer 3 (Mintlify)", "ground": "#FAFAFA", "content": "H2, screen left, proof right", "desktop": "y 2853-3470", "phone": "y 2501-3182", "anatomy": [ "Same as customer 1" ] }, { "label": "Recently shipped", "ground": "#FAFAFA", "content": "H2 + 3 cards", "desktop": "y 3678-4395", "phone": "y 3342-4310", "anatomy": [ "Tall card left, two stacked right" ] }, { "label": "Closing CTA", "ground": "#FAFAFA", "content": "centred H2 + 2 pills", "desktop": "y 4672-4808", "phone": "y 4523-4735", "anatomy": [ "Onboard your agent chip" ] }, { "label": "Footer", "ground": "#FAFAFA", "content": "12 link groups, triangle, status, theme switcher", "desktop": "y 5084-5930", "phone": "y 4987-6905", "anatomy": [ "6 columns desktop, 2 phone" ] } ], "layout": { "page_margin": { "desktop": 24, "phone": 24 }, "section_padding": { "desktop": 208, "phone": 80 }, "container_max": 1392, "hero_text_max": 444, "columns": 2, "columns_phone": 1, "gutter": 20, "gutter_phone": 20, "card_gap": 20, "nav_height": 64, "note": "Measured at 1440 and 390. One full-width column x 24-1416 (1392 = width - 48). Customer sections split it into a 921px screen column and a 333px text column (text at x 1083 when the screen is left, x 24 when right). Vertical rhythm: H2 to screen 44px. Gaps from the last element of a section to the next H2 (desktop): hero end 900 to 1108 = 208; Notion container end 1725 to 1981 = 256; Zapier 2598 to 2853 = 255; Mintlify 3470 to 3678 = 208; cards end 4395 to closing H2 4672 = 277; buttons end 4808 to footer 5084 = 276. Phone: 80px between customer sections. Follow the y values; section_padding is only the most common gap. Hero height = viewport - 64 (max 1100).", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "type": [ { "role": "Hero H1", "id": "display-xl", "face": "Geist", "size": { "desktop": 64, "phone": 48 }, "line_height": 1, "line_height_phone": 1.1667, "tracking_px": -3.84, "tracking_phone_px": -2.88, "weight": 400, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Section H2", "id": "display-l", "face": "Geist", "size": { "desktop": 56, "phone": 32 }, "line_height": 1, "line_height_phone": 1.25, "tracking_px": -3.36, "tracking_phone_px": -1.6, "weight": 450, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Proof sentence (two-tone lead)", "id": "lead", "face": "Geist", "size": { "desktop": 24, "phone": 24 }, "line_height": 1.3333, "tracking_px": -0.96, "weight": 450, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Card title", "id": "title-m", "face": "Geist", "size": { "desktop": 24, "phone": 24 }, "line_height": 1.1, "tracking_px": -1.2, "weight": 450, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Hero pillar lines", "id": "body-l", "face": "Geist", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": -0.32, "weight": 450, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Button (pill)", "id": "button-16", "face": "Geist", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Nav link / list / footer link / card copy", "id": "body-s", "face": "Geist", "size": { "desktop": 14, "phone": 14 }, "line_height": 1.4286, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)", "note": "500 for feature items, footer headings and nav buttons" }, { "role": "Chat bubble", "id": "copy-13", "face": "Geist", "size": { "desktop": 13, "phone": 13 }, "line_height": 1.3846, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Badge", "id": "label-11", "face": "Geist", "size": { "desktop": 11, "phone": 11 }, "line_height": 1.818, "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Phone hero subline", "id": "mono-16", "face": "Geist Mono", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, { "role": "Status label", "id": "mono-12", "face": "Geist Mono", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.6667, "tracking_px": 0, "weight": 500, "case": "uppercase", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" } ], "components": { "button_primary_pill": { "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", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "button_secondary_pill": { "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", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "nav_button_primary": { "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", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "nav_button_secondary": { "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", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "card": { "fill": "#FAFAFA", "ring": "#EBEBEB", "ring_px": 1, "radius": 6, "padding": "20px (text pinned bottom-left)", "example": "Recently shipped cards", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "badge": { "fill": "#EBEBEB", "text": "#171717", "radius": "pill", "height": 20, "padding": "0 8px", "text_style": "11px/20px Geist 500", "example": "New", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "chat_bubble": { "fill": "#FFFFFF", "text": "#171717", "ring": "#EBEBEB", "ring_px": 1, "radius": 20, "padding": "16px", "text_style": "13px/18px Geist 400; @handle 600", "example": "Agents card", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "onboard_chip": { "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", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "two_tone_lead": { "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", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "feature_list": { "text": "#171717", "text_style": "label 14/20 400 #4D4D4D, items 14/20 500 #171717, 26px pitch", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" }, "fading_screen": { "anatomy": "921x461 container, image full width, bottom 160px linear-gradient(to top, #FAFAFA, transparent)", "prov": "observed", "source": "https://vercel.com/ (2026-10-31)" } } }, "system": { "fixed": [ "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" ], "flex": "Which product screens and customers appear, the hero object’s lighting, light or dark theme, seasonal touches to the nav mark.", "traits": [ { "is": "Minimal", "not": "Bare", "text": "Simplicity and minimalism from the Swiss design movement, with precision and clarity at the core (paraphrase).", "prov": "published", "source": "https://vercel.com/font" }, { "is": "Meticulous", "not": "Fussy", "text": "The design team prizes meticulous interactions and lives for small details (paraphrase).", "prov": "published", "source": "https://vercel.com/design", "also": [ "https://vercel.com/design/guidelines" ] }, { "is": "Fast", "not": "Rushed", "text": "Speed is one of three design principles; copy uses as few words as possible (paraphrase).", "prov": "published", "source": "https://vercel.com/font", "also": [ "https://vercel.com/design/guidelines" ] }, { "is": "Playful", "not": "Jokey", "text": "Delightful wordplay is named alongside craft; seasonal touches like a costumed nav mascot appear briefly (observed 2026-10-31).", "prov": "published", "source": "https://vercel.com/design" } ] }, "formats": [ { "format": "Landing page", "level": 0, "must": "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", "flex": "Which customers and products; the hero object (the triangle by default)" }, { "format": "Deck", "level": 1, "must": "Black or #FAFAFA slides, Geist with negative tracking, one claim per slide, triangle in a corner", "flex": "Geist Grid guides behind diagrams; one functional color for data" }, { "format": "Proposal page", "level": 0, "must": "#FAFAFA ground, #171717 ink, two-tone proof sentences, one black pill CTA", "flex": "a fading product screen" }, { "format": "Ad", "level": 1, "must": "Black or white ground, one short sentence-case line in Geist, triangle", "flex": "a lit triangle hero image" }, { "format": "Social post", "level": 1, "must": "Black or #FAFAFA, Geist headline at heading tracking, product UI crop", "flex": "Geist Mono label" }, { "format": "Email", "level": 0, "must": "White, #171717 text, one black pill button, Title Case button label", "flex": "a small triangle at top" }, { "format": "Error message", "level": 1, "must": "Say what to do next; red only on the status label with a text label", "flex": "none" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the triangle. It should still read as Vercel: #FAFAFA ground, tight Geist headlines, gray two-tone sentences, hairline pills, real product UI." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "color", "do": { "ground": "surface", "text": "Deploy now", "button": true, "button_fill": "#171717" }, "do_caption": "Primary CTA: #171717 pill, white Geist 500.", "dont": { "ground": "surface", "text": "Deploy now", "ink": "#0072F5" }, "dont_caption": "Blue copy: on marketing pages text stays #171717 or #4D4D4D." }, { "chapter": "type", "do": { "ground": "surface", "text": "Agentic Infrastructure", "ink": "ink" }, "do_caption": "Geist at -6% tracking, weight 400-450.", "dont": { "ground": "surface", "text": "AGENTIC INFRASTRUCTURE", "ink": "ink" }, "dont_caption": "All caps: marketing copy is sentence case." } ], "make_it_yours": { "note": "Everything above transfers. These are Vercel's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Vercel frees the world to ship what’s next.", "label": "Headline", "prov": "observed", "source": "https://vercel.com/about", "source_note": "2026-10-31" }, "story": { "text": "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.", "paraphrase": true, "prov": "observed", "source": "https://vercel.com/about", "source_note": "2026-10-31", "also": [ "https://vercel.com/geist/colors", "https://vercel.com/design" ] }, "values": [ { "name": "Simplicity", "means": "One of the three design principles Geist embodies (paraphrase).", "prov": "published", "source": "https://vercel.com/font" }, { "name": "Minimalism", "means": "Second of the three Geist principles; drawn from the Swiss design movement (paraphrase).", "prov": "published", "source": "https://vercel.com/font" }, { "name": "Speed", "means": "Third Geist principle; also the product promise: ship instantly (paraphrase).", "prov": "published", "source": "https://vercel.com/font" }, { "name": "Care and craft", "means": "The design team describes itself as stewards of the brand who imbue work with care and craft (paraphrase).", "prov": "published", "source": "https://vercel.com/design" } ] }, "positioning": { "statement": { "text": "Vercel is agentic infrastructure for every app and agent.", "prov": "observed", "source": "https://vercel.com/about", "source_note": "2026-10-31" }, "category": { "text": "Agentic infrastructure (homepage, 2026); previously the Frontend Cloud", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31", "also": [ "https://vercel.com/geist/colors" ] }, "audience": { "text": "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).", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, "problem": { "text": "Infrastructure was built for humans clicking dashboards; agents need infrastructure that fits how they work (paraphrase).", "prov": "observed", "source": "https://vercel.com/about", "source_note": "2026-10-31" }, "promise": { "text": "Deploy instantly and scale from zero to millions, whether you or your agents wrote the code (paraphrase).", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, "differentiators": [ { "text": "Agent-native interfaces: API, CLI, MCP and Skills so coding agents can deploy directly.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "text": "A full agent stack: AI SDK, AI Gateway (400+ models), Sandbox, Workflows.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "text": "Fluid Compute and global delivery that scale from zero to millions instantly.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "text": "Makers of Next.js, Turbo and the AI SDK: the frameworks developers already use.", "prov": "published", "source": "https://vercel.com/design/brands" } ], "alternatives": [], "enemy": { "text": "Infrastructure that makes shipping slow; the copy frames the opposite as instant, automated shipping.", "prov": "inferred", "why": "From \"ship… instantly\" and \"Automated by agents\" on the homepage." } }, "messaging": { "taglines": [ { "text": "Agentic Infrastructure", "where": "Homepage H1 and page title", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "text": "Built by you, or your agents", "where": "Homepage closing CTA", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "text": "Vercel frees the world to ship what’s next", "where": "About page headline", "prov": "observed", "source": "https://vercel.com/about", "source_note": "2026-10-31" }, { "text": "The Frontend Cloud", "where": "Previous positioning, still shown as the sample banner on the Geist colors page", "prov": "published", "source": "https://vercel.com/geist/colors" } ], "attributes": [ "precise", "fast", "minimal" ], "key_messages": [], "boilerplate": { "text": "Vercel is agentic infrastructure for every app and agent: the platform where humans and agents build software together.", "paraphrase": true, "prov": "observed", "source": "https://vercel.com/about", "source_note": "2026-10-31" }, "pillars": [ { "name": "For coding agents", "claim": "Agents deploy in their native language, through Vercel's API, CLI, MCP and Skills.", "proof": [ "p-notion" ], "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "name": "To ship apps and agents", "claim": "Ship apps and agents in sandboxed VMs with durable backends, scaling from zero to millions.", "proof": [ "p-zapier", "p-models" ], "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "name": "Automated by agents", "claim": "Infrastructure that investigates errors, plans fixes and opens PRs on its own.", "proof": [ "p-mintlify" ], "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" } ], "proof_points": [ { "id": "p-notion", "kind": "customer", "text": "Notion powers millions of agent conversations daily on Vercel.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "p-zapier", "kind": "customer", "text": "Zapier serves over 100 million monthly website visits on Vercel.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "p-mintlify", "kind": "customer", "text": "Mintlify powers documentation for over 20,000 companies on Vercel.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "p-models", "kind": "stat", "text": "Apps and agents run with durable backends, powered by 400+ models (homepage copy).", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "p-logos", "kind": "logos", "text": "Logo row: Meta, DoorDash, OpenAI, SpaceX, The Weather Company, Polymarket.", "prov": "observed", "source": "https://vercel.com/", "source_note": "2026-10-31" }, { "id": "p-nextjs", "kind": "open_source", "text": "Vercel stewards Next.js, Turbo and the AI SDK, and publishes Geist as an open font.", "prov": "published", "source": "https://vercel.com/design/brands" } ] } } } }