BRAND Vercel 2026 · Overview

HEADER brand: Vercel; domain: vercel.com; industry: cloud and agent infrastructure for developers (marketing site and logged-in dashboard); design_date: 2026-10 captured: https://vercel.com/ (home), English, 2026-10-05. Region note: the US route through the Google Translate proxy could not be proven for this site (proxy egress 66.249.82.x geolocated TW by ipinfo and country.is; Vercel edge hkg1), and the proxy rate-limited the browser, so screenshots were taken on a direct connection from Japan. The user confirmed vercel.com is one global English site without regional variants; the HTML has no visitor-country field, prices are USD (schema.org offer priceCurrency USD), og:locale en_US. evidence: measured from the stylesheets (Tailwind v4 build 3ea9ptoxhnusj.css with the Geist design-system tokens, 0dkozkn2sbiwz.css, 3u82rwmj_1n8p.css), the server HTML and the Turbopack JS chunks of the home page, then checked against computed styles and screenshots of the live page at 1440x900 and 390x844 unless marked style_tags: ai-minimal, editorial, dark-first (equal light and dark themes that follow the system setting) viewports: desktop 1440, mobile 390; breakpoints (min-width, used both as @media and @container on the page wrapper): 401 sm, 601 md, 961 lg, 1200 xl; header switches to the burger at <=880; hero canvas switches to its mobile camera below 1024 pages: BRAND Vercel 2026 · Page: home (marketing site); BRAND Vercel 2026 · Page: dashboard (logged-in app: app shell, projects overview, deployments list; desktop only) recipes: BRAND Vercel 2026 · Recipe: hero-triangle-scene; BRAND Vercel 2026 · Recipe: hero-capabilities (marketing home); BRAND Vercel 2026 · Recipe: dashboard-sidebar; BRAND Vercel 2026 · Recipe: dashboard-menus (dashboard, linked from Page: dashboard) note: the dashboard shares these tokens, fonts, colors and buttons; its own differences (14px base size, #fafafa canvas with white surfaces, grey search focus ring, blue in-content links, 12px floating surfaces) are in Page: dashboard rebuild check: passed 2026-10-05 for the marketing home (details at the end); not done for the dashboard RECOGNITION KEYS 1 Monochrome everything: near-black #171717 ink on an off-white #fafafa page (pure black #000000 page in dark mode); the only chromatic UI color is the blue focus ring #0072f5. Color appears only inside the hero light, product art and status dots. 2 Geist Sans everywhere, large headings in variable weight 450 (never bold) with very tight negative tracking of -0.06em (64px/64px -3.84px, 56px/56px -3.36px); the hero H1 is weight 400. Geist Mono for code, terminal snippets and small caps labels. 3 The Vercel triangle is the hero: a big solid black equilateral triangle lit by a real-time WebGL/WebGPU light scene (soft shadow and floor light in light mode, white backlight glow with grain in dark mode) that reacts to the pointer and to the hovered capability. 4 Buttons are small and quiet: 40px pills in the hero (primary #171717 with white text, secondary white with a 1px #ebebeb ring), 32px 6px-radius buttons in the header; hover only darkens or greys the fill in 150ms; focus is a 2px gap + 2px blue ring. 5 Hairlines instead of borders and shadows: cards use a 1px rgba(0,0,0,0.08) box-shadow ring; the sticky header gets a 1px bottom line only after scrolling. 6 Wide 12-column editorial grid at max 1400px with 24px margins; section headings sit in 8 columns and alternate left/right; quotes and feature lists sit in a narrow 3-column side rail. 7 Product UI screenshots in light greys, cropped and faded into the page with a 160px gradient, instead of illustrations or photos. GUARDRAILS no saturated brand color in UI (no blue or purple buttons; blue is only the focus ring and the status text); no gradients in UI except the image fade to the page color and the hero light; no drop shadows on cards (hairline ring only); no bold headings (450 on headings, 500 on buttons and labels); no uppercase headings (uppercase only in Geist Mono micro labels); no radius above 12px except pills; no icons in primary buttons; no illustrations, mascots or stock photos; no scroll-reveal fades on text; no blur/glass header (the scrolled header is a solid #fafafa); older vercel.com elements not in this design: the 2021-2024 "Develop. Preview. Ship." hero, the black hero with the rainbow-gradient triangle, the grid-line "platform for frontend developers" hero, and the earlier ZEIT branding (ext) TOKENS /* color: Geist scale, light theme (:root, .light-theme). Values are the hex fallbacks in the CSS; Chrome renders the lab()/p3 versions, e.g. gray-400 renders #ebebeb and blue-700 renders #0072f5 */ --ds-background-100: #ffffff; /* raised surfaces: buttons, popovers, mobile menu */ --ds-background-200: #fafafa; /* page canvas, cards, header when scrolled */ --ds-gray-100: #f2f2f2; --ds-gray-200: #ebebeb; --ds-gray-300: #e6e6e6; --ds-gray-400: #eaeaea; --ds-gray-500: #c9c9c9; --ds-gray-600: #a8a8a8; --ds-gray-700: #8f8f8f; --ds-gray-800: #7d7d7d; --ds-gray-900: #4d4d4d; --ds-gray-1000: #171717; --ds-gray-alpha-100: #0000000d; --ds-gray-alpha-200: #00000015; --ds-gray-alpha-300: #0000001a; --ds-gray-alpha-400: #00000014; --ds-gray-alpha-500: #00000036; --ds-gray-alpha-600: #0000003d; --ds-gray-alpha-700: #00000070; --ds-gray-alpha-800: #00000082; --ds-gray-alpha-900: #000000b3; --ds-gray-alpha-1000: #000000e8; --ds-blue-100: #f0f7ff; --ds-blue-200: #eaf4ff; --ds-blue-300: #e0efff; --ds-blue-400: #cce7ff; --ds-blue-500: #97ccff; --ds-blue-600: #51aeff; --ds-blue-700: #0070f7; --ds-blue-800: #005edc; --ds-blue-900: #0064e2; --ds-blue-1000: #002453; --ds-red-700: #fc0035; --ds-red-800: #e70022; --ds-red-900: #d60020; --ds-amber-700: #ffb200; --ds-amber-900: #a64f00; --ds-green-700: #28a948; --ds-green-800: #279141; --ds-green-900: #107d32; --ds-teal-700: #00a694; --ds-purple-700: #9f00f4; --ds-pink-700: #f22782; /* color: roles */ --color-ink: #171717; /* headings, body, primary button fill */ --color-text: #171717; --color-text-muted: #4d4d4d; /* nav links, descriptions, quote continuation, footer links */ --color-text-faint: #8f8f8f; /* disabled text */ --color-surface: #fafafa; --color-surface-raised: #ffffff; --color-surface-hover: #f2f2f2; --color-primary: #171717; --color-primary-hover: #383838; /* hsl(0,0%,22%) */ --color-on-primary: #ffffff; --color-border: #ebebeb; /* 1px ring on secondary buttons */ --color-hairline: rgba(0,0,0,0.08); /* cards, header line */ --color-link: #171717; --color-focus: #0072f5; --color-success: #28a948; --color-error: #fc0035; --color-warning: #ffb200; --color-overlay: rgba(250,250,250,0.5); /* page dim under the open mega-menu */ /* font */ --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; --font-pixel: "Geist Pixel" (Square, Grid, Circle, Triangle, Line; weight 500) /* preloaded, used only in campaign art */; /* type scale (Geist utility classes): size/line-height/weight/tracking. Marketing override: every heading 16-72 renders weight 450; heading-14 stays 600 */ --type-display: 64px/64px/400/-3.84px; /* hero H1 (heading-64 + font-normal); mobile 48px/56px/400/-2.88px */ --type-h2: 56px/56px/450/-3.36px; /* section titles; 48px/56px/-2.88px at 401-960; 32px/40px/-1.28px below 401 */ --type-h3: 24px/32px/450/-0.96px; /* quotes; card titles use 24px/26.4px/-1.2px */ --type-heading-20: 20px/26px/450/-0.4px; --type-heading-16: 16px/24px/450/-0.32px; --type-body: 16px/24px/400/0; --type-copy-14: 14px/20px/400/0; --type-copy-13: 13px/18px/400/0; --type-label-20: 20px/32px/400/0; /* mega-menu links */ --type-label-14: 14px/20px/400 (500 for emphasized)/0; --type-label-12: 12px/16px/400/0; --type-button-large: 16px/24px/500/0; --type-button-small: 14px/21px/500/0; --type-mono-14: 14px/20px/400 Geist Mono; --type-mono-12: 12px/16px/400 Geist Mono; --type-mobile-menu: 22px/33px/400/0; /* space and layout */ --space: 4 6 8 12 16 20 24 32 40 44 48 64 80 96 128 160 208 256 276; /* Tailwind 4px unit; Geist space scale 4 8 12 16 24 32 40 64 96 128 192 256 */ --container: 1400px; /* --ds-page-width; with margins 1448px */ --margin: 24px; /* --geist-page-margin, all breakpoints */ --gutter: 20px; /* 12-col grid gap-x at container >=1200, 0 below */ --section-gap: 208px; /* margin-top between home sections at >=601, 160px below */ --header-height: 64px; /* shape */ --radius-button-small: 6px; --radius-button-large: 8px; /* when not pill */ --radius-pill: 9999px; /* hero and CTA buttons */ --radius-card: 6px; --radius-popover: 12px; --radius-menu-row: 6px; --radius-input: 6px; --hairline: 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 1px #fafafa; /* --ds-shadow-border, used as box-shadow, never border */ /* depth */ --ds-shadow-small: 0px 2px 2px #0000000a; --ds-shadow-medium: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a; --ds-shadow-large: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a; --ds-shadow-menu: 0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f; --ds-shadow-modal: 0 0 0 1px #00000014, 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f; --header-line: 0 1px 0 0 rgba(0,0,0,0.08); --blur-glass: none; /* motion */ --ease-standard: cubic-bezier(0.4,0,0.2,1); /* Tailwind default, buttons and links */ --ease-out: cubic-bezier(0,0,0.2,1); --ease-swift: cubic-bezier(0.175,0.885,0.32,1.1); /* overlays and popovers */ --ease-icon: cubic-bezier(0.23,1,0.32,1); --dur-link: 100ms; --dur-button: 150ms; --dur-popover: 200ms; --dur-overlay: 300ms; --dur-reveal: 500ms; --overlay-scale: 0.96; /* focus */ --focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px #0072f5; /* box-shadow, appears instantly */ dark_mode: auto (follows prefers-color-scheme; html gets .light-theme or .dark-theme; a footer switch offers system / light / dark) TOKENS DARK --ds-background-100: #000000; --ds-background-200: #000000; --ds-gray-100: #1a1a1a; --ds-gray-200: #1f1f1f; --ds-gray-300: #292929; --ds-gray-400: #2e2e2e; --ds-gray-500: #454545; --ds-gray-600: #878787; --ds-gray-700: #8f8f8f; --ds-gray-800: #7d7d7d; --ds-gray-900: #a0a0a0; --ds-gray-1000: #ededed; --ds-gray-alpha-100: #ffffff12; --ds-gray-alpha-200: #ffffff17; --ds-gray-alpha-300: #ffffff21; --ds-gray-alpha-400: #ffffff24; --ds-blue-700: #0071f6; --ds-blue-900: #50a8ff; --color-focus: #50a8ff; --color-primary: #ededed; --color-on-primary: #0a0a0a; --color-primary-hover: #cccccc; --color-surface-hover: #1f1f1f; FONTS sans: Geist (Vercel, open source SIL OFL 1.1), variable weights 100-900, self-hosted woff2 "GeistSans" with a size-adjusted Arial fallback (ascent 94.56%, descent 27.76%, size-adjust 106.28%); weights in use 400 (body, H1), 450 (all headings), 500 (buttons, labels, footer headings), 600 (heading-14 only). mono: Geist Mono (OFL), variable 100-900; hero mobile tagline, terminal snippets, status label, passport art. pixel: Geist Pixel Square/Grid/Circle/Triangle/Line (OFL, weight 500), preloaded for campaign art only. alternative: Geist is free (npm "geist", Google Fonts "Geist" and "Geist Mono"), so use it directly. If it is unavailable: Inter (weights 400/450 via the variable axis, tracking -0.05em on headings) and JetBrains Mono. TYPOGRAPHY RULES Headings are short sentences in sentence case, text-wrap balance, left aligned (centered only in the final CTA and in the mobile hero); H2 max 18ch in the first feature row. Big type is tight: line-height equals the font size for 56-64px headings; letter-spacing is always negative on headings (-0.06em at 48-64px, -0.04em at 24-32px, -0.02em at 16-20px). Two-tone sentences: quotes start with the subject in #171717 and continue in #4d4d4d at the same size ("Notion powers millions" + "of agent conversations daily on Vercel."). Body and descriptions are 14-16px #4d4d4d; nav links 14px #4d4d4d -> #171717 on hover. Mono is used for anything that looks like a terminal or a machine label: lowercase or UPPERCASE micro text 11-14px. Links in menus are #171717, underlined only on hover (underline-offset 5px, decoration #c9c9c9 1px). COLOR RULES Light page: ~95% #fafafa canvas, #171717 type, white raised buttons, grey #4d4d4d secondary text; black appears as the primary button, the triangle and dark product tiles (Passport card art #171717). Dark page: #000000 canvas, #ededed type, #a0a0a0 secondary; the primary button inverts to #ededed with a #0a0a0a label; secondary buttons are #000000 with a #2e2e2e ring. Blue #0072f5 only for focus rings and system status; green #28a948 only for terminal check marks; the spectral red/green/blue appears only as light in the hero scene and in the Passport hover glow. No color bands between sections: the whole page is one continuous canvas; separation is only whitespace and hairlines. LAYOUT container: max 1400px content + 24px side margins (1448px total), centered; at 1440 the content spans x 24-1401 (scrollbar 15px) grid: 12 columns, gap-x 20px at container >=1200, 0 below (columns still used); feature rows: heading cols 1-8 or 5-12, media 8 columns, text rail 3 columns (cols 10-12 or 1-3); below 961 everything stacks in one column section rhythm: sections 208px apart (160px below 601); feature rows inside a section 256px apart (80px below 601); heading-to-content 44px; the final CTA has 276px above and below (212px below 601); footer padding 40px top and bottom density: airy; alignment: left, with alternating left/right headings; compositions: split hero (text / canvas / list), 8+3 feature rows, bento of 1 large + 2 small cards, centered CTA SHAPE AND DEPTH radius: 6px on header buttons, cards, popover rows, burger focus; 8px on large non-pill buttons (mobile menu); 12px on popovers (logo menu); pills on hero, banner and CTA buttons borders: no real borders on buttons or cards; 1px rings by box-shadow (#ebebeb on buttons, rgba(0,0,0,0.08) on cards and header); a 1px #00000014 rule above the mobile menu account block shadows: none on cards; layered soft greys exist only for menus and modals (--ds-shadow-menu, --ds-shadow-modal) materials: no blur, no glass; the hero canvas is the only "material" (light, grain in dark mode) COMPONENTS button-primary (Geist button, variant default): fill #171717, label #ffffff Geist 500; large: height 40px, padding 0 12px + 6px inner label padding (text inset 18px), 16px/24px, shape pill in hero and CTA (radius 9999px), radius 8px elsewhere; small (header): height 32px, padding 0 6px (+6px inner), 14px/21px, radius 6px hover: bg #383838; transition border-color, background, color, transform, box-shadow 150ms cubic-bezier(0.4,0,0.2,1) focus-visible: box-shadow 0 0 0 2px #ffffff, 0 0 0 4px #0072f5; instant (transition none while focused) active: no visible change measured (react-aria press), not measured, est none disabled: bg #f2f2f2, label #8f8f8f, ring 1px #eaeaea, cursor not-allowed button-secondary: fill #ffffff, label #171717 500, ring 0 0 0 1px #ebebeb (box-shadow); same sizes and shapes as primary hover: bg #f2f2f2 (dark #1f1f1f), label stays #171717; 150ms same easing focus-visible: the 1px ring is replaced by 0 0 0 2px #ffffff, 0 0 0 4px #0072f5; instant button-tertiary (banner "Get your ticket ›"): transparent pill, 32px, label 14px 500 #171717, chevron 14px after the label; hover bg #00000015, 150ms button-icon (burger): 44x44 min, 24px two-line icon (lines at y 8 and 16, stroke 1.5) -> X when open; focus ring as above, radius 6px text link (nav): 14px/20px #4d4d4d, no underline; hover #171717; the header nav has no transition (instant); footer links 14px/20px #4d4d4d, hover #171717 with color 100ms cubic-bezier(0.4,0,0.2,1) menu link (mega-menu): 20px/32px 400 #171717; hover underline 1px #c9c9c9 offset 5px, instant; external links end with "↗" card (latest): bg #fafafa, radius 6px, hairline ring, padding 20px, overflow hidden, content pinned bottom-left (title 24px/26.4px 450 -1.2px #171717, description 14px/20px #4d4d4d max 288px); art fills the card behind; hover animates only the art (Page: home S5); focus-visible outline 2px #0072f5 offset 4px badge "New": small grey pill after footer and menu links, 12px label (not measured, est 20px tall, bg #ebebeb, label #171717) input: not on the home page; Geist form tokens: height 40px large / 36px default / 32px small, font 16/14px, radius 6px, ring 1px #ebebeb (inf); the dashboard search field is measured in Page: dashboard popover / logo menu: 325px wide, bg #ffffff, 1px border rgba(0,0,0,0.08), radius 12px, padding 6px; rows with radius 6px, hover bg #0000000d; items "Copy Wordmark", "Copy Logo", "Download Brand Assets", "Brand Guidelines"; opens from the header logo (right-click, inf) with an opacity fade 100ms theme switcher: three icon toggles (system, light, dark) in a segmented control at the bottom right of the footer (not measured, est 28px each) status indicator: "ALL SYSTEMS NORMAL." Geist Mono 12px uppercase blue with a small blue dot, bottom left of the footer (est) GLOBAL CHROME header: sticky top 0, height 64px, z 75, full width; content row max 1448px with 24px padding; background transparent at scroll 0; once window.scrollY > 0 it gets data-scrolled: bg #fafafa and a 1px rgba(0,0,0,0.08) bottom line, instant (no transition, no blur) left: Vercel triangle logo 21x18 (light #171717, dark #ededed) in a 37px hit area, then nav: "Products ⌄" and "Resources ⌄" (14px #4d4d4d, chevron 14px rotates 180deg when open, instant), "Enterprise", "Pricing"; items padded 6px 12px, gap 0 right: Get a Demo (secondary small), Log In (secondary small), Sign Up (primary small), 12px apart mega-menu: full-width panel under the header, bg #fafafa, 1px rgba(0,0,0,0.1) bottom line, columns of min 250px with 16px gaps aligned to the page margin, padding 4px top 24px bottom; column heading 14px #4d4d4d, 5px below it links 20px/32px #171717; while open the header becomes #fafafa without its line and the page below is covered by rgba(250,250,250,0.5); opens on hover after an 80ms intent delay, switches instantly between triggers, closes 160ms after the pointer leaves the nav; click toggles; keyboard: arrows, Home, End, Escape; panels appear and disappear instantly (visibility, no fade) mobile header and menu (<=880px): bar 64px with the logo left and the burger right; the menu is a full-screen white (#ffffff) sheet under the bar, opening instantly (visibility + opacity, no transition); rows 44px: Products and Resources as accordions with a chevron, then Enterprise and Pricing, all 22px/33px 400 #4d4d4d (hover #171717, bg #0000000d, radius 6px); inside an accordion: group label 14px 500 #4d4d4d and links 18px #171717; below, three full-width 40px buttons 16px apart with radius 8px: Get a Demo, Log In (secondary), Sign Up (primary); the header turns #ffffff while the menu is open footer: no pre-footer band; same container; padding 40px 0; grid of 12 columns (8 at lg, 6 at md, 4 mobile), each group spans 2 columns, gaps 24px: groups Agent Stack, Core Platform, Security, Tools, Frameworks, SDKs, Build, Learn, Explore, Company, Legal & Trust, Social (6 per row at 1440); headings 14px 500 #171717 with 12px margins; links 14px/20px #4d4d4d, 2px vertical padding, hover #171717 100ms; "New" badges after new products; bottom: triangle logo 16px, then a row with the status indicator left and the theme switcher right (min-height 34px, 32px margin-top) dashboard chrome: the logged-in app replaces this header and footer with a 256px sidebar and a 56px top bar (Page: dashboard, Recipe dashboard-sidebar) other: campaign banner at the top of main ("Ship 26 is coming to SF" + "Get your ticket ›"); cookie consent not shown for this visitor IMAGERY AND ICONS hero media: real-time 3D light scene of the Vercel triangle (Recipe hero-triangle-scene) product visuals: light-grey product UI screenshots of customer products (Notion AI chat, Zapier, Mintlify) in 8-column frames, aspect 12:6 desktop and 4:3 mobile, no device frames, no tilt, cropped at the edges and faded into the page with a 160px gradient to #fafafa at the bottom; separate light and dark versions card art: line-art geometry (eve wordmark strokes), a black passport booklet with multilingual mono text, a white terminal panel with Geist Mono output and green checks illustration: none; photography: none icons: Geist icons (16px line, 1.5px stroke, rounded caps), chevrons 14px; logos in the customer row are single-color #171717 (#ededed in dark) density: text-led with one large visual per section MOTION intensity: functional (with one expressive hero scene) hover policy: fills and text colors only; buttons 150ms cubic-bezier(0.4,0,0.2,1), footer links 100ms, header nav and menu links instant; cards animate their art (opacity 300ms ease-out, small rotate/scale 300ms ease-out, glow fade 1000ms) scroll reveal: none (no fade-ins); the sticky header line appears instantly after the first pixel of scroll; sections below the fold use content-visibility: auto signature motion: 1) hero triangle light scene reacting to pointer and capability hover (Recipe hero-triangle-scene); 2) hero capability list that expands on hover and, on mobile, a mono tagline that scrambles between phrases (Recipe hero-capabilities); 3) customer logo marquee on mobile, 50s per loop, 48px gaps (one line, see Page: home S3); dashboard motion (sidebar panes, menus, toasts) is in the dashboard recipes overlays (design system): fade and scale from 0.96 over 300ms cubic-bezier(0.175,0.885,0.32,1.1); popovers 200ms with the same curve; tooltips fade in 100ms after a 400ms delay page transitions and loading: Next.js client navigation without transitions; skeleton shimmer 1.5s ease-in-out infinite where used reduced motion: the marquee stops and becomes a horizontal scroller; the scramble cycle does not run (first phrase stays); transitions marked motion-reduce are removed; the hero scene keeps a static frame (est) RESPONSIVE >=1200: 12-col grid with 20px gutters; H2 56px; footer 6 groups per row 961-1199: hero still in three columns (text / canvas / capability list); grid gutter 0; footer 4 groups per row 881-960: hero stacks: canvas on top, H1 64px centered, mono tagline instead of the capability list, buttons side by side; feature rows stack (heading, media, text) <=880: burger menu replaces the nav and the right-side buttons 601-880: H2 48px; sections 208px apart 401-600: H2 48px; sections 160px apart; footer 3 groups per row <401 (390 mobile): H1 48px/56px; H2 32px/40px; hero canvas height min(125vw, 400px) at the top, text centered across the full container, buttons full width stacked 12px apart; logos become a marquee; latest cards stack; footer 2 groups per row CONTENT AND VOICE headline style: short declarative sentences of 4-8 words, sentence case, no period ("Build agents on infrastructure that thinks like them", "Ship apps that scale from zero to millions instantly"); hero H1 is a 2-word category name ("Agentic Infrastructure") body: one sentence per item, 10-20 words, concrete product nouns; proof as customer + number ("Zapier serves over 100 million monthly website visits on Vercel.") tone: confident, technical, terse; addresses developers and their agents CTA labels: "Deploy now", "Talk to sales", "Get a Demo", "Log In", "Sign Up", "Onboard your agent", "Get your ticket" case and punctuation: Title Case in buttons and nav, sentence case elsewhere; "↗" for external links SUBSTITUTIONS fonts: use Geist and Geist Mono (open source) directly; logo: a plain equilateral triangle placeholder [LOGO]; customer logos: [LOGO] text placeholders in #171717; product screenshots: original neutral UI mockups in light grey with the same aspect and bottom fade; hero scene: original WebGL light scene around a generic triangle, or the static fallback (black triangle with a soft blurred shadow on #fafafa); card art: original line art, a dark booklet tile, a mono terminal panel TECH Next.js (App Router, Turbopack chunks under /vc-ap-vercel-marketing/_next/), Tailwind CSS v4 with container queries, Geist design system tokens (--ds-*, --geist-*), react-aria buttons (data-hover, data-focus attributes), hero renderer in a worker with WebGPU or WebGL2 (radiance cascades lighting), content-visibility for below-the-fold sections SCREENSHOTS - file: vercel_2026_home_d1440_top.jpg shows: home first screen at 1440x900 (1425 wide with scrollbar), scroll 0, light theme source: live https://vercel.com/ 2026-10-05 (direct connection, see header) key values: page #fafafa; header 64px transparent; nav 14px #4d4d4d; header buttons 32px radius 6px; banner 14px + pill link; H1 64px/64px 400 -3.84px #171717; Deploy now 124x40 pill #171717; Talk to sales 130x40 pill white with #ebebeb ring; canvas 1080x720 centered; capability list 16px at the right; logo row 44px tall do not copy: Vercel logo, customer logos; use placeholders - file: vercel_2026_home_m390_top.jpg shows: home first screen at 390x844 @2x: logo and burger, banner, canvas 390x400, H1 48px centered on 2 lines, mono tagline 16px #4d4d4d, two full-width 40px pill buttons, logo marquee - file: vercel_2026_home_d1440_top-dark.jpg shows: the same first screen in dark mode at 1440x900 @1x (prefers-color-scheme dark), scroll 0 key values: page #000000; type #ededed; nav #a0a0a0; Deploy now #ededed with #0a0a0a label; Talk to sales and header secondaries #000000 with #2e2e2e ring; Sign Up #ededed; triangle black with a white backlight glow fading into a grainy halo; logos #ededed - file: vercel_2026_overview_d1440_states.png shows: state sheet (2x crops): hero buttons default; Deploy now hover #383838; Talk to sales hover #f2f2f2; focus-visible rings (2px white gap + 2px #0072f5) on both; header buttons default (Get a Demo, Log In secondary 32px; Sign Up primary); the focus rows were taken with the pointer still over Talk to sales, so it shows its hover fill - file: vercel_2026_nav-mega-menu_d1440_open.jpg shows: Products mega-menu open: full-width #fafafa panel 245px tall, three columns (Agent Stack, Core Platform, Tools) with 14px grey headings and 20px links, page dimmed by rgba(250,250,250,0.5) - file: vercel_2026_overview_m390_menu-open.jpg shows: mobile menu open: white sheet, 22px rows Products ⌄, Resources ⌄, Enterprise, Pricing; full-width buttons Get a Demo, Log In, Sign Up (radius 8px); X icon - file: vercel_2026_home_d1440_scrolled-header.jpg shows: header after scrolling: solid #fafafa with a 1px rgba(0,0,0,0.08) bottom line REBUILD CHECK result: passed 2026-10-05 after two fixes (marketing home only). A plain HTML rebuild of the header, banner, hero (text, CSS-only triangle with a blurred shadow and floor glow, capability list), logo row and one feature row, made only from these memos with Geist from Google Fonts and placeholder copy and logos, was compared with the live screenshots at 1440 and 390. Header, nav, button sizes and shapes, H1 and H2 metrics, hero three-column layout, mobile stacking and the mono tagline matched. Fixed in the memos: the triangle size (192x166px, not 193px tall) and the mobile hero text block width (full container, so the buttons are full width). Remaining known differences: the CSS triangle shadow is a static approximation of the live light scene (softer, centered); real customer logos and product screenshots are replaced by placeholders. The dashboard set (Page: dashboard and its recipes) has not been rebuild-checked.