Zed Hero Section

Summary

A light, grid-textured hero with a centered blue serif headline, two CTAs with keyboard chips, a three-column feature strip, and a dark editor screenshot below.

Visual description

The background is off-white with a faint blueprint grid, and a dashed frame with small diamond markers at its corners. A thin blue announcement bar reads "Remote Development is out in Beta!" with an arrow. The nav row has the Zed logo at left, then "Releases", "Extensions", "Docs", "Blog", and "Resources" (with a chevron). At right, a search icon with a "⌘ K" chip, an outlined "Log in" button with an "L" chip, and a solid blue "Download" button with a "D" chip. The centered headline "The editor for what's next" is set in large blue serif. Two lines of grey sub-copy follow. Two buttons sit side by side: a solid blue "Download now" with a "D" chip and an outlined "Clone source" with a "C" chip. A small line below lists platform icons with "Available for macOS, Linux, and soon for Windows". A bordered strip of three columns follows, each with a small blue icon, a label (Fast, Intelligent, Collaborative), and a two-line description. Below, a large dark editor screenshot in a window frame shows a channels sidebar, tabbed Rust code, and a terminal panel, with a play button centered over it.

Key takeaway

• Keyboard chips on each button (D, C, L, K) make the hero feel native to a developer tool.
• A bordered strip of three short labeled features explains the product before the screenshot does.
• Blue is the only accent on a near-white page, paired with a blue serif headline, which keeps the tone calm and confident.

Reuse notes

Strong for developer tools, technical products, and open-source software that need a calm, credible hero. The keyboard chips assume a keyboard-first audience. It needs a real product screenshot, and the play overlay implies a demo video. The light background does not carry directly to a dark-mode site.