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

# Warp · Design System

> A precise, code-native canvas with electric-blue signals.

**Theme:** light · **Industry:** devtools · **Source:** https://www.warp.dev/ · **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 pale, spacious canvas with monospace typography and vivid blue accents to make a developer platform feel precise and open. Product diagrams, framed interface previews, and restrained editorial sections turn complex infrastructure into a readable, hands-on story.

## North star

Keep the page calm and code-native, using blue as a precise functional signal and product interfaces as the main visual proof.

## Overview

The page is built on a near-white lavender canvas (#fbf9fe), with dark ink text and hairline rules establishing a quiet technical baseline. Vivid blue (#2a1eff) is reserved for selected interface marks, active states, links, and the full-width case-study band, so it reads as a signal rather than a wash. A lemon button distinguishes the demo action while dark and white buttons keep other calls to action restrained. Azeret Semi Mono carries most of the interface: navigation, body copy, labels, buttons, and code-like captions; The Future adds a contrasting sans-serif voice to section headings. The layout is a long, left-aligned product narrative with repeated section dividers, framed dashboards, diagrams, and code panels. Real customer imagery appears in the enterprise section, while the rest of the page relies on product UI and diagrams. Generous vertical breathing room is balanced by compact, information-dense previews.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Lavender Mist | `#fbf9fe` | `--color-lavender-mist` | surface | Dominant page canvas and continuous backdrop across the hero and most content sections. |
| Electric Signal | `#2a1eff` | `--color-electric-signal` | brand | Primary blue accent for selected interface states, links, diagrams, and the case-study section band. |
| Soft Periwinkle | `#8a83ff` | `--color-soft-periwinkle` | accent | Secondary violet accent on occasional badges, buttons, and interface details. |
| Muted Graphite | `#706c76` | `--color-muted-graphite` | neutral | Main secondary text for supporting copy and subdued labels. |
| Diagram Lilac | `#a4a0db` | `--color-diagram-lilac` | semantic | Sparse badge color; treat as a minor interface detail, not a core page color. |
| Deep Ink | `#1a1522` | `--color-deep-ink` | brand | Primary text, headings, navigation, dark buttons, diagram outlines, and product-preview framing. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Cards, navigation surfaces, interface-preview panels, and light button fills. |
| Quiet Rule | `#d2d1d8` | `--color-quiet-rule` | neutral | Fine dividers and subdued card or control borders. |
| Signal Violet | `#6961ff` | `--color-signal-violet` | accent | Occasional button and text accent; keep subordinate to the primary electric blue. |
| Ash Gray | `#a3a1a7` | `--color-ash-gray` | neutral | Low-emphasis text, captions, and muted footer or interface labels. |
| Citrus Highlight | `#eef17c` | `--color-citrus-highlight` | accent | Distinctive background for the BOOK A DEMO navigation action. |
| Soft Border Gray | `#dad9db` | `--color-soft-border-gray` | neutral | Fine borders within cards, badges, and small controls. |
| Panel Gray | `#e5e5e5` | `--color-panel-gray` | neutral | Subtle product-panel and interface-separator detail, not a section background. |
| Slate Text | `#4c4853` | `--color-slate-text` | neutral | Occasional supporting text within product or interface content. |
| Pale Periwinkle | `#cac7ff` | `--color-pale-periwinkle` | accent | Rarely used inline accent text; retain only as a restrained detail. |
| Stone Gray | `#8c8a90` | `--color-stone-gray` | neutral | Minor muted text detail within labels or interface content. |

### Semantic aliases

`--color-canvas` → `#fbf9fe` (Lavender Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#1a1522` (Deep Ink) · `--color-text-muted` → `#706c76` (Muted Graphite) · `--color-text-subtle` → `#a3a1a7` (Ash Gray) · `--color-border` → `#d2d1d8` (Quiet Rule) · `--color-accent` → `#2a1eff` (Electric Signal) · `--color-accent-2` → `#8a83ff` (Soft Periwinkle) · `--color-accent-3` → `#6961ff` (Signal Violet)

### 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 |
| `#a3a1a7` | `#fbf9fe` | 2.45:1 | fail |
| `#a3a1a7` | `#ffffff` | 2.56:1 | fail |
| `#2a1eff` | `#fbf9fe` | 7.36:1 | AAA |
| `#2a1eff` | `#ffffff` | 7.7:1 | AAA |

### Gradients

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| azeretSemiMono | `--font-mono` | webfont | 400, 500, 600 | Primary interface and editorial type: navigation, body, labels, buttons, captions, and code. | Azeret Mono |
| theFuture | `--font-display` | webfont | 400, 600, 700, 500 | Section headings and selected display headings. | Inter |

- **azeretSemiMono:** Use as the dominant mono voice; navigation and eyebrow labels are uppercase, while buttons use spaced uppercase lettering.
- **theFuture:** Use a sans-serif contrast to the mono system; measured headings are bold and lowercase.

### Type scale — Golden Ratio (ratio ≈ 1.617, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 34px | 400 | 1.65 | -0.059em | — | azeretSemiMono | Hero headline, set in a prominent monospace display style. |
| h2 | 18px | 700 | 1.65 | -0.02em | lowercase | theFuture | Section headings, using contrasting bold lowercase sans-serif. |
| body | 13px | 400 | 1.65 | 0 | — | azeretSemiMono | Supporting copy, descriptions, and explanatory text. |
| caption | 12.5px | 400 | 1.65 | 0 | — | azeretSemiMono | Small supporting labels and product-preview annotations. |
| button | 15px | 400 | 1 | 0.05em | — | azeretSemiMono | Calls to action with spaced, clear monospace lettering. |
| nav | 12px | 500 | 1.65 | 0.05em | uppercase | azeretSemiMono | Compact uppercase navigation labels. |
| eyebrow | 9px | 400 | 1.65 | 0.05em | uppercase | azeretSemiMono | Small uppercase section identifiers above headings. |
| code | 13px | 400 | 1.65 | 0 | — | azeretSemiMono | Code-like content and technical product-preview text. |

## Spacing & layout

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

Use a centered, wide content frame capped at the measured 1132px maximum, with headings and copy aligned to the left. The page reads as a long single-column narrative, interrupted by split layouts, multi-column product cards, and broad framed previews. Sections share the pale canvas and are separated by fine rules and generous vertical gaps. Keep copy compact and let diagrams and interface captures occupy the visual center. The density is comfortable: sparse page-level composition, dense detail inside product previews.

## Shape & elevation

- Radius: button `4px` · card `6px` · badge `9999px` · nav `4px` · xs `1px` · sm `4px` · md `6px` · pill `9999px`
- Shadow `md` (card): `rgba(26, 21, 34, 0.1) 0px 8px 22px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual language is mostly flat, relying on fine borders and framed panels rather than shadows. Product previews use nested outlines and light surfaces to create depth and structure. Keep any shadow exceptionally restrained; the measured medium card shadow is subtle and should not become a general treatment.

## Imagery

Product UI, code panels, system diagrams, and dashboard previews are the primary imagery. Present them as crisp, pale panels inside thin dark or gray frames, often with tiny mono figure captions and plotted data. Customer photography appears in paired enterprise case-study cards; treat it as contextual evidence rather than the site’s dominant visual language. Avoid decorative 3D or unrelated stock imagery.

## Components

### Navigation bar

Compact horizontal header with uppercase monospace links, dark text, a citrus demo button, and a dark GET STARTED button.

### Hero actions

Pair a dark filled GET STARTED action with a white bordered DOWNLOAD WARP TERMINAL action below the supporting line.

### Framed product preview

Large white interface panel enclosed by thin dark rules, with small mono figure captions and product data inside.

### Feature tabs

Compact horizontal category labels above a code-and-configuration showcase; emphasize the active item in blue.

### Feature list and detail

Stacked numbered feature rows sit beside a product demonstration, separated by fine horizontal rules.

### Case-study band

Full-width electric-blue section with a short headline, concise explanatory copy, link action, and supporting image.

### FAQ rows

Simple question-and-answer list with compact labels, fine separators, and small expand affordances.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #eef17c · text #1a1522 · radius 4px · padding 6px 16px · 500 12px azeretSemiMono · uppercase
- **Secondary button** (“GET STARTED”): background #1a1522 · text #ffffff · border 1px solid #1a1522 · radius 4px · padding 6px 16px · 500 12px azeretSemiMono · uppercase
- **Link** (“LIVESTREAM”): transparent background · text #1a1522 · radius 0px · padding 0px 0px 2px 0px · 400 13px azeretSemiMono
- **Card** (“01 Opinionated, but flexible Set up your”): transparent background · text #1a1522 · border 1px solid #d7d4da · radius 0px · padding 0px · 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

- Use the pale canvas as the page-wide background.
- Reserve electric blue for purposeful accents and selected states.
- Set navigation, body copy, and labels in a monospace face.
- Frame product previews with fine, crisp outlines.
- Keep headings left-aligned and section copy concise.
- Separate long sections with whitespace and subtle rules.

## Don't

- Do not turn the page into a dark theme.
- Do not flood large areas with blue outside the featured case-study band.
- Do not add decorative gradients that are absent from the measured page.
- Do not round interface frames into soft marketing cards.
- Do not use oversized, loose sans-serif body copy.
- Do not make customer photography the primary visual language.

## Agent prompt

Build a new page in Warp’s code-native visual style. Use Lavender Mist (#fbf9fe) as the main canvas, Deep Ink (#1a1522) for text and outlines, and Quiet Rule (#d2d1d8) for restrained dividers. Use Electric Signal (#2a1eff) sparingly for active states, links, and diagram marks; reserve Citrus Highlight (#eef17c) for a standout demo action. Make Azeret Mono the dominant voice for navigation, body copy, labels, and controls, with a contrasting sans-serif heading face. Keep the layout left-aligned within a broad centered frame, with generous section breathing room and compact copy. Build visual proof from framed product UI, code, and diagrams. Use flat surfaces, crisp thin borders, and minimal shadow. Keep calls to action compact and uppercase.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and description above paired actions and a large framed product preview. | primary and secondary CTA, product proof, small qualification note | monospace headline, dark button, white outlined button, framed dashboard |
| 2 | logo-cloud | A shallow horizontal strip of customer and partner marks beneath the hero. | social proof | small mono intro, grayscale logos, thin section rules |
| 3 | product-showcase | Left-aligned section intro above a broad tabbed configuration interface. | category tabs, learn-more link, configuration exploration | active blue tab, code editor panel, fine dividers, white preview surface |
| 4 | feature-split | Introductory heading above a two-part feature list and product detail panel. | numbered feature sequence, feature selection | stacked ruled rows, adjacent interface preview, compact section label |
| 5 | stats | Section intro above a wide, framed analytics dashboard with three metric areas. | performance evidence, metric comparison | dashboard cards, small charts, mono figure caption, thin dark frame |
| 6 | other | Full-width blue band with text at left and a supporting visual at right. | case-study link, outcome-led proof | electric-blue background, white text, compact call to action |
| 7 | testimonials | Section heading and intro followed by two side-by-side customer story cards. | customer proof, read-story links | paired photography, customer logos, compact captions |
| 8 | comparison | Section intro above a wide, framed diagram of layered choices. | layer-by-layer explanation, open choice positioning | stacked horizontal bands, progressive blue tones, figure caption |
| 9 | product-showcase | Left-aligned heading above a large, multi-panel control-plane preview. | governance overview, cost monitoring, guardrail illustration | nested framed panels, charts and controls, product UI collage |
| 10 | product-grid | Three side-by-side product cards under a heading and brief description. | product discovery, download and start actions | three product images, short card descriptions, compact buttons |
| 11 | faq | Single-column question list with each item on its own ruled row. | expandable answers, question scanning | compact mono questions, fine row separators, small expand indicators |
| 12 | footer | Six-column link directory above a subdued legal line. | grouped navigation, secondary discovery | small labels, muted link text, multi-column grid |

## 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