Electric blueprint terminal brand: a white marketing canvas ruled by one saturated ultramarine #0000dc for text and accent alike, theFuture display, Matter UI and Azeret Mono labels, sharp blue block buttons stamped with keyboard-key hints, and a lavender ASCII-texture band under a floating Warp Desktop product window.
Browse Warp 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: 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).
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.
| 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 |
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #0000dc | The single brand accent (also the text colour) |
| Token | Hex | Role |
|---|---|---|
| lavender | #bda6f7 | ASCII glyphs |
| lavender-2 | #c7aeff | ASCII glyphs |
| lavender-3 | #d2b5ff | ASCII glyphs |
| lavender-pale | #e8dfff | Band wash |
| 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.
theFuture, "Neue Haas", Helvetica, sans-serif — hero + section headings, weight 400, tight tracking.Matter, ui-sans-serif, system-ui, sans-serif — body, product UI (bold 700 for product titles)."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.
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.