A literary, editorial take on the coding-agent category — not the terminal-forward near-black the label implies. The canvas is a deep teal-black #091c1e (base #0b0d0b) lit by cream #f6fff5 type, anchored by an enormous SAGITTAIRE SERIF display headline that mixes italic and roman in one line ("Everything Is Changing") at ~89px, weight 400, with dramatic -6% tracking, left-aligned behind a vertical gray-green rule tick. PolySans Var carries body and sub (18/26, 400) and Berkeley Mono carries UPPERCASE eyebrows and code, so the serif stays purely expressive. Structure is drawn with #848c84 gray-green hairlines and small vertical rule ticks — there are ZERO box-shadows and no CSS gradients on the page; depth is colour steps only. Controls are small and sharp (radius 4–6px, 30–38px): the ONE saturated accent, orange #f6833b with ink text, is the nav Start button; the hero primary is a cream #eaf3e9 button, secondaries are black #000 with cream text and a #848c84 border. The only atmospheric moment is a warm ember glow behind a "Subscriptions, At Last" band. Motion is 0.15s cubic-bezier(.4,0,.2,1) on colour/border.
Browse Amp (Sourcegraph) in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: ampcode.com (live DOM, computed styles), 2026-07-23 (desktop 1400px). Coverage: marketing home (nav, hero, "Subscriptions" band, "Use Agents Anywhere"). Dashboard: needs-dashboard (Sign In required). Responsive: not deeply captured.
A literary, editorial take on the coding-agent category — not the terminal-forward near-black the "AI coding agent" label implies. The canvas is a deep teal-black (#091c1e) lit by cream type, and the whole page is anchored by an enormous Sagittaire serif display headline that mixes italic and roman in one line ("*Everything* Is Changing"), set at ~89px with dramatic negative tracking — the page reads like the cover of a book, not a dev tool. Structure is drawn with thin gray-green hairlines and small vertical rule ticks before each section, never shadows (there are zero box-shadows on the page). Sans (PolySans) and mono (Berkeley Mono) carry all the utilitarian text, so the serif can stay purely expressive. One warm orange #f6833b is the single saturated accent, on the nav's Start button. Feels: editorial, literary, dark, deliberate.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #091c1e | Deep teal-black page ground (hero) |
| background | #0b0d0b | Base near-black (--background) |
| black | #000000 | Secondary-button fill |
| secondary | #333432 | Raised dark surface |
| foreground / cream | #f6fff5 | Primary text, headings |
| accent-white | #f1fff1 / #eaf3e9 | Bright cream, hero-button fill |
| white | #ffffff | Section-head text, card |
| muted | #9ca49c / #898989 | Secondary / body-muted text |
| border | #848c84 | Gray-green hairlines, rule ticks |
| input-border | #f8fff8 | Input border (bright) |
| Token | Hex | Role / usage |
|---|---|---|
| orange | #f6833b | The one saturated accent — nav Start button (ink #091c1e on it) |
| green | #10b981 | Rare secondary accent |
Rule: chrome is the teal-black + cream + gray-green ladder; orange #f6833b is rationed to the primary Start CTA. Depth is colour + hairlines — there are no shadows.
Sagittaire Display — expressive, mixes italic + roman (hero), weight 400 large / 300 section headsSagittaire Text, Perfectly NinetiesPolySans VarBerkeley Mono — uppercase eyebrows, code| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Hero display | Sagittaire Display | 89 / 80.5 | 400 | -5.4px (-6%) |
| Section head | Sagittaire Display | 24 / 33 | 300 | normal |
| Sub-headline | PolySans Var | 18 / 26 | 400 | normal |
| Body / muted | PolySans Var | 14-16 | 400 | normal, #9ca49c |
| Eyebrow | Berkeley Mono | 12 / 17 | 400 | normal, UPPERCASE |
| Button / UI | PolySans Var | 13-16 | 500 | normal |
Patterns: the serif carries all expressive display (italic/roman mix, tight negative tracking); PolySans and Berkeley Mono handle everything functional. Eyebrows are uppercase mono.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.