---
title: "Warp — Code design system"
variant: extended
source: https://www.warp.dev/code
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/warp-dev-code)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Warp — Code · Design System

> A bright, precise canvas for agentic coding.

**Theme:** light · **Industry:** devtools · **Source:** https://www.warp.dev/code · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Warp pairs a vivid blue product hero with a restrained, near-white editorial page. Oversized rounded display typography and detailed terminal screenshots make the AI coding workflow the visual focus.

## North star

Use a bright blue product moment and generous near-white breathing room to make authentic developer interface imagery the focal point.

## Overview

The page is organized around a strong contrast: a saturated blue hero panel against a near-white canvas, followed by spacious white sections and pale blue-gray surfaces. Black headings and muted gray supporting text keep the interface legible without competing with the hero. Display and heading text use the light, rounded character of theFuture, with tight negative tracking; Matter handles body copy and navigation, while matterMono gives command snippets and technical labels a terminal-like voice. Layouts alternate between broad text-led introductions, logo rows, and feature areas that place copy beside dark product screenshots. The screenshots are framed as working software rather than decorative imagery. Generous vertical breathing room separates sections, while compact cards and download controls keep the information practical. Fine gray borders and minimal shadows define controls and media edges; lilac is reserved for a small secondary demo action.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Gray | `#44494a` | `--color-graphite-gray` | neutral | Muted navigation, secondary links, footer labels, and supporting copy. |
| Gallery White | `#fbfdfd` | `--color-gallery-white` | surface | Main page canvas and the broad background for sections and content. |
| Mist Panel | `#eaf0f2` | `--color-mist-panel` | surface | Pale card and footer surfaces that distinguish grouped content from the canvas. |
| Near Black | `#000102` | `--color-near-black` | neutral | Headings, navigation emphasis, primary buttons, and dark text. |
| Warp Blue | `#085aff` | `--color-warp-blue` | brand | Dominant full-width hero section background and strongest brand color. |
| Soft Steel | `#b3b8ba` | `--color-soft-steel` | semantic | Thin outlines and borders on controls and subtle interface details. |
| Terminal Midnight | `#0a1220` | `--color-terminal-midnight` | semantic | Dark endpoint of a measured gradient, primarily associated with product-interface imagery. |
| Terminal Slate | `#141e30` | `--color-terminal-slate` | semantic | Lighter endpoint of the measured dark gradient, primarily associated with product-interface imagery. |
| Quiet Divider | `#dfe2e2` | `--color-quiet-divider` | semantic | Secondary hairlines and subtle footer or interface separators. |
| Lilac Demo | `#cbb0f7` | `--color-lilac-demo` | accent | Lilac background for the BOOK A DEMO navigation action. |
| Slate Text | `#4b5051` | `--color-slate-text` | neutral | Occasional secondary heading, body, and footer text. |
| Lilac Haze | `#f4f1fc` | `--color-lilac-haze` | surface | Very limited pale lilac interface or button surface; not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#fbfdfd` (Gallery White) · `--color-surface` → `#eaf0f2` (Mist Panel) · `--color-text` → `#000102` (Near Black) · `--color-text-muted` → `#44494a` (Graphite Gray) · `--color-text-subtle` → `#fbfdfd` (Gallery White) · `--color-border` → `#b3b8ba` (Soft Steel) · `--color-accent` → `#085aff` (Warp Blue) · `--color-accent-2` → `#cbb0f7` (Lilac Demo) · `--color-on-accent` → `#000102` (Near Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000102` | `#fbfdfd` | 20.46:1 | AAA |
| `#000102` | `#eaf0f2` | 18.15:1 | AAA |
| `#44494a` | `#fbfdfd` | 8.95:1 | AAA |
| `#44494a` | `#eaf0f2` | 7.94:1 | AAA |
| `#fbfdfd` | `#eaf0f2` | 1.13:1 | fail |
| `#085aff` | `#fbfdfd` | 5.25:1 | AA |
| `#085aff` | `#eaf0f2` | 4.66:1 | AA |

### Gradients

