# Warp homepage design spec (free) - Site: warp.dev - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Warp. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Warp'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 — statement above a live system diagram Evidence provenance: Based on the supplied desktop and 390px screenshots and computed hero, heading, button, caption, and telemetry measurements. The screenshots show a pale, gridded interface visualization, not a photographic hero. CRAFT ARCHETYPE: product-UI-led ## The big idea Lead with a large, left-aligned product statement, then show a wide system diagram below the copy and actions. At 1440px, the nav is 64px tall and the hero section is 925px tall. Hero content begins at x=154px; the measured heading box is 720×176px. Preserve the broad, mostly open area to the right of the text rather than filling it with invented content. ## Layers Use a white background with faint vertical rules and a sparse dot grid, as visible in the screenshots. Stack the heading, supporting paragraph, two adjacent actions, and a small supporting note. Below them, show the diagram with its narrow caption rail, small outlined end controls, pale lavender field, grid of faint outlined cells, and a few saturated blue cells. The screenshot shows a small white “live” chip over the diagram. The desktop diagram-related telemetry is 1002×43px at x=219px; do not infer that this measurement is the full diagram’s dimensions. Avoid adding unobserved nested cards or other interface content. ## Type Use the measured monospaced styling. Desktop heading: 56px/58.8px, weight 500, with -2px letter spacing. Supporting copy: 13px/21.45px; CTA labels: 12px, weight 600. Figure metadata is 10.5px/17.325px with about 1px tracking. At 390px, the heading is 32px/33.6px in a 342×101px box. ## Colour Use RGB(26, 21, 34) for primary text, RGB(93, 89, 102) for supporting copy, RGB(145, 141, 154) for metadata, and RGB(42, 30, 255) for blue accents. The primary action is dark with white text; its neighboring action is white with a subtle border. The diagram field is pale lavender in the screenshots. ## States and motion The supplied style extraction includes a 0.5s demo-stage entrance and a 12px reveal offset for eligible content when reduced motion is not requested. It does not establish a specific animation inside the diagram. Respect reduced-motion preferences and do not invent interaction behavior. ## Do NOT copy or add Do not reuse the source wording, identity, exact interface labels, or metrics. Do not add photographic imagery, fabricated product content, or unsupported interaction states. ## Checks you can run At 1440px, check the 64px nav, 925px hero section, 56px heading, 40px actions, and 1002×43px telemetry strip. Verify a pale gridded diagram, small caption rail, outlined controls, and blue accent cells. At 390px, check the 342px-wide heading and diagram, 32px heading, and 60px-high actions. ## Phone at 390px The screenshot shows the heading at x=24px, y=148px, in a 342×101px box; supporting copy begins at y=267px. The two actions begin at y=357px and measure 157×60px and 169×60px. The note begins at y=431px, and the diagram begins around y=476px. The diagram is 342px wide. The mobile nav shows a 38×36px mark, a 135×40px dark action, and a 30×30px menu control; desktop links and sign-in are not shown. Preserve this observed layout without claiming an unobserved menu state. --- # Navigation — compact mono controls with contrasting captured states Evidence provenance: Based on the 1440px top screenshot, 1440px below-fold screenshot, 390px screenshot, and computed navigation boxes and styles. CRAFT ARCHETYPE: type-led ## The big idea Use a compact horizontal utility bar: identity at the left, navigation links across the middle, and actions at the right. The desktop bar measures 1440×64px. In the initial screenshot it has a white background and dark text; the below-fold screenshot shows a blue background with white links. These are captured states; the evidence does not establish the trigger for the change. ## Layers In the initial desktop state, the mark measures 38×36px at x=154px, y=14px. The category labels begin at x=220px and are followed by a pricing link at x=567px. Sign-in is at x=939px. The pale-yellow action measures 109×40px at x=1024px, and the dark action measures 135×40px at x=1151px; both begin at y=12px. Links use 12px medium monospaced text, and the actions use 12px semibold text with 14px horizontal padding. In the below-fold screenshot at scrollY=900px, the nav appears at y=-64px with a height of 64px and a blue surface. It shows a different set of links with bracketed markers and a light action measuring 184×33px at x=1117px, y=15px. Reproduce the visible state differences without inventing how or when they are triggered. ## Type Use a monospaced family. Initial-state links are 12px, weight 500, with 19.8px line height; button labels are 12px, weight 600. The below-fold links are measured at 13px with 21.45px line height. ## Colour Initial state: white background, RGB(26, 21, 34) text, RGB(238, 241, 124) pale-yellow action, and a dark primary action with white text. Below-fold screenshot: blue background, white links, and lavender index accents measured as RGB(183, 164, 242). The 390px screenshot shows the dark action against white. ## States and motion The nav has a measured 0.25s transform transition. The screenshots show the contrasting desktop states but do not establish their trigger or the precise transition. Do not infer dropdown behavior. On mobile, a menu control is visible, but its opened state is not shown. ## Do NOT copy or add Do not reuse the source identity, exact link labels, bracketed letter sequence, or CTA wording. Do not claim an open menu, sticky threshold, or unobserved hover state. ## Checks you can run At 1440px, verify a 64px bar, 38×36px mark, 12px initial-state links, and 109×40px and 135×40px actions. Compare the white initial state with the blue below-fold screenshot. At 390px, verify the mark, 135×40px action, and 30×30px menu control; the desktop links and sign-in are absent. --- # Below-fold feature presentation — capability list beside product UI Evidence provenance: Based on the supplied below-fold screenshot at scrollY=900px and measured section, heading, paragraph, list-item, and interface-figure boxes. The screenshot shows a capability list beside a product-interface figure. CRAFT ARCHETYPE: product-UI-led ## The big idea Frame a two-column capability section with a short introduction, stacked feature rows on the left, and a product-interface figure on the right. The screenshot supports this feature-list-and-figure pattern; it does not establish the list’s interaction behavior. ## Layers The section box is 1440×934px at x=0, y=204px in the below-fold screenshot’s viewport coordinates. The content begins at x=154px. Place a small blue eyebrow above the 34px heading, measured at 1132×56px; the supporting paragraph is 560×22px. The left-side rows begin at x=155px and are 564px wide. Their visible heights are 96px or 117px. The first row is 96px tall, and subsequent visible row boxes include heights of 117px and 96px. Use the screenshot’s thin separators, white row surfaces, and light-gray highlighted first row. Row headings are 18px; supporting text is 12.5px. The right-side interface figure begins around x=732px, with a visible 169px-wide caption at x=919px. Reproduce its narrow caption rail and pale interface panels as shown, without inventing unseen details. ## Type Use monospaced typography. The measured section heading is 34px with 56.1px line height; row headings are 18px/29.7px at weight 600. Supporting copy is 12.5px/20.625px, and the eyebrow is 11px. Keep the hierarchy readable and consistent with the screenshot. ## Colour Use RGB(26, 21, 34) for primary text, RGB(93, 89, 102) for descriptions, and RGB(42, 30, 255) for the eyebrow and visible row indices. Rows are white with subtle gray separators; the first visible row has a light gray-lavender fill. The figure panels are pale and low-contrast in the screenshot. ## States and motion The first row appears highlighted in the screenshot. No click outcome, hover behavior, or switching animation is established by the supplied evidence. Do not assign a specific motion behavior to this component. ## Do NOT copy or add Do not reuse source headings, descriptions, exact labels, or interface text. Do not turn the rows into pricing cards or testimonials, and do not add unsupported metrics or claims. ## Checks you can run At the captured desktop viewport, verify the 1440×934px section, 34px heading, 564px-wide left rows, and right-side interface figure beginning around x=732px. Check visible row heights of 96px or 117px, 18px row headings, 12.5px supporting text, and the highlighted first row. Do not assert a selection interaction based only on the screenshot.