Warp · Full Page
Warp
A developer-tool landing that feels compiled from the same source as the product — light surface, lilac accent, Azeret Mono. A Rust-built, AI-native terminal.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Warp is the rare developer-tool landing where the marketing surface feels like it was compiled from the same source as the product. We catalogued it because it pulls off a quiet trick most AI-native startups botch — selling a Rust-fast, agentic terminal without a single screaming gradient or particle field, leaning instead on a monospace voice, a restrained lilac accent, and a hairline-thin border system. If you are building for engineers who distrust anything that looks oversold, this is the page to study for how composure outperforms spectacle.
Design decisions observed
- Monospace as a brand voice, not a gimmick — Azeret Mono carries headings and labels with measured letter-spacing (0.6–0.75px), so the page reads like a terminal session rather than a SaaS brochure. That mono-forward identity is the single most copyable decision here.
- Accent used like a status LED — the lilac family (#c59fff / #c7aeff) and a warm terra (#d97757) appear at single-digit frequency counts against a near-monochrome surface. Color earns attention because it is rationed, never sprayed.
- Borders do the structural work, not shadows — a 1px hairline in a muted umber (#c4c0ba) appears 119 times while drop shadows stay whisper-soft (0.1–0.12 opacity). Structure is drawn, not floated.
- Tiny radius discipline — the corner scale tops out at 6px. Nothing is pillowy; every surface keeps the squared-off, technical edge that signals 'this is a tool, not a toy'.
- Micro-density spacing — a 2px floor under a 4/8/12/16 dominant rhythm packs information tightly without feeling cramped, the way a well-configured terminal does.
- Restraint as the whole thesis — zero gradients, no hero illustration, expressive-but-invisible motion (0.15s state changes on a single cubic-bezier). The page never interrupts the reader it is trying to convert.
What to study
- How a monospace family becomes the brand — Warp lets Azeret Mono headline the page where most teams reach for a geometric sans. Steal the conviction: a mono voice can be the most memorable thing on a developer landing.
- Accent rationing — count the lilac and terra appearances and you will find them in single digits. Learn how a near-monochrome canvas makes a tiny accent budget feel intentional and premium.
- Border-first elevation — almost all separation comes from a single 1px umber hairline, not stacked shadows. This is the cheapest, fastest, most legible way to build structure on a flat surface.
- Motion you cannot see working — a tight 0.15s / cubic-bezier(0.4, 0, 0.2, 1) ladder anchors nearly every transition, with custom reveal curves (cubic-bezier(0.16, 1, 0.3, 1)) reserved for storytelling beats. Discipline, not flourish.
What to avoid
- Don't reach for a gradient to add 'energy' — Warp ships none, and the page is more confident for it. If you copy this language, copy the absence too; a gradient here would read as a tell that you didn't trust the type.
- Don't soften the corners to feel friendlier — the sub-6px radius is load-bearing identity. Round these surfaces and you erase the technical edge that makes the page feel like the product.
- Don't let the mono voice spread to body copy — Warp keeps Azeret Mono for headings and labels and hands paragraphs to Inter. All-mono body text would tank readability and cosplay the aesthetic instead of using it.
Taste notes
The page reads like a clean terminal buffer — light, dense, and quietly fast. Authority comes from the monospace cadence and the umber hairlines doing all the structural speaking, while the lilac accent behaves like a cursor blink: present only where attention should land. There is no gradient, no bloom, no theatre; the restraint is the message. You leave feeling briefed by an engineer, not pitched by a marketer.
Lineage & references
- Part of the 2024+ dark-first, native-feel developer-tool generation alongside Raycast and Replit — products whose marketing is functionally indistinguishable from the software, because the same taste built both.
- Shares Raycast's command-surface minimalism and monospace-tinged identity — the conviction that a power-user tool should market itself in the visual language its users already live in.
- Sits beside Arc and Replit in treating AI-native capability as a quiet substrate rather than a neon banner — agentic power presented with composure, not spectacle.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Technical minimalism at 2px spatial resolution with a monospace voice. The captured surface is light — near-white #fcfcfc background, warm #F6F2EE panels, near-black #0a0908 text — but the identity is built from a terminal cadence: Azeret Mono carries headings and labels with measured letter-spacing (0.6–0.75px), Inter handles reading body, and the radius scale never exceeds 6px so every surface keeps a squared technical edge. Accent is rationed like a status LED — lilac (#c59fff / #c7aeff) plus a warm terra (#d97757) at single-digit frequency. Elevation is drawn with a single 1px umber hairline (#c4c0ba), not shadows. There are NO gradients in this capture; structure and emphasis come from type, border, and disciplined color — never from a wash.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light near-white #fcfcfc canvas + warm #F6F2EE panels + near-black #0a0908 text + homeopathic lilac #c59fff/#c7aeff and warm terra #d97757 accents), the monospace-forward typographic cadence (Azeret Mono for headings and labels with 0.6–0.75px letter-spacing, Inter for body, theFuture for oversized display), the 2px-base spacing scale, the border-first elevation (1px #c4c0ba hairline before any shadow), the sub-6px radius discipline, and the cubic-bezier(0.4, 0, 0.2, 1) motion curve at 0.15s for state changes. Critically: ship ZERO gradients — this language earns its energy from type and border, not from color washes. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default and call out any decision that deviates.
Overview
- Layout
- Grid
- Content width
- Bounded
- Framing
- Flat
- Grid strength
- Strong
Color philosophy
Light, near-monochrome canvas — #fcfcfc background paired with warm #F6F2EE panels and near-black #0a0908 text doing the overwhelming majority of surface work. Secondary text descends through warm grays: #5f5d59 (secondary) → #646159 (muted). The accent budget is tiny and rationed: lilac #c59fff / #c7aeff for emphasis and a warm terra #d97757 as the single brand-tier hue, both appearing at single-digit frequency. There are NO gradients in this capture — color carries meaning through placement and scarcity, never through washes.
- Near-black #0a0908 text (the dominant reading + button-fill color, ~956 measured occurrences) on the #fcfcfc / #F6F2EE light surface
- Warm-gray descender #5f5d59 (secondary, ~648 occurrences) → #646159 (muted) for captions, metadata, de-emphasized labels
- Panel + surface pair #F6F2EE used to separate cards and sections from the #fcfcfc body without introducing a border on every edge
- Lilac accent #c59fff (--color-tertiary) / #c7aeff (text-pink) reserved for emphasis and highlight — single-digit surface frequency, never a fill
- Warm terra #d97757 is the sole brand-tier hue (isBrandTier: true) — used as a rare focal accent, not decoration
- Button fill inverts the canvas: #0a0908 background with #f8f5ee near-cream text for primary CTAs
Typography rules
- Three-family system: Azeret Mono (headings + UI labels, the monospace brand voice), Inter (reading body + small UI), theFuture (oversized display headings only, 56–72px).
- Monospace carries authority: Azeret Mono headings use measured positive letter-spacing — 0.6px at 12px heading, 0.75px at 15px body-mono. Do not substitute a geometric sans here; the mono cadence is the signature.
- Inter handles body at 16px/24px (weight 400) and small text at 14px/20px and 12px/16px. Reading paragraphs never run in mono.
- Display headings (theFuture) sit tight with negative tracking: -1.96px at 56px, -1.8px at 72px, and the --heading CSS var defines 80px / weight 400 / -0.035em. Display weight stays 400 — theFuture is not bolded.
- Body line-height is generous (--body-line-height: 1.6) for the 16px reading layer; mono UI labels run tighter at 28px line-height on 14px for dense control rows.
- Weight discipline is narrow: 400 (reading + display) / 500 (UI labels, mono + sans) / 700 only for rare bold emphasis. Mono is available at 400 and 500.
- Eyebrow / overline labels use 10–11px Inter at wide tracking (2.8px) uppercase-feel — the only place letter-spacing goes large.
Spacing rules
- 2px base unit. Scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 32 — the 4px (×180) and 12px (×98) steps dominate, with a 2px floor for optical micro-correction.
- Container max-width 1280px (--layout-max-width / --content-max-width: 80rem). Narrower bounded rails at 576 / 672 px for prose and form clusters.
- Gutter values for flex/grid: 4 / 6 / 8 / 10 / 12 / 16 / 24 px dominate; larger 40 / 56 / 64 px gaps appear only between major sections.
- Card / button padding pulls from the scale — buttons use the --btn-padding token (0.25rem 1rem = 4px 16px); cards run 16–24px. No magic numbers.
- Section vertical rhythm leans on the 24 / 28 / 32px steps; --scroll-padding-top is 5.25rem to clear the sticky nav.
Design tokens
Palette, type, and space — all agent-readable.
10 colors · hex / rgb / hsl / oklch
- foregroundbtn-bg49%
- HEX
#0A0908 - RGB
rgb(10, 9, 8) - HSL
hsl(30, 11%, 4%) - OKLCH
oklch(14.06% 0.0030 69.39)
- HEX
- foregroundcolor-text-secondary33%
- HEX
#5F5D59 - RGB
rgb(95, 93, 89) - HSL
hsl(40, 3%, 36%) - OKLCH
oklch(47.89% 0.0068 84.58)
- HEX
- backgroundcard-bg12%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- backgroundbtn-text-color3%
- HEX
#F8F5EE - RGB
rgb(248, 245, 238) - HSL
hsl(42, 42%, 95%) - OKLCH
oklch(97.05% 0.0098 87.47)
- HEX
- accent1%
- HEX
#C7AEFF - RGB
rgb(199, 174, 255) - HSL
hsl(259, 100%, 84%) - OKLCH
oklch(80.16% 0.1152 297.94)
- HEX
- neutralcolor-border1%
- HEX
#C4C0BA - RGB
rgb(196, 192, 186) - HSL
hsl(36, 8%, 75%) - OKLCH
oklch(80.93% 0.0095 78.27)
- HEX
- accent0%
- HEX
#D97757 - RGB
rgb(217, 119, 87) - HSL
hsl(15, 63%, 60%) - OKLCH
oklch(67.24% 0.1308 38.76)
- HEX
- accent0%
- HEX
#15803D - RGB
rgb(21, 128, 61) - HSL
hsl(142, 72%, 29%) - OKLCH
oklch(52.73% 0.1371 150.07)
- HEX
- accent0%
- HEX
#007AFF - RGB
rgb(0, 122, 255) - HSL
hsl(211, 100%, 50%) - OKLCH
oklch(60.28% 0.2177 257.42)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 13 nodes captured; depth capped at 6 for readability.
- body
- ├─ divbanner
- ├─ Header
- │ └─ Nav
- ├─ Main
- │ └─ div (×6)
- │ └─ Section
- ├─ Section
- └─ Footer
- └─ div
- └─ div
- └─ div
- └─ Nav
Accessibility
WCAG contrast matrix.
78 combinations · 30 pass AA · 16 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #0A0908 | #FFFFFF | 19.90 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #0A0908 | 19.90 | AAA | AAA | -108 | background on foreground |
Aa | #0A0908 | #F8F5EE | 18.27 | AAA | AAA | +100 | foreground on background |
Aa | #F8F5EE | #0A0908 | 18.27 | AAA | AAA | -101 | background on foreground |
Aa | #FFFFFF | #1C1A26 | 17.14 | AAA | AAA | -106 | background on background |
Aa | #1C1A26 | #FFFFFF | 17.14 | AAA | AAA | +104 | background on background |
Aa | #F8F5EE | #1C1A26 | 15.74 | AAA | AAA | -100 | background on background |
Aa | #1C1A26 | #F8F5EE | 15.74 | AAA | AAA | +98 | background on background |
Aa | #0A0908 | #C4C0BA | 10.99 | AAA | AAA | +70 | foreground on neutral |
Aa | #C4C0BA | #0A0908 | 10.99 | AAA | AAA | -69 | neutral on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://www.warp.dev/img/logos/trusted-by/amazon-white.svg?dpl=dpl_AN5oLVQmESdrSZJapmoigWwajsTR- Format
- SVG
- Dimensions
- 0×0
- Loading
- lazy
- srcset
- no
- Full Page
- developer-tools
- light
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


