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

# Warp — Terminal · Design System

> A precise, grid-led canvas for the modern terminal.

**Theme:** light · **Industry:** devtools · **Source:** https://www.warp.dev/terminal · **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 presents its terminal through a restrained, pale canvas, technical typography, and precise ruled divisions. Product imagery and a human-led video bring warmth to an otherwise structured developer-focused page.

## North star

Build a calm, ruled canvas where technical mono typography and product evidence lead, while accent color appears only at key actions.

## Overview

The page uses a near-white lavender canvas (#fbf9fe) as a continuous field, with fine gray rules (#d7d4da) dividing sections and creating a subtle page-wide grid. Dark plum-black (#1a1522) carries headings, navigation, and primary copy; softer gray text keeps supporting information legible without competing. A sharp citron (#eef17c) is reserved for the demo CTA, adding a small, deliberate point of emphasis. Azeret Semi Mono defines nearly all text, giving the page a technical, measured voice; large, lightly weighted headlines contrast with compact uppercase labels and buttons. The layout is centered and wide, but content often aligns to the left within ruled bands. A logo strip, terminal screenshots, and a framed video alternate with open whitespace. Cards stay flat and border-led rather than shadowed, so structure comes from alignment, outlines, and consistent section rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Lavender Mist | `#fbf9fe` | `--color-lavender-mist` | brand | Continuous page canvas and pale section background. |
| Plum Ink | `#1a1522` | `--color-plum-ink` | neutral | Primary headings, body text, navigation, links, and dark outlines. |
| Quiet Rule | `#d7d4da` | `--color-quiet-rule` | semantic | Fine section dividers, card borders, and terminal-frame hairlines. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Card and navigation surfaces, plus the white fade over page content. |
| Soft Graphite | `#706c76` | `--color-soft-graphite` | neutral | Muted supporting copy and low-emphasis footer text. |
| Citron Signal | `#eef17c` | `--color-citron-signal` | accent | Small high-visibility BOOK A DEMO call to action. |
| Ash Letter | `#a19da6` | `--color-ash-letter` | neutral | Occasional subdued heading, body, and footer text. |

### Semantic aliases

`--color-canvas` → `#fbf9fe` (Lavender Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#1a1522` (Plum Ink) · `--color-text-muted` → `#706c76` (Soft Graphite) · `--color-border` → `#d7d4da` (Quiet Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1522` | `#fbf9fe` | 17.1:1 | AAA |
| `#1a1522` | `#ffffff` | 17.88:1 | AAA |
| `#706c76` | `#fbf9fe` | 4.9:1 | AA |
| `#706c76` | `#ffffff` | 5.13:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0px, rgba(255, 255, 255, 0) 420px)`
- `radial-gradient(circle at 1px 1px, rgba(26, 21, 34, 0.16) 1.2px, rgba(0, 0, 0, 0) 0px), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| azeretSemiMono | `--font-mono` | webfont | 600, 400, 500 | Primary typeface for headlines, body copy, labels, navigation, buttons, and code-like text. | Azeret Mono |
| theFuture | `--font-thefuture` | webfont | 700 | Minor display or brand treatment; appears in a small share of measured text. | Space Grotesk |

- **azeretSemiMono:** Use regular weights for large headlines; compact uppercase labels and actions use semibold weight with expanded tracking.
- **theFuture:** Measured at bold weight and used sparingly; keep the mono family dominant.

### Type scale — Custom (ratio ≈ 2.038, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1.05 | -0.037em | — | azeretSemiMono | Hero headline introducing the terminal for the agent era. |
| h2 | 34px | 400 | 1.65 | -0.059em | — | azeretSemiMono | Major section headlines for product and security content. |
| body | 13px | 400 | 1.6 | 0 | — | azeretSemiMono | Supporting product descriptions and explanatory copy. |
| caption | 11px | 600 | 1.27 | 0.06em | uppercase | azeretSemiMono | Compact uppercase labels and metadata. |
| button | 12px | 600 | 1.65 | 0.05em | uppercase | azeretSemiMono | Uppercase CTA labels, including the demo action. |
| nav | 12px | 600 | 1.65 | 0.05em | uppercase | azeretSemiMono | Compact uppercase primary navigation labels. |
| eyebrow | 11px | 600 | 1.27 | 0.06em | uppercase | azeretSemiMono | Small uppercase section markers above headings. |
| code | 11px | 600 | 1.27 | 0.06em | uppercase | azeretSemiMono | Compact technical labels and code-oriented interface details. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 48, 56 px.
- Section rhythm 56px · element gap 6px · card padding 24px · max content width 1132px.

Use a centered content frame with a measured maximum width of 1132px. The page is mostly a single-column sequence, with two-column video and copy, a four-column feature band, and a three-column enterprise section. Align headings and copy to the start of their content areas. Fine horizontal and vertical rules create a quiet grid across the page. Sections are generously separated, with measured 56px section gaps and comfortable density; cards use 24px internal padding.

## Shape & elevation

- Radius: button `1px` · nav `4px` · xs `1px` · sm `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The design is predominantly flat: no measured shadows, and most depth comes from fine #d7d4da borders, ruled bands, and framed media. Use white surfaces against the pale canvas to distinguish cards. Keep corner treatments nearly square; the measured button radius is 1px, with a 4px nav treatment.

## Imagery

Use real product screenshots as evidence of the terminal interface, framed in restrained, thin outlines. A video featuring a person provides the main photographic moment; keep it inside a labeled player frame rather than using it as a full-bleed background. Logos form a subdued trust strip. Product imagery may introduce richer colors, but keep those colors inside the media rather than extending them into the page chrome.

## Components

### Primary navigation

Compact uppercase Azeret Semi Mono links in dark ink on a light surface, with the demo action singled out in citron.

### Hero and install command

Large left-aligned mono headline, muted two-line supporting copy, bordered command field, and compact platform choices.

### Trust logo band

A ruled horizontal strip with a small trust label and a row of subdued customer logos.

### Framed video feature

Two-column section pairing a short demo eyebrow and copy with a labeled, thin-bordered video player.

### Feature showcase

A large terminal product image above four concise feature cards separated by hairlines.

### Enterprise controls cards

Flat white cards with 24px measured padding, dark mono text, and restrained border treatment.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #eef17c · text #1a1522 · radius 4px · padding 6px 16px · 500 12px azeretSemiMono · uppercase
- **Secondary button** (“Multithreaded workflows Display terminal”): background #f6f5fb · text #1a1522 · radius 0px · padding 18px 20px · 400 13px azeretSemiMono
- **Link** (“LIVESTREAM”): transparent background · text #1a1522 · radius 0px · padding 0px 0px 2px 0px · 400 13px azeretSemiMono
- **Card** (“Enterprise-grade controls SAML-based SSO”): background #ffffff · text #1a1522 · radius 0px · padding 24px · 400 13px azeretSemiMono
- **Badge** (“>_”): transparent background · text #1a1522 · border 1px solid #1a1522 · radius 0px · padding 3px 5px · 400 0px azeretSemiMono
- **Navigation item** (“PRODUCTS SOLUTIONS RESOURCES ENTERPRISE ”): transparent background · text #1a1522 · radius 0px · padding 0px · 500 12px azeretSemiMono

## Do

- Keep the pale canvas continuous across sections.
- Use thin rules to express the page grid.
- Set most content in Azeret Mono or a close mono substitute.
- Reserve citron for a prominent action.
- Frame product media with quiet borders and labels.
- Keep headings left aligned and copy concise.

## Don't

- Do not introduce heavy shadows or layered card stacks.
- Do not use large areas of saturated accent color.
- Do not replace the monospaced voice with generic rounded sans typography.
- Do not make every card visibly raised.
- Do not let colors inside screenshots redefine the page palette.
- Do not crowd the section transitions.

## Agent prompt

Create a new Warp-style developer product page on a calm #fbf9fe Lavender Mist canvas. Use #1a1522 Plum Ink for headings, navigation, and key copy; #706c76 Soft Graphite for supporting text; and #d7d4da Quiet Rule for subtle grid lines and borders. Reserve #eef17c Citron Signal for the main CTA, with #ffffff Paper White surfaces for framed cards. Use Azeret Mono as the dominant typeface, with large regular-weight headlines and compact uppercase, tracked labels. Center content within a restrained wide frame, align copy to the left, and organize the page with spacious ruled sections. Show authentic product-interface imagery in thin frames; use a human-led video or photo sparingly. Favor flat surfaces and precise alignment over shadows, decorative gradients, or oversized color blocks.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column hero with left-aligned headline, supporting copy, install command, and platform links. | Install command with copy affordance, Platform selection links | Large mono headline, Small uppercase eyebrow, Thin command-field border, Pale canvas |
| 2 | logo-cloud | Full-width ruled band with a trust label and horizontally distributed customer logos. | Social proof, Customer brand scan | Muted logo row, Hairline top and bottom rules, Small mono label |
| 3 | feature-split | Two columns: copy on the left and a framed video on the right. | Video playback, Open-source announcement | Uppercase demo eyebrow, Thin video frame, Small centered media label |
| 4 | feature-grid | Section title above a large product screenshot, followed by four feature columns. | Product feature overview, Feature-by-feature scanning | Large interface screenshot, Four-column card row, Thin dividers, Small uppercase eyebrow |
| 5 | feature-grid | Left-aligned section heading above a three-column set of enterprise controls. | Security capability scan, Enterprise reassurance | Flat white cards, Fine borders, Mono headings and descriptions |
| 6 | footer | Multi-column link directory with a short brand statement and compact legal row. | Grouped site navigation, Legal and status links | Small muted text, Multi-column link groups, Top 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-terminal