--- version: alpha name: Warp Inspired website: "https://www.warp.dev" description: An inspired interpretation of Warp's design language — an agentic terminal-and-development-environment brand whose surface is a warm near-charcoal canvas (a tint warmer than pure black), broken only by clean Inter typography, the occasional Instrument Serif italic moment, and dense terminal-mockup imagery; CTAs are unusually understated, with shape geometry running tighter than most marketing sites. seo: title: "Warp Design System for React — Warm Canvas (#2b2622), Inter, 26 components" metaDescription: "Warp's agentic terminal design as a DESIGN.md file. Warm canvas #2b2622, off-white #f7f5f0, Inter + DM Mono, 26 components. For React, Next.js, and AI tools." highlights: - "Single off-white voltage — `#f7f5f0` carries every primary CTA, default text, and the wordmark; there is no chromatic accent anywhere" - "Warm-dark canvas `#2b2622` (oklch 22.0% 0.004 84.6) instead of pure black — the brown-beige tint IS the brand" - "Tight 3–4px button radii — the brand never uses generous pill CTAs, only icon containers get `{rounded.full}`" - "Hero display at 64px Inter weight 400 with -1.6px tracking — restrained, quietly confident, not billboard-loud" - "Three-face stack: Inter for narrative, DM Mono for terminal mockups, Instrument Serif for rare editorial italics" tags: - "Developer Tools & IDEs" - "AI & LLM Platforms" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Warp is an agentic development environment — a terminal application that wraps an AI agent — and its marketing site mirrors the product. One dark band runs the full length of the page, warmer than pure black, set almost entirely in Inter at modest weights. Decoration is restrained: two terminal screenshots in the hero, a partner-logo strip (Anthropic, OpenAI, Google, Stanford), a single testimonial card, a press-coverage list, and download tiles for Mac, Linux, and Windows. No gradient, no atmospheric overlay, no illustration system. The page reads like a developer's reading-mode editor that happens to be a homepage, which is exactly the impression the brand wants its visitors to leave with. This page captures all of that in a single DESIGN.md file. Inside: 9 color tokens grouped into surface, text, and a single off-white primary `#f7f5f0`; 14 type tokens across Inter, DM Mono, and Instrument Serif; 10 spacing values stepping from 2px to 96px; 7 corner radii topping out at a 6px medium card and a 9999px pill for icon containers only; and 26 components spanning navigation, buttons, cards, terminal mockups, partner tiles, press rows, and an example block kit. The format follows the Google Labs DESIGN.md specification, so every value is machine-readable. Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Warp's specific posture — warm canvas at `#2b2622`, off-white text and CTAs at `#f7f5f0`, tight 3–4px button radii, Inter at weight 400 with negative tracking — instead of generating a generic dark-mode dashboard. The discipline of leading with surface warmth and tight geometry, rather than a chromatic accent or a heavy display weight, is what makes this system worth studying. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is Warp's primary brand color?" answer: "Warp's primary is an off-white — `#f7f5f0` — not a chromatic accent. The same token doubles as the page text color (`{colors.ink}`), the wordmark color, and the fill for the primary CTA. The brand's distinguishing voltage comes from surface warmth, not from a hue: the canvas at `#2b2622` is a brown-tinted near-charcoal resolved from `oklch(22.0% 0.004 84.6)`, slightly warmer than pure black." - id: "dark-mode" title: "Does Warp's design system have a light mode?" answer: "No — the marketing site is dark-only. The single canvas `#2b2622` runs the full page, with `#383330` as a slightly lighter surface for cards and partner tiles and `#3f3a36` as the 1px hairline divider. Every neutral carries a warm tint, so even body text at `#c9c0ad` and the muted footer text at `#aea69c` lean brown rather than gray. There is no white-on-light surface anywhere on the page." - id: "typography" title: "What typography does Warp use, and what should I use if those fonts aren't available?" answer: "Three faces: Inter for every display, body, and button role (weights 400 and 500); DM Mono for terminal mockups and code snippets at 13–14px; and Instrument Serif for rare editorial italic moments. All three are open-source on Google Fonts, so the spec transfers directly to any React project. Hero display sits at 64px Inter weight 400 with -1.6px tracking — deliberately quiet for a hero." - id: "shape-language" title: "Why are Warp's button radii so tight?" answer: "The brand never uses generous pill CTAs. Buttons sit at `{rounded.sm}` 3px or `{rounded.md}` 4px — almost rectangular — and only icon containers like the search and theme toggles use `{rounded.full}`. The result reads as engineered and precise rather than friendly and consumer-facing, which fits a developer terminal brand. Cards step up slightly to `{rounded.md}` 4px or `{rounded.lg}` 6px, but never beyond that." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React developer tool?" answer: "Yes — the file is structured for AI tools like Claude, Cursor, and GitHub Copilot to read. Point the agent at the spec and ask for a React + Tailwind landing page, and it will reproduce Warp's exact posture: warm canvas, off-white CTAs, Inter weight 400 hero at -1.6px tracking, DM Mono terminal mockup cards with 1px hairline borders. Every color, type style, radius, and spacing value in the spec is a quoted hex or pixel value you can paste into Tailwind config or CSS variables." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of things noted in the Known Gaps section: in-product semantic colors (error, warning, success) live inside the terminal application proper and aren't surfaced on the marketing pages; full hover-state combinations are not documented per the global no-hover policy; loading skeletons and form input error-state outlines were not visible on the captured surfaces; and the brand's full syntax-highlighting palette for code blocks is a product concern rather than a marketing-surface concern." colors: primary: "#f7f5f0" on-primary: "#2b2622" ink: "#f7f5f0" body: "#c9c0ad" body-strong: "#dad2c1" mute: "#aea69c" canvas: "#2b2622" canvas-soft: "#383330" hairline: "#3f3a36" typography: display-xl: fontFamily: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif fontSize: 64px fontWeight: 400 lineHeight: 70.4px letterSpacing: -1.6px display-lg: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 48px fontWeight: 400 lineHeight: 52.8px letterSpacing: -1.2px display-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 32px fontWeight: 500 lineHeight: 40px letterSpacing: -0.8px display-sm: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 24px fontWeight: 500 lineHeight: 32px letterSpacing: -0.4px display-serif: fontFamily: Instrument Serif, Georgia, "Times New Roman", serif fontSize: 48px fontWeight: 400 lineHeight: 52px letterSpacing: -0.5px body-lg: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 28px body-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 24px body-md-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 24px body-sm: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 20px body-sm-strong: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 20px caption: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px code: fontFamily: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace fontSize: 13px fontWeight: 400 lineHeight: 18px code-md: fontFamily: DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace fontSize: 14px fontWeight: 400 lineHeight: 20px button-md: fontFamily: Inter, system-ui, -apple-system, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 20px rounded: none: 0px xxs: 1px xs: 2px sm: 3px md: 4px lg: 6px pill: 9999px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 10px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 96px components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" padding: "{spacing.md} {spacing.xl}" nav-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.md}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.lg}" button-secondary-ghost: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.lg}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "{spacing.xs}" text-input: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.md}" card-content: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" card-mockup: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.code}" rounded: "{rounded.md}" padding: "{spacing.lg}" download-tile: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md-strong}" rounded: "{rounded.md}" padding: "{spacing.xl}" press-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" padding: "{spacing.lg} 0" job-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md-strong}" padding: "{spacing.lg} 0" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "{spacing.5xl} {spacing.xl}" content-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "{spacing.5xl} {spacing.xl}" partner-logo-tile: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" rounded: "{rounded.md}" padding: "{spacing.lg}" testimonial-card: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.xl}" # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ─── ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.md}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.sm} {spacing.md}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.lg}" padding: "{spacing.xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.2xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" typography: "{typography.body-sm}" --- ## 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.