# Amp (Sourcegraph) — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Ground & text
| 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) |

### Accent
| 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.

## 3. Typography Rules

- Display serif: `Sagittaire Display` — expressive, mixes italic + roman (hero), weight 400 large / 300 section heads
- Serif text: `Sagittaire Text`, `Perfectly Nineties`
- Body / UI sans: `PolySans Var`
- Mono: `Berkeley 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.

## 4. Component Stylings

### Buttons
- **Nav primary ("Start")**: bg orange `#f6833b`, ink `#091c1e`, radius `4px`, h `30px`, 1px `#000` border, PolySans 13/500, trailing arrow.
- **Nav secondary ("Sign In")**: bg `#000000`, text cream `#f6fff5`, radius `4px`, h `30px`, 1px `#848c84` border.
- **Hero primary ("Start →")**: bg cream `#eaf3e9`, ink `#0b0d0b`, radius `6px`, h `38px`, 1px `#000` border, PolySans 16/500.
- **Hero secondary ("Sign In")**: bg `#000`, cream text, radius `4px`, h `26px`.

### Inputs
- Dark fill, bright `#f8fff8` input-border, radius ~4-6px, cream text. Focus: cream `#f6fff5` ring (`--ring`).

### Cards / panels
- Dark surfaces on `#0b0d0b` / `#333432` separated by `#848c84` hairlines; `--card` is `#ffffff` for the rare light card. No shadows — flat.

### Nav
- `amp` wordmark with the signature `|||` mark, links (Chronicle, Owner's Manual, Models, Pricing) in cream, Sign-In (black) + Start (orange) buttons. Left-edge vertical rule tick.

### Section rule ticks
- Small vertical `#848c84` rule ticks precede the hero and each section eyebrow — the signature structural motif.

### Warm band
- A full-width horizontal band ("Subscriptions, At Last") carries a warm ember glow (background image) with a Sagittaire heading and a right-aligned note, divided by a hairline.

## 5. Layout Principles

- Left-aligned editorial hero: a vertical rule → giant Sagittaire headline → PolySans sub → muted supporting line, with the CTA pair floated to the right.
- Section eyebrows are uppercase Berkeley Mono preceded by a rule tick (e.g. "GET AMP" → "Use Agents Anywhere").
- Wide dark sections; a warm-glow horizontal band breaks the rhythm.
- Spacing on a 4px grid; hairline `#848c84` dividers, no shadows.

## 6. Depth & Elevation

- Radius scale: `4px` (dominant — buttons/inputs), `6px` (hero button), `8px`, `10px`. Sharp overall.
- Control heights: 26-30px nav, 38px hero.
- Elevation: **flat — zero box-shadows on the page.** Depth is the teal-black/near-black surface steps plus `#848c84` gray-green hairlines and vertical rule ticks.

## 7. Motion

- Micro-transitions only: `color / background-color / border-color / outline / fill / stroke / gradient 0.15s cubic-bezier(.4,0,.2,1)`; `opacity 0.15s` and `0.3s cubic-bezier(.4,0,.2,1)`.
- No large scroll animations observed; the expressiveness is typographic, not kinetic.

## 8. Backgrounds, Effects & WebGL

- Deep teal-black flat ground; the one atmospheric moment is the warm ember glow behind the "Subscriptions, At Last" band (a background image, not a CSS gradient).
- No CSS gradients on chrome, no box-shadows, no WebGL/grain observed. Structure is purely hairlines + rule ticks over the dark ground.

## 9. Do's and Don'ts

### Do
- Ground on a deep teal-black `#091c1e` with cream `#f6fff5` type.
- Make the hero an enormous **Sagittaire serif** headline mixing italic + roman, tight -6% tracking, left-aligned behind a vertical rule tick.
- Use PolySans for body/UI and Berkeley Mono (uppercase) for eyebrows and code.
- Ration orange `#f6833b` to the primary Start CTA; keep everything else cream/gray-green.
- Draw structure with `#848c84` hairlines and vertical rule ticks — never shadows.
- Keep controls small and sharp (4-6px radius, 26-38px).

### Don't
- Don't reach for a terminal/near-black monochrome look — the brand is teal-black editorial serif.
- Don't add box-shadows or gradients for depth; the page has none.
- Don't let orange spread beyond the primary CTA, or add a second saturated accent.
- Don't set the display in a sans — the serif is the whole identity.

## 10. Responsive Behavior

- Left-aligned hero and floated CTAs reflow to a single column; nav collapses. Not deeply captured — desktop 1400px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#091c1e` · Base `#0b0d0b` · Text `#f6fff5` · Muted `#9ca49c` · Border `#848c84` · Accent `#f6833b`
- Fonts: Sagittaire Display (serif display), PolySans Var (body/UI), Berkeley Mono (eyebrows/code) · Body 18px · Radius 4-6px · Control height 30-38px
- Focus: cream `#f6fff5` ring · Nav primary orange `#f6833b`/ink · Hero primary cream `#eaf3e9`/ink · No shadows

<amp_design_language>
Use the Amp (Sourcegraph) design language: a literary, editorial coding-agent brand on a deep teal-black canvas (#091c1e, base #0b0d0b) lit by cream #f6fff5 type. The identity is an enormous SAGITTAIRE SERIF display headline that mixes italic and roman in one line ("Everything Is Changing"), set ~89px at weight 400 with dramatic -6% tracking, left-aligned behind a vertical gray-green rule tick; section heads are Sagittaire at weight 300. PolySans Var carries body/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. Muted text is #9ca49c / #898989; a raised dark surface is #333432. Controls are small and sharp (radius 4-6px, 26-38px): the nav primary is the ONE saturated accent, orange #f6833b with ink text; the hero primary is a cream #eaf3e9 button with ink; 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, opacity 0.15-0.3s. Feels: editorial, literary, dark, deliberate. Avoid: a terminal/near-black monochrome look, box-shadows or gradients for depth, spreading orange beyond the primary CTA, and setting the display in a sans instead of the serif.
</amp_design_language>