# Zed homepage design spec (free) - Site: zed.dev - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Zed. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Zed'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 — centered editorial introduction **Evidence provenance:** Public-page capture at `https://zed.dev/`, desktop viewport 1440×900 at scrollY 0 and phone viewport 390×844 at scrollY 0; same-page resize, URL unchanged. Measurements below are viewport-relative unless identified as document coordinates. **CRAFT ARCHETYPE:** type-led ## The big idea A centered, text-first introduction sits between a short announcement strip and a three-column feature band. The desktop hero occupies y=94–542, or 448px high. It contains no visible product image; the product preview is a separate section below the feature band. The warm, lightly ruled page framing and ample open space matter as much as the headline. Use the observed geometry and hierarchy, not source copy or identity. ## Layers At 1440px, center the heading in a 390×58px box at x=525, y=211. Place supporting copy in a 512×48px box at x=464, y=277. Two 36px-high actions begin at y=357: widths 162px and 152px, separated by 8px. A 283×20px availability note sits at x=579, y=405. The announcement strip is y=57–93, 36px high; the next three-column band begins at y=542. Avoid adding a hero illustration or extending the section: both would alter the measured composition. ## Type Use an elegant serif display face for the headline, 48px/57.6px, weight 340, tracking −0.96px on desktop. Supporting sans is 16px/24px with −0.4px tracking; action labels are 14px/20px. Keep the small note at 13px/19.5px. ## Colour Use a warm near-white ground, restrained charcoal body text, and saturated blue for headline and primary action. The secondary action is pale, with a fine edge rather than a heavy shadow. ## States and motion Captured CSS includes a hero entrance from opacity 0, translateY(14px), scale(.99) to its resting state. Trigger and duration are unknown; do not require a specific animation. ## Phone at 390px The announcement occupies y=57–119, with its label at x=174, y=65 and second line at x=56, y=91. Hero runs y=120–568, still 448px tall. Heading is x=32, y=182, 326×100px and wraps to two lines. Supporting copy is x=32, y=290, 326×72px. Actions move into a vertical stack, each 326×36px at y=394 and y=438. The note is x=54, y=486, 283×20px. Desktop navigation links are hidden in the phone header; the brand area and menu control remain. The product-preview section begins at y=568 and is cropped by the 844px viewport; do not infer its unseen lower extent. ## Do NOT copy or add Do not reuse source name, wording, logos, platform claims, or source-specific button labels. Do not add unsupported hero media or describe below-fold material as absent. ## Checks you can run At 1440px confirm hero y=94–542, heading x=525 with width 390, actions y=357 and next band y=542. At 390px confirm hero y=120–568, heading x=32 with width 326, stacked actions at y=394/438, and preview begins at y=568. --- # Navigation — compact sticky header **Evidence provenance:** Public-page computed-style and pixel captures at `https://zed.dev/`, desktop 1440×900 at scrollY 0, 900, 1800 and 2700, plus phone 390×844 at scrollY 0. Requested URL remained unchanged. Phone measurements are viewport-relative. **CRAFT ARCHETYPE:** type-led ## The big idea A shallow, sticky header carries a left identity, a compact horizontal set of links, then utility and action controls. Preserve the desktop’s broad separation between navigation and right-side utilities. The phone view simplifies rather than compresses the desktop link row: it retains the identity at left and a square menu control at right. Do not infer a drawer or menu-open state. ## Layers At desktop the header spans x=0–1440 and y=0–57; the nav container is x=160–1280, y=0–56, width 1120px, with 14px left and 12px right padding. Identity link measures 68×23px at x=174, y=17. The desktop link controls are 32px high at y=12; observed widths include 92px, 110px, 96px, 54px, 68px and 74px. The utility control is 133×32px at x=918; a 92×32px text action follows at x=1064, then a 106×32px filled action at x=1162. The large open interval before utilities is intentional. Sticky placement is observed in all four desktop scroll captures. ## Type Navigation labels use a neutral sans at 14px/20px, weight 400, tracking −0.35px. The identity area is 16px/24px. A compact keyboard-hint treatment, when present, is 11px monospaced; avoid copying its text. ## Colour Use a warm off-white header, dark neutral labels and a saturated blue filled action with white type. Keep borders and control edges understated; no prominent shadow is evidenced. ## States and motion Sticky positioning is observed at scrollY 0, 900, 1800 and 2700. Hover, focus appearance, menu-open state and transition behavior are unknown. Ensure accessible focus in implementation without claiming a particular visual treatment from the reference. ## Do NOT copy or add Do not reproduce source branding, labels, shortcut text, icon shapes or destination claims. Do not invent the phone drawer, its contents, or any menu animation. ## Checks you can run At 1440px verify header height 57px, nav width 1120px, identity at x=174/y=17 and filled action at x=1162 with size 106×32px. Scroll to 900px and confirm the header remains at y=0. At 390px verify header 57px high, nav x=16 with width 358px and height 55px, identity x=28/y=17 sized 68×23px, and menu control x=330/y=13 sized 32×32px; desktop links and utility controls are absent. --- # Signature component — product-interface preview **Evidence provenance:** Public-page pixel and computed-style captures at `https://zed.dev/`, desktop 1440×900 at scrollY 0 and 900, and phone 390×844 at scrollY 0. URL remained unchanged. The desktop screenshot visibly shows the interface preview beginning around viewport y=455; its section wrapper is measured at document y=640 with height 770px. These are distinct observations: the preview artwork visibly extends above the wrapper’s measured top. Phone shows the preview section beginning at y=568 and cropped at the viewport bottom. **CRAFT ARCHETYPE:** product-UI-led ## The big idea A large, detailed software-interface demonstration is the signature element below the introductory hero and three-column feature band. It combines small-scale work-list content, a central assistant/conversation pane and a code-editor pane. Treat it as a composed product screenshot or carefully structured interface mock, not as a generic decorative card. The screenshot crop and measured section geometry do not establish every panel boundary or the full lower content; keep those details unknown rather than filling gaps with invented interface behavior. ## Layers At desktop, the containing section is measured as 1440×770px at document y=640. Its centered content aligns roughly to the 1120px site column, x=160–1280. In the viewport image, the product frame is visibly around x=113–911 and starts near y=455, continuing below the 900px crop. A small demo control is measured 114×27px at x=663, y=640 in document coordinates, aligned to the wrapper’s top. Visible panel content begins around x=200 for the left list and x=438 for the central pane; code appears around x=735. Do not resolve the mismatch between wrapper coordinates and visible artwork by assuming a different section height. On phone, the section begins at y=568; interface content is already visible there and cropped at y=844. A blue circular 64×64px control is centered at x=163, y=670. Visible interface typography ranges from 10px metadata to 12px code. ## Type Use restrained neutral sans for interface chrome and a monospaced face for code-like detail. Keep interface labels around 10–12px; do not enlarge them into marketing headlines or copy the displayed records. ## Colour Favor pale neutral canvas and panes, thin gray divisions, dark text, muted metadata and restrained syntax colors. The phone-visible round control is saturated blue with a light central glyph. ## States and motion The phone control has a measured 0.15s cubic-bezier transition. This alone does not establish playback behavior or hover treatment; both are unknown. The desktop demo control also has a short transform transition in computed styles. ## Do NOT copy or add Do not reproduce source identity, code, task descriptions, record text, interface labels or implied live-product behavior. Do not add unsupported device panes or claim that the preview is interactive beyond the visible control. ## Checks you can run At desktop verify wrapper document y=640 with height 770px, demo control 114×27px at x=663/y=640, and visible frame beginning near viewport y=455. At phone verify section y=568, round control 64×64px at x=163/y=670, and interface crop at viewport bottom y=844.