- `linear-gradient(to right bottom in oklab, rgb(10, 18, 32) 0%, rgb(20, 30, 48) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Matter | `--font-body` | webfont | 400, 500, 600, 700 | Body copy, navigation, captions, buttons, and most interface text. | Inter |
| theFuture | `--font-display` | webfont | 400 | Display and section headings. | Manrope |
| matterMono | `--font-mono` | webfont | 500, 400 | Terminal commands, technical snippets, and uppercase CTA labels. | IBM Plex Mono |
| Azeret Mono | `--font-azeret-mono` | webfont | 500 | Occasional technical or code-like labels. | IBM Plex Mono |

- **Matter:** Use regular to bold weights; keep copy mostly sentence case, with small uppercase eyebrow and link labels.
- **theFuture:** Light, rounded display forms with tight negative tracking; keep headlines in sentence case.
- **matterMono:** Use restrained monospaced text for code and compact uppercase button labels.
- **Azeret Mono:** Measured as a minor monospace presence; reserve for terse technical details.

### Type scale — Golden Ratio (ratio ≈ 1.651, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.1 | -0.035em | — | theFuture | Large hero messaging and prominent page-level display text. |
| h1 | 50.5px | 400 | 1.25 | -0.035em | — | theFuture | Main page and primary section headlines. |
| h2 | 24px | 400 | 1.25 | -0.035em | — | theFuture | Feature and sub-section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Matter | Explanatory paragraphs and standard interface copy. |
| caption | 14px | 400 | 1.71 | 0 | — | Matter | Small supporting notes and product details. |
| button | 12px | 500 | 1.67 | 0 | — | Matter | Compact button labels and controls. |
| nav | 14px | 400 | 2 | 0 | — | Matter | Header and footer navigation items. |
| link | 10px | 600 | 1.5 | 0.1em | uppercase | Matter | Small uppercase action links and labels. |
| eyebrow | 10px | 600 | 1.5 | 0.1em | uppercase | Matter | Uppercase category labels above headings. |
| code | 14px | 400 | 2 | 0 | — | matterMono | Terminal commands and monospaced product text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 20, 24, 40, 64 px.
- Section rhythm 64px · element gap 4px · card padding — · max content width 1200px.

The page uses a centered content frame, with the measured maximum width at 1200px, and a wide desktop composition. The hero is a large blue panel inset within the white page, with a left-aligned headline and product imagery below. Subsequent sections shift between logo rows, two-column feature layouts, and multi-column download and footer content. Sections have a comfortable, spacious rhythm, with the measured section gap at 64px. Keep text aligned to clear columns and avoid dense, full-bleed content outside the hero.

## Shape & elevation

- Radius: button `3px` · card `3px` · media `2px` · nav `3px` · link `9999px` · xs `1px` · sm `2px` · md `3px` · lg `4px` · pill `9999px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0.12) 0px 8px 30px 0px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.07 -0.00536231 -0.00449951 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0p`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat: section backgrounds and whitespace do more work than shadows. Thin gray borders define download controls and small UI elements, while cards use restrained corner rounding. Product media may have a subtle shadow for separation. Keep layering limited to screenshots and the hero panel, with no heavy floating-card effect.

## Imagery

Product imagery is primarily authentic dark terminal and editor interface screenshots, framed in broad rectangular panels. The hero positions a large interface image beneath the headline; later feature areas pair similar screenshots with explanatory text. A customer logo cloud adds small, subdued marks. Keep software visuals crisp and legible, and treat screenshot colors as product content rather than as the brand palette.

## Components

### Primary navigation

A compact light header with the Warp mark, product links, sign-in, a lilac BOOK A DEMO action, and a near-black GET STARTED action.

### Blue product hero

A large inset Warp Blue panel with a small Code label, oversized light headline, supporting copy, download command, and prominent editor screenshot.

### Customer logo cloud

A trust statement followed by multiple rows of understated customer logos on the near-white canvas.

### Feature split

Editorial section heading and eyebrow above copy paired with a broad dark terminal screenshot; use pale surfaces to group selected details.

### Download controls

Mac, Linux, and Windows options grouped into columns, with compact outlined platform and architecture selectors plus install commands.

### Footer link columns

Pale blue-gray footer surface with small uppercase group labels, compact link lists, legal details, and status information.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #cbb0f7 · text #000102 · radius 0px · padding 4px 16px · 500 14px matterMono · uppercase
- **Secondary button** (“x64”): transparent background · text #000102 · border 1px solid #b3b8ba · radius 3px · padding 4px 12px · 500 12px Matter
- **Link** (“LIVESTREAM”): background #e7e9e9 · text #44494a · radius 3.35544e+07px · padding 4px 10px · 600 10px Matter · uppercase
- **Card** (“REVIEW Review agent code without breakin”): background #ffffff · text #f8f5ee · radius 3px · padding 0px · 400 16px Matter
- **Navigation item** (“Download”): transparent background · text #44494a · radius 0px · padding 0px · 400 14px Matter

## Do

- Keep the hero as the page's strongest color field.
- Use near-white space to separate major content sections.
- Pair feature explanations with genuine product-interface imagery.
- Set display headlines in a light, rounded sans serif.
- Use monospaced type for commands and compact technical CTAs.
- Keep borders thin and card treatment restrained.

## Don't

- Do not spread accent colors across every section.
- Do not substitute generic illustrations for the terminal interface.
- Do not turn the page into a dense dashboard layout.
- Do not use heavy shadows or floating-card stacks.
- Do not set long body copy in uppercase or monospace.
- Do not use screenshot colors as the page's brand palette.

## Agent prompt

Build a new Warp page that follows this measured visual language. Use Gallery White (#fbfdfd) as the canvas, Near Black (#000102) for strong text, Graphite Gray (#44494a) for muted navigation and supporting copy, and Warp Blue (#085aff) for one dominant product-led hero. Reserve Lilac Demo (#cbb0f7) for a secondary demo action and Mist Panel (#eaf0f2) for grouped surfaces. Set large, rounded, lightly tracked headlines in a theFuture-like sans serif; use a Matter-like sans for body and navigation, and monospace for commands. Organize content in a centered wide frame with generous section spacing, clear left alignment, and alternating text-plus-product-interface layouts. Show crisp, dark developer-tool screenshots as real product content. Keep borders delicate, corner treatment restrained, and the overall page flat and breathable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Inset blue panel with left-aligned headline and supporting text above a wide product screenshot. | Download action, Install command, Product overview | Blue full-panel background, Large display headline, Dark editor screenshot |
| 2 | logo-cloud | Trust statement above a multi-row grid of customer logos on the near-white canvas. | Social proof, Customer recognition | Left-aligned heading, Muted logo marks, Small category labels |
| 3 | feature-split | Editorial heading above a two-column feature area pairing explanatory text with product imagery. | Feature explanation, Tabbed or grouped details | Uppercase eyebrow, Light heading, Terminal screenshot, Pale feature panel |
| 4 | feature-grid | Section introduction followed by compact feature groupings and product-interface imagery. | Review workflow, Quick editing, Feature discovery | Editorial headings, Cards, Dark interface previews |
| 5 | feature-grid | Three-column feature grouping with short text-led blocks and restrained supporting graphics. | Agent autonomy controls, Privacy reassurance | Uppercase eyebrow, Three-column layout, Simple line graphics |
| 6 | product-detail | Download heading with a compact callout and Mac, Linux, and Windows options arranged in columns. | Platform selection, Architecture selection, Install command | Outlined controls, Platform icons, Compact labels |
| 7 | footer | Pale footer band with several compact link columns and a low-profile legal and status row. | Section navigation, Legal links, Service status | Small uppercase headings, Dense link lists, Quiet divider |

## Source CSS custom properties (selected)

```css
--color-surface: oklch(95% .007 220);
--color-text: oklch(7% .007 220);
--color-text-body: lab(16.4913% .1041 1.1425);
--color-text-secondary: oklch(40% .007 220);
--color-muted: color-mix(in oklch, oklch(40% .007 220) 80%, oklch(53% .007 220));
--color-border: oklch(78% .007 220);
--card-bg: #fff;
--graph-accent: lab(40.4304% 7.45831 -61.5912);
--graph-accent-2: lab(50.9212% 23.7037 71.4959);
--graph-accent-3: lab(43.5845% -41.7004 11.731);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/warp-dev-code