# Warp — Marketing Site Design Spec

> Source: warp.dev (live DOM, computed styles), 2026-07-15 (desktop 1512px).
> Coverage: homepage (announcement bar, nav, hero, product window, ASCII band, mono marquee, CTAs). The Warp desktop app itself (dark terminal) is `needs-dashboard`. Responsive: breakpoints not captured (desktop only).

## 1. Visual Theme & Atmosphere

Bright, technical and unmistakably electric — an agentic terminal brand that inverts the usual dev-tool darkness for a white marketing canvas ruled by one saturated ultramarine, `#0000dc`. Nearly all headings, links, eyebrows and the primary button are that single electric blue, so the page reads like blueprint ink on paper. Display type is the geometric **theFuture** face at a plain 400 weight with tight negative tracking; UI/body is **Matter**; labels, buttons and terminal chrome use **Azeret Mono** in caps. The signature atmosphere is a soft **lavender ASCII-texture band** — a dot-matrix of `# % + = :` glyphs in pale purple — behind a floating "Warp Desktop" product window. Buttons are sharp electric-blue blocks stamped with a keyboard key hint, echoing the keyboard-first terminal. It feels engineered, high-contrast and a little retro-futurist. Feels: electric, technical, blueprint, keyboard-first.

## 2. Color Palette & Roles

### Surfaces (light)
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page background, product window |
| off-white | `#f6f6f6` | Panel borders / faint fills |
| gray-100 | `#ececec` | Insets, product card fills |
| black | `#000000` | Announcement bar |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#0000dc` | Primary text, headings, eyebrows, links, accent |
| ink | `#141414` | Product-UI text, dark headings |
| ink-2 | `#0b0b0b` | Deep UI text |
| muted | `#565656` | Secondary / terminal path text |

### Accent — electric blue is the brand
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#0000dc` | The single brand accent (also the text colour) |

### Lavender ASCII band (signature texture)
| Token | Hex | Role |
|---|---|---|
| lavender | `#bda6f7` | ASCII glyphs |
| lavender-2 | `#c7aeff` | ASCII glyphs |
| lavender-3 | `#d2b5ff` | ASCII glyphs |
| lavender-pale | `#e8dfff` | Band wash |

### Third-party tool marks (minor)
| Token | Hex | Role |
|---|---|---|
| clay | `#d97757` | Claude tool icon only |
| red-deep | `#610302` | Tool icon accent only |

Rule: chrome is white + black + `#0000dc`. The ultramarine is both the text colour and the one accent — do not add a second brand hue. The lavender ASCII glyphs live only in the signature texture band; clay/red appear solely inside third-party tool icons.

## 3. Typography Rules

- Display: `theFuture, "Neue Haas", Helvetica, sans-serif` — hero + section headings, weight 400, tight tracking.
- Sans: `Matter, ui-sans-serif, system-ui, sans-serif` — body, product UI (bold 700 for product titles).
- Mono: `"Azeret Mono", ui-monospace, SFMono-Regular, monospace` — eyebrows, buttons, terminal chrome, marquee.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 76 / 83 | 400 | -2.65px (-3.5%) |
| Section (h2) | 53 | 400 | -1.85px |
| Sub-section (h3) | 30 | 400 | -1.05px |
| Product title | 20 | 700 | normal (Matter) |
| Eyebrow (mono) | 12 | 500 | +0.6px, UPPERCASE, `#0000dc` |
| Body | 16–18 | 400 | normal (Matter) |
| Button / mono | 14 | 500 | normal, Azeret Mono |

Patterns: theFuture display stays at 400 with tight negative tracking; every eyebrow and control label is Azeret Mono in uppercase, coloured `#0000dc`. Product-window UI uses Matter, going bold (700) only for card titles.

## 4. Component Stylings

### Buttons (sharp, 0px radius)
- **Primary (Download)**: bg `#0000dc`, text `#ffffff`, radius `0px` (sharp), height `36px`, padding `4px 16px`, Azeret Mono 14/500, with an inline **keyboard-key hint** (an Apple glyph + a boxed "D").
- **Text CTA**: "Contact sales" as a plain link in `#0000dc`/black.

### Inputs
- Homepage search field inside the product window: light `#ececec`, `5px` radius, mono placeholder. Marketing form inputs `not captured`.

### Cards / product window
- The "Warp Desktop" mockup: a light window with mac traffic-light dots, a "Search sessions…" bar + `+`, and list rows; inset chips (`~/work/delivery-app`, `main`) are `#ececec`/`5px` with mono/Matter text. Window has a larger radius and soft shadow.

