Skip to main content
Back to Gallery

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.

warp.dev/Added
Warp Full Page — desktop screenshot

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.

Mode strategylight-first
  • 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

Save PNG
  • foregroundbtn-bg
    49%
    • HEX#0A0908
    • RGBrgb(10, 9, 8)
    • HSLhsl(30, 11%, 4%)
    • OKLCHoklch(14.06% 0.0030 69.39)
  • foregroundcolor-text-secondary
    33%
    • HEX#5F5D59
    • RGBrgb(95, 93, 89)
    • HSLhsl(40, 3%, 36%)
    • OKLCHoklch(47.89% 0.0068 84.58)
  • backgroundcard-bg
    12%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • backgroundbtn-text-color
    3%
    • HEX#F8F5EE
    • RGBrgb(248, 245, 238)
    • HSLhsl(42, 42%, 95%)
    • OKLCHoklch(97.05% 0.0098 87.47)
  • accent
    1%
    • HEX#C7AEFF
    • RGBrgb(199, 174, 255)
    • HSLhsl(259, 100%, 84%)
    • OKLCHoklch(80.16% 0.1152 297.94)
  • neutralcolor-border
    1%
    • HEX#C4C0BA
    • RGBrgb(196, 192, 186)
    • HSLhsl(36, 8%, 75%)
    • OKLCHoklch(80.93% 0.0095 78.27)
  • accent
    0%
    • HEX#D97757
    • RGBrgb(217, 119, 87)
    • HSLhsl(15, 63%, 60%)
    • OKLCHoklch(67.24% 0.1308 38.76)
  • accent
    0%
    • HEX#15803D
    • RGBrgb(21, 128, 61)
    • HSLhsl(142, 72%, 29%)
    • OKLCHoklch(52.73% 0.1371 150.07)
  • accent
    0%
    • HEX#007AFF
    • RGBrgb(0, 122, 255)
    • HSLhsl(211, 100%, 50%)
    • OKLCHoklch(60.28% 0.2177 257.42)

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.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#0A0908#FFFFFF19.90AAAAAA+106foreground on background
Aa
#FFFFFF#0A090819.90AAAAAA-108background on foreground
Aa
#0A0908#F8F5EE18.27AAAAAA+100foreground on background
Aa
#F8F5EE#0A090818.27AAAAAA-101background on foreground
Aa
#FFFFFF#1C1A2617.14AAAAAA-106background on background
Aa
#1C1A26#FFFFFF17.14AAAAAA+104background on background
Aa
#F8F5EE#1C1A2615.74AAAAAA-100background on background
Aa
#1C1A26#F8F5EE15.74AAAAAA+98background on background
Aa
#0A0908#C4C0BA10.99AAAAAA+70foreground on neutral
Aa
#C4C0BA#0A090810.99AAAAAA-69neutral 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.

Total30Lazy loaded60%svg30png9unknown9

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
Page type
  • Full Page
Industry
  • developer-tools
Theme
  • light
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.