# Vercel homepage design spec (free) - Site: vercel.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Vercel. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Vercel's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero composition Evidence provenance: `https://vercel.com/`, desktop 1440×900 at scrollY 0 and phone 390×844 at scrollY 0; public-page pixels and computed styles. No redirect observed. The mobile capture shows the hero continuing to the viewport bottom; content below the crop is unknown. Visible marks, wording, and customer identities are layout evidence only, not assets or copy to reproduce. CRAFT ARCHETYPE: product-UI-led ## The big idea An expansive, near-white hero sets a large headline and paired actions on the left, a dark geometric focal object near the center, and a compact three-line descriptor on the right. A customer-mark row sits low in the desktop composition. Keep the deliberate empty space and asymmetry; use original artwork and content. ## Layers At desktop, the hero bounds are x=24, y=64, width 1392px, height 836px. The headline block begins at (24,328) and measures 444×200px; the heading itself is 444×128px. Two pill actions begin at y=488, each 40px high, with x positions 24 and 160 and widths 124 and 130px. The dark triangular object is visually centered near x=512, y=300; its exact asset bounds and shadow are not established by the measurements. The right descriptor navigation occupies x=1052, y=352, 364×152px, with three lines beginning near y=385, 417, and 449. An announcement is centered above the hero around y=80–112. A row of marks is visible near the bottom of the desktop capture; precise bounds are unknown. ## Type The measured face is Geist Sans. Desktop heading: 64px/64px, weight 400, tracking −3.84px. Descriptor: 16px/24px, weight 450, tracking −0.32px. Actions: 16px/24px, weight 500. Keep the two-line desktop heading. ## Colour Use near-white, #171717-like dark text, muted #4d4d4d, and white secondary surfaces. Preserve strong contrast without adding accent colors. ## States and motion The action transition is 0.15s with cubic-bezier(0.4,0,0.2,1); the “Drop to deploy” element has a 0.3s opacity transition. Actual drag behavior and other animation are unknown; do not infer them from labels. ## Phone at 390px At 390×844, the sticky header is 64px high. The announcement text is at x=38, y=78, 152×20px; its adjacent action is x=198, y=72, 153×32px. The hero is x=24, y=64, width 342px, height 780px, so it extends 64px below the viewport. The geometric focal object is visually centered around x=195 and occupies approximately y=177–323; exact bounds are not measured. The “Drop to deploy” element is centered at x=130, y=374, 130×26px. The heading is centered at x=24, y=444, 342×112px, set 48px/56px with −2.88px tracking. A mono descriptor is x=24, y=572, 342×24px. Full-width actions are x=24, y=624 and 676, each 342×40px. Marks begin visibly around y=760 and are cropped at the right and bottom. Desktop right descriptor and desktop navigation links are absent; the mobile menu control is in the header. Anything below y=844 is unknown. ## Do NOT copy or add Do not reproduce names, marks, source text, claims, or customer proof. Do not invent functionality, artwork details, or unseen below-fold content. ## Checks you can run At 1440px, verify the 64px header, 24px hero inset, 1392×836px hero, 64px heading, paired 40px actions, and right descriptor placement. At 390px, verify the measured 342px hero width, centered heading, descriptor and actions positions, menu substitution, and bottom crop. --- # Navigation Evidence provenance: `https://vercel.com/`, desktop 1440×900 at scrollY 0 and 900, and phone 390×844 at scrollY 0; public-page pixels and computed styles. The same desktop header remains visible at scrollY 900. No redirect observed. Source labels and mark are not reusable copy or assets. CRAFT ARCHETYPE: product-UI-led ## The big idea A slim sticky utility bar balances a small left mark and compact primary links against three right-aligned account or conversion actions. On phone, retain the mark and substitute a menu button for the desktop links and actions. Keep the bar low-contrast and the single filled action visually distinct. ## Layers Desktop header bounds are (0,0)–(1440,64), position sticky. The mark link is x=16, y=15, 37×34px. Primary navigation occupies x=65, y=0, 356×64px; its four 32px-high targets begin at x=65, 159, 264, and 353, with widths 94, 104, 89, and 68px. The right action targets are x=1152, 1265, and 1341; their sizes are 101×32, 64×32, and 75×32px, ending at x=1416 and leaving a 24px right inset. Targets are vertically placed at y=16. At scrollY 900, the header background measures rgb(250,250,250), with a subtle divider visible in pixels; at the initial capture its computed background is transparent. On phone, the header remains 390×64px. The mark remains at x=16, y=15, 37×34px. A menu button sits at x=332, y=10, 44×44px, with a 6px radius. Desktop links and right actions are not shown in the phone capture. ## Type Measured navigation text is Geist Sans, 14px/20px, weight 400, rgb(77,77,77). Right actions are 14px/21px, weight 500. Keep labels compact and centered in 32px targets; dropdown-style items include a 3px internal gap. Do not copy the observed labels. ## Colour Use #171717-like foreground, muted #4d4d4d navigation text, near-white scrolled background, white secondary action surfaces, and a dark filled action with white text. Desktop action corners measure 6px. ## States and motion Header opacity transition is 0.3s cubic-bezier(0.4,0,0.2,1); reduced-motion CSS disables it. Action transitions are 0.15s with the same curve. Menu open appearance and hover visuals are not captured; leave them unspecified. ## Do NOT copy or add Do not recreate the mark, names, literal labels, destinations, dropdown contents, or unobserved mobile drawer behavior. ## Checks you can run At 1440px, check the 64px sticky header, 37×34px mark link, 356px navigation region, 32px targets, rightmost edge at x=1416, and 24px margin. At 390px, check the 44px menu target at x=332 and absence of desktop links/actions. Confirm reduced-motion disables the header transition. --- # Editorial product showcase Evidence provenance: `https://vercel.com/`, desktop 1440×900 at scrollY 900; public-page pixels and computed styles. The visible component is a distinct below-hero editorial panel pairing a heading, product-interface image, explanatory copy, and feature list; it is not a repeated hero or footer. The image and content are partially cropped by the viewport. Source product identities, text, and claims are evidence only, not reusable material. No redirect observed. CRAFT ARCHETYPE: product-UI-led ## The big idea A large, pale interface image anchors a product story beneath a wide, two-line heading. A narrow text column sits to the image’s right, vertically aligned around its middle, with a short paragraph and compact feature list. Preserve the asymmetrical editorial rhythm and low-contrast interface treatment with original artwork and writing. ## Layers The section is measured at x=24, y=208, width 1392px, height 2362px in the below-900 capture’s reported layout coordinates. Its heading grid row begins at x=24, y=208 and measures 1392×112px; the heading occupies 673×112px. Grid gaps are 20px horizontally and 4px vertically. The interface image begins at x=24, y=364 and measures 921×486px. The support paragraph begins at x=1083, y=480, width 333px, height 64px. A list begins at y=584; visible rows are 20px high and recur every 26px. The capture visibly crops the image at the viewport bottom, so do not interpret the image’s measured box as fully visible in the screenshot. The sticky header overlays y=0–64. The section’s reported height does not establish the contents of its unseen lower portion. ## Type Measured face is Geist Sans. Heading: 56px/56px, weight 450, tracking −3.36px. Supporting paragraph: 24px/32px, weight 450, tracking −0.96px, muted gray with an emphasized dark phrase. List label and rows: 14px/20px; label regular muted gray, entries weight 500 and dark. ## Colour Use near-white background, #171717-like text, #4d4d4d supporting copy, and a pale, low-contrast interface image. Keep the image legible without adding unsupported vivid accents or ornamental borders. ## States and motion The image and list appear static in the capture. Hover, animation, and image interaction are unknown; do not invent them. ## Do NOT copy or add Do not reproduce source interface screens, brands, marks, wording, testimonials, numeric claims, or feature names. Do not treat the screenshot crop as evidence of unseen panel content. ## Checks you can run At 1440px, check the 24px inset, 1392px section width, 673×112px heading, 20px column gap, 921×486px image, 333px text column, and 26px list cadence. Confirm the rendered viewport crop is not mistaken for the full image or section.