BRAND Vercel 2026 · Page: home

HEADER brand: Vercel; design_date: 2026-10; page_type: home; variants: none example_urls: https://vercel.com/; evidence: measured on https://vercel.com/ 2026-10-05 (HTML, CSS, JS chunks, computed styles at 1440 and 390) unless marked; capture route as in the Overview header purpose: position Vercel as "agentic infrastructure" and get developers to deploy (Deploy now) or companies to talk to sales skeleton: container 1400px + 24px margins, 7 blocks (banner, hero, logos, 3 feature rows, recently shipped, final CTA) plus header and footer; total height desktop ~5915px, mobile ~6670px; sidebar: none overrides: none (page canvas #fafafa, light/dark by system) SECTIONS S0 header - as Overview (transparent over the banner at scroll 0) S1 announcement-bar / centered - campaign banner background: transparent on #fafafa; height: a 32px row with 16px above and below, centered (min-height --banner-min-height, not measured, est 64px) elements: text "Ship 26 is coming to SF" 14px/20px 400 #171717; 16px gap; tertiary pill link "Get your ticket" 14px 500 + 14px chevron "›", 32px tall, hover bg #00000015 150ms responsive: same on mobile, wraps and centers (text-balance) S2 hero / split three-column with 3d-scene - state the category and start a deploy background: #fafafa with the WebGL canvas centered behind (Recipe hero-triangle-scene); height: min(100svh - 64px, 1100px) including S3 at the bottom (836px at 1440x900); on screens taller than 740px the banner overlaps 64px into it (margin-bottom -64px) layout (>=961 container): flex row, justify-between, vertically centered, 40px padding top and bottom; left text block max 444px; canvas absolutely centered (3:2, height = section height up to 720px, 1080x720 at 1440x900, 20px below center); right capability list max 364px (Recipe hero-capabilities) elements left: H1 "Agentic Infrastructure" 64px/64px 400 -3.84px #171717, two lines (balance); 32px below, buttons in a row 12px apart: Deploy now (primary large pill 40px, 124px wide) and Talk to sales (secondary large pill 40px, 130px wide) elements right: three rows "For coding agents", "To ship apps and agents", "Automated by agents" 16px/24px, 8px apart, inside 32px vertical padding; hovering a row expands it to show the sentence (Recipe hero-capabilities) copy: H1 2 words; capability titles 3-4 words + 10-14 word continuations media: canvas only; static fallback image when WebGL/WebGPU is missing motion: scene idles and reacts to the pointer; row hover changes the light; text has no entrance animation; during a file drag over the hero the text fades out (300ms) and "Drop to deploy" (24px 400 #171717) appears below the triangle, then "Loading" (Recipe hero-triangle-scene) responsive: <961 (incl. 390): column; canvas first, height min(125vw, 400px) (min(100vw, 650px) at >=601), triangle scaled 1.6; then H1 48px/56px centered (64px at >=401), 16px below a Geist Mono 16px #4d4d4d tagline that scrambles between the three capability titles; 12px below, buttons full width stacked 12px apart (the text block spans the full container width, 342px at 390; side by side with auto width at >=401); capability list hidden S3 proof / logo-cloud - customer logos background: transparent; height: 44px row; padding: 24px top, 40px bottom (48px bottom on mobile) layout: >=961: 7 logos spread with justify-between across the container (Meta, Blackbox.ai, DoorDash, OpenAI, SpaceX, The Weather Company, Polymarket), ~24-30px tall, single color #171717; <961: marquee motion: mobile marquee bleeds to the screen edges (negative page margin), two copies of the list, gap 48px, translateX 0 -> -(100% + 48px) linear infinite 50s; reduced motion: a horizontal scroller instead media: monochrome SVG wordmarks; placeholder [LOGO] text in #171717 S4 features / alternating-rows (3 rows) - three use cases with a customer proof each background: #fafafa; padding: margin-top 208px (160px <601); rows 256px apart (80px <601); inside a row the heading sits 44px above the grid layout per row (>=961): heading H2 in cols 1-8 (rows 1 and 3, max 18ch in row 1) or cols 5-12 (row 2); below, a 12-col grid: media 8 columns (cols 1-8 for rows 1 and 3, cols 5-12 for row 2) and a text rail 3 columns (cols 10-12 or 1-3) vertically centered; a soft black 160px blurred blob sits behind the media in dark mode only (opacity 0.15) elements: H2 56px/56px 450 -3.36px #171717; media frame 921x461 at 1440 (aspect 12:6; 4:3 below 601) showing a light-grey product UI screenshot (Notion AI chat, Zapier home, Mintlify docs) with a 160px gradient from transparent to #fafafa at its bottom; rail: quote 24px/32px 450 -0.96px, lead in #171717 then #4d4d4d ("Notion powers millions" + "of agent conversations daily on Vercel."), 40px below a list 14px 500, first item "Features" in #4d4d4d 400 then 4 items #171717, 6px apart copy: H2 6-9 words; quote 9-12 words; features 2-3 words each media: product screenshots with separate light/dark versions, lazy loaded; placeholder [PRODUCT UI 12:6] in #ffffff with grey UI lines motion: none responsive: <961 stack: H2 (48px at >=401, 32px/40px below), media full width, quote 40px below, list; rows 80px apart on mobile S5 bento / three cards - "Recently shipped" products background: #fafafa; padding: margin-top 208px (160px <601) layout: H2 "Recently shipped" cols 1-8; 80px below a 12-col grid with 20px gaps: large card cols 1-6 (685x580 at 1440), two stacked cards cols 7-12 (685x280 each, 20px apart) elements: card (Overview component card) with art and a bottom-left caption 20px from the edges. eve card: eve wordmark logo 77x24 + "A framework for building durable agents." 14px #4d4d4d; art = large outlined "E/E" strokes in light grey lines at 50% opacity. Passport card: title "Passport" 24px 450 + description; art = a black #171717 passport booklet (rounded right corners 8px) at the top right with mono uppercase text "VERCEL / PASSPORT / PASAPORTE / PASSAPORTO / パスポート" 14px grey (est #8f8f8f), a white triangle and "ISS 2026" 11px mono. Containers card: title + description; art = a white terminal panel 400x420 (hairline ring, radius 6px, padding 16px, Geist Mono 12px) with "▲ vercel deploy", "Vercel CLI", three lines with green #28a948 checks, "Production: https://my-server.vercel.app" copy: titles 1 word, descriptions 8-12 words motion (>=601, hover-capable): eve art opacity 0.5 -> 0.8, 300ms ease-out; Passport: a spectral glow (red -> yellow -> green -> blue) fades in along the booklet's right edge (opacity 0 -> 1, 1000ms ease-out; out 200ms) and its ellipse breathes scaleX 1 -> 1.5, 1.2s ease-in-out infinite alternate; Containers: terminal rotates -1deg and scales 1.01, 300ms ease-out; focus-visible outline 2px #0072f5 offset 4px responsive: <601 one column; art shifted right and rotated -12deg (Passport booklet and terminal at 58% of the card width); card proportions not measured, est 16:10 S6 cta-band / simple centered - final call to action background: #fafafa; padding: 276px top and bottom (212px <601) layout: centered column elements: H2 "Built by you, or your agents" 56px/56px 450 centered; 40px below, a row 12px apart: Deploy now (primary large pill) and "Onboard your agent" (secondary large pill with 4px left / 8px right padding: three 24px circles with agent icons overlapping in a 56px slot, each with an inset 1px #eaeaea ring and white fill, hover #f2f2f2; the label; a 16px copy icon in #8f8f8f) motion: click copies an onboarding prompt; the label crossfades "Onboard your agent" -> "Paste to your agent" (fade-in 200ms ease-out), the copy icon swaps to a check (scale 0.5 -> 1, opacity 0 -> 1, 200ms cubic-bezier(0.23,1,0.32,1)), resets after 1600ms responsive: buttons stack centered below 601 S7 footer - as Overview PAGE COMPONENTS capability row (hero, desktop): see Recipe hero-capabilities latest card art: see S5 logo marquee: see S3 INTERACTIONS - id: hero.capabilities (Recipe hero-capabilities) - id: hero.scene (Recipe hero-triangle-scene) - id: hero.drop-to-deploy element: whole hero trigger: dragging a folder or file over the page open: H1 block and capability list fade to 0 (300ms); "Drop to deploy" fades in under the triangle (300ms); the scene reacts around the triangle (inf); on drop: the label switches to "Loading" (crossfade 300ms) while staging children: none close: drag leave restores (300ms) switch: n/a keyboard: n/a; touch and mobile: n/a reduced motion: crossfades become instant - id: cta.onboard-agent: see S6 STATES loading: a static fallback image of the lit triangle (light and dark versions) shows first and fades out over 700ms linear once the live canvas has drawn its first frame; no skeletons on the home page error: renderer unavailable -> static fallback image of the lit triangle SCREENSHOTS - file: vercel_2026_home_d1440_full.jpg shows: full home page at 1440 (1424 x 5914), light theme, content-visibility forced visible for the capture source: live https://vercel.com/ 2026-10-05 key values: H2 56px 450 -3.36px; feature media 921x461 with bottom fade; rail quote 24px two tones; bento 685x580 + 2x 685x280, 20px gaps; final CTA centered; footer 6 groups per row do not copy: customer logos, product screenshots, card art; use placeholders - file: vercel_2026_home_m390_full.jpg shows: full home page at 390 @2x (780 x 13342): stacked hero with the scramble tagline caught mid-cycle ("wadcfvvzmlawbwmbtyrhsmi"), marquee, stacked feature rows, stacked cards, footer 2 groups per row, "LOADING STATUS..." mono label - file: vercel_2026_home_d1440_hero-capability-hover.jpg shows: hero with "For coding agents" hovered: row expanded to 3 lines with the grey continuation; light around the triangle shifted - file: vercel_2026_latest-cards_d1440_default.jpg shows: S5 cards at rest - file: vercel_2026_latest-cards_d1440_passport-hover.jpg shows: Passport card hovered: spectral glow along the booklet edge - file: vercel_2026_latest-cards_d1440_containers-hover.jpg shows: Containers card hovered: terminal tilted -1deg and scaled 1.01