Amp
ampcode.com/
Amp is a Engineering & Infrastructure product. See its ampcode.com landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, features, footers, ctas, about us, and 1 more. It's built with Svelte and Tailwind CSS. Its type is set in Sagittaire Display, anchored by a #dfdfc1 palette. Study how Amp structures its messaging, layout and visual hierarchy, then explore more of the best Engineering & Infrastructure website designs.
- Category
- Engineering & Infrastructure
- Style
- DarkColorful
- Stack
- SvelteTailwind CSS
- Fonts
- Sagittaire Display
- Palette
- Meta title
- Amp: Coding agent and dev environment built for the frontier
- Sections
- 6
- Updated
Amp's landing page, section by section
Each section below is cropped straight from Amp's live page — useful references for engineering & infrastructure landing page design.
Heroes
More heroesFeatures
More featuresCTAs
More ctasAbout Us
More about usPricing & Plans
More pricing & plansAmp design review: how the homepage is built
The page alternates dark and light bands: a dark hero with floating task chips, a pale video section, a feature grid, a dark wall of quotes, a dark ChatGPT block, a video carousel, an install section, a dated news list and a light footer. The desktop capture is 6667px tall. The light bands use a khaki cream, #dfdfc1, against a deep green-black, #1b2823, with orange, #f6833b, kept for the "Start" buttons. Sagittaire Display sets every heading, with one word per headline switched to italic, as in "Watch Thorsten Build in Amp".
Above the fold
The header carries five links, "Chronicle" to "About", an outlined "Sign In" and an orange "Start". The centred serif headline rotates between captures: "Agents that keep going", "Share with teammates" and "Ship more". Around it, grey pill chips hold sample tasks such as "Port the CLI to Windows" and "Fix the CSS bleed in the modal", some sharp, some blurred. One orange "Start" button sits under the subhead, and a single-line definition closes the dark band.
Thorsten video and the orb feature grid
On cream, six timestamped chapter pills, from 0:16 to 22:52, sit above a 26-minute screen recording paired with a webcam frame of the presenter. Below, a tall left column headed "Remote Agents, Controllable From Everywhere" runs beside a two-column grid of five features: "Change, Preview and Ship", "Review from Anywhere", "Fix Bugs the Moment They're Filed", "Multiplayer" and "A Terminal into the Orb", each with a UI crop.
Quote wall and ChatGPT tokens
An orange "ORBSERVATIONS" eyebrow tops "A Completely New Experience" on a starry dark ground. Nine italic quotes sit in a borderless three-by-three grid with avatars and handles, starting with "Adam Wathan", then three rows of boxed quote cards run off the right edge. "Take Your Tokens Further" follows, pairing "Link ChatGPT" and "See Amp Tiers" with a ruled list: "Main Agent", "Subagents", "Thread Reader" and "Code Review".
Closing section and footer
"Orbs from Zero" offers a "Start Watching" link, arrow controls and video cards cut off at the edge. "Also: Agents on Your Machines" shows a copyable curl line beside two terminal images, "On Your Machine" and "On All the Other Machines". "Announcements of Amp" lists six dated entries, the top one, "macOS Satellites", on a dark banner, then "VIEW MORE NEWS". The footer has the wordmark, a green "All Systems Operational" dot and four link columns.
On mobile
At 390px the page grows to 9790px. The header drops its links to the logo alone, and the hero keeps only three task chips around "Ship more". The six chapter pills stack as a centred list, and a "Transcript" toggle appears under the video. The feature grid and nine-quote wall become single columns, the ChatGPT buttons sit side by side, and the footer columns stack.
Worth borrowing
- Scattering sample task chips around the headline, some blurred, shows the agent's workload before any copy explains it.
- Timestamped chapter pills above a long demo video let readers jump to the moment they need.
- A dated news list with one dark banner entry turns a changelog into proof of frequent shipping.