### Nav
- White bar under a black announcement strip. Warp logo + wordmark left; dropdown links (Products, Solutions, Resources, Enterprise, Pricing); right: GitHub stars, "Contact sales", and the electric-blue "Download" block with the "D" key hint.

### Marquee
- Full-width Azeret Mono uppercase strip: "SELF-HOST OR WARP-HOST · CONNECT ANY TOOL · OWN YOUR DATA · ANY INFERENCE PROVIDER · ANY MODEL" with small tool icons.

## 5. Layout Principles

- Centered hero: theFuture headline in `#0000dc` + sub, over the lavender ASCII band, with a floating "Warp Desktop" product window overlapping the fold.
- Mono eyebrow → theFuture heading is the repeating section rhythm.
- Wide content; a mono marquee separates sections; footer light with mono column headers.

## 6. Depth & Elevation

- Radii: `0px` for buttons (sharp, terminal-like), `5px` for product chips/insets, larger (~12–16px) for the product window.
- Control height: 36px buttons.
- Light elevation: soft shadows lift the product window off the lavender band; hairline `#f6f6f6`/`#ececec` borders elsewhere.

## 7. Motion

- The mono marquee scrolls horizontally; hover micro-transitions on links/buttons. ASCII glyphs may shimmer/animate subtly. Durations short; library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- White canvas. Signature effect: the **lavender ASCII-texture band** — a field of monospace glyphs (`# % + = : -`) in pale purples (`#bda6f7`,`#c7aeff`,`#d2b5ff`,`#e8dfff`) fading upward into white, evoking a data/terminal texture, with the product window floating over it. A black announcement bar caps the top. No blur/glass observed. WebGL `not captured`.

## 9. Do's and Don'ts

### Do
- Use a white canvas and make electric ultramarine `#0000dc` both the text colour and the single accent.
- Set headlines in theFuture at 400 with tight negative tracking.
- Put every eyebrow and control label in Azeret Mono, UPPERCASE, `#0000dc`, +0.6px tracking.
- Make the primary button a sharp electric-blue block with a keyboard-key hint.
- Use a lavender ASCII-glyph texture band behind a floating product window.
- Keep product-UI text in Matter, bold (700) only for titles.

### Don't
- Don't go dark for the marketing site (the terminal app is dark; the site is white).
- Don't add a second brand colour — ultramarine carries text and accent alike.
- Don't round the primary button — it is sharp `0px`.
- Don't set the display face bold — theFuture stays at 400.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Nav collapses to a menu; product window and marquee scale (pattern present, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text/Accent `#0000dc` · Product ink `#141414` · Muted `#565656` · Inset `#ececec`
- Font: `theFuture` display 400 (h1 76/-3.5%), `Matter` body/UI, `Azeret Mono` eyebrows+buttons UPPER · Radius 0px button / 5px chip · Button height 36px
- Primary button: sharp electric-blue block `#0000dc`, white mono text + keyboard-key hint

<warp_design_language>
Use the Warp design language: a WHITE marketing canvas (off-whites #f6f6f6/#ececec, a black #000000 announcement bar) ruled by one saturated electric ultramarine #0000dc that serves as BOTH the primary text colour and the single accent — headings, eyebrows, links and the primary button are all #0000dc. Display type is the geometric theFuture face at a plain 400 weight with tight negative tracking (-3.5% at 76px); body and product UI use Matter (bold 700 only for product-card titles); every eyebrow, control label and terminal chip is Azeret Mono in UPPERCASE with +0.6px tracking, coloured #0000dc. The primary button is a SHARP electric-blue block (#0000dc bg, white mono text, 0px radius, 36px) stamped with a keyboard-key hint (an Apple glyph + a boxed key), echoing the keyboard-first terminal. The signature background is a lavender ASCII-texture band — a field of monospace glyphs (# % + = :) in pale purples (#bda6f7, #c7aeff, #d2b5ff, #e8dfff) fading into white — behind a floating light "Warp Desktop" product window (mac dots, a search-sessions bar, list rows, #ececec 5px chips) with a soft shadow, plus an Azeret Mono uppercase marquee. Clay #d97757 and #610302 appear only inside third-party tool icons. Feels: electric, technical, blueprint, keyboard-first. Avoid: a dark marketing canvas (only the terminal app is dark), a second brand colour, rounded primary buttons, or a bold display weight.
</warp_design_language>