Warp Inspired Design System

Overview

Warp is an agentic development environment — a terminal application wrapped around an AI agent — and its marketing site mirrors the product's posture. A single warm-dark band ({colors.canvas} — #2b2622) runs the entire length of the page, resolved from oklch(22.0% 0.004 84.6) so it carries a hint of brown-beige rather than reading as neutral charcoal. Copy is set almost entirely in Inter at modest weights, broken only by occasional Instrument Serif italics and DM Mono terminal mockups. The page reads more like a developer's reading-mode editor than a marketing surface — which is exactly the brand's intended posture.

Decoration is restrained to a few set pieces. The hero opens with two terminal screenshots split between the product's two main modes (agent + terminal). A partner-logo strip (Anthropic, OpenAI, Google, Stanford) sits below on slightly warmer canvas-soft tiles ({colors.canvas-soft} — #383330). A single testimonial card with a portrait. A press-coverage list. And the page closes with download tiles for Mac, Linux, and Windows. There is no gradient, no atmospheric backdrop, and no illustration system anywhere on the page.

Type carries the second decisive voice. Hero display sits at 64px Inter weight 400 with -1.6px tracking — quiet for a hero, deliberately understated. The brand carries DM Mono as its monospace face for code blocks, and Instrument Serif italics appear for occasional editorial moments. Body text runs 16px Inter at line-height 1.5.

Key Characteristics:

• A single primary "color" — really an off-white {colors.primary} (#f7f5f0) — that doubles as text on canvas and as the button-primary fill. There is no chromatic brand accent.
• Warm dark canvas ({colors.canvas} — #2b2622) is the only page surface. The brand's defining tone is the brown-warmth, not pure black.
• Extremely tight button radii — 3 / 4px ({rounded.sm} / {rounded.md}) — the brand never uses generous pill shapes for CTAs. Only icon containers use {rounded.full}.
• Inter sans + DM Mono mono is the canonical pairing. Instrument Serif appears as a third editorial face for occasional italics.
• Terminal-mockup imagery is the brand's only consistent decorative system — no gradients, no atmospheric overlays.
• A subtle warm tint runs through every neutral; even body text ({colors.body} — #c9c0ad) and dividers ({colors.hairline} — #3f3a36) carry a hint of warmth rather than neutral gray.

Known Gaps

• In-product semantic colors: error, warning, and success palettes live inside the terminal application proper and are not surfaced on the marketing pages captured here.
• Hover state colors: intentionally not documented per the global no-hover policy — buttons and nav links use a subtle opacity shift on pointer hover, but precise extraction is unreliable.
• Loading skeletons: not visible on the extracted marketing surfaces; the brand's in-product loading treatment is a separate concern.
• Form input error states: the text-input chrome is documented, but the full outline + helper-text combination on validation failure was not visible on the captured surfaces.
• Syntax highlighting palette: code-block syntax colors inside the terminal mockup screenshots are a product-surface concern and not captured here.
• Instrument Serif usage range: documented as a third face for editorial italic moments, but the actual placements were sparse on the captured marketing surface — full role coverage may exceed what's listed.