AGENTIC DEVELOPMENT ENVIRONMENT

# Design System Inspiration of Warp

An agentic terminal-and-development-environment brand whose surface is a warm near-charcoal canvas (a tint warmer than pure black), broken only by clean Inter typography, the occasional Instrument Serif italic moment, and dense terminal-mockup imagery. CTAs are unusually understated, with shape geometry running tighter than most marketing sites.

Explore the system See signature components

FOUNDATION · 01

## Color Palette

A near-monochrome warm-dark system built around a single off-white accent. The brand's "primary" is really an off-white that doubles as text on canvas and as button-primary fill. There is no chromatic brand accent — the warm-dark tone is the brand's distinguishing voice.

### Brand & Accent

Off White Primary

#F7F5F0

The brand's single "primary" — used as button fill, default text on canvas, and the wordmark color. The off-white IS the brand's distinguishing tone.

On-Primary Warm Dark

#2B2622

The warm dark used as text on the off-white primary CTA. Mirrors the canvas tone.

### Surface

Canvas

#2B2622

The warm dark page background — slightly browner than pure black. The warmth IS the brand's identity.

Canvas Soft

#383330

Lighter warm-dark fill used for cards, mockup chrome, and partner-logo tiles.

Hairline

#3F3A36

1px solid divider on dark surfaces. The brand's universal edge color.

### Text

Ink

#F7F5F0

Default text on canvas — same off-white as the primary, intentionally unified.

Body Strong

#DAD2C1

Mid-emphasis body text — slightly cooler than ink.

Body

#C9C0AD

Secondary body text — captions, supporting copy, press-coverage rows.

Mute

#AEA69C

Lowest-priority text — timestamps, fine print, footer secondary lines.

FOUNDATION · 02

## Typography

Three faces ladder the system: Inter for narrative and display, DM Mono for terminal mockups and command snippets, Instrument Serif for occasional editorial italics. The hero sits at 64 px Inter weight 400 with -1.6 px tracking — restrained, deliberately quiet.

display-xl64 / 400 / -1.6px
Agentic development environment
display-lg48 / 400 / -1.2px
Section headlines stay quiet
display-md32 / 500 / -0.8px
Sub-section heading at thirty-two
display-sm24 / 500 / -0.4px
Card titles and lead emphasis
display-serif48 / 400 italic · Instrument Serif
An editorial italic moment.
body-lg18 / 400 / 28px
A lead paragraph — the calm, slightly larger body size used under hero headlines and section openers.
body-md16 / 400 / 24px
Default body paragraph copy at sixteen pixels Inter regular. Long-form legibility is the priority.
body-md-strong16 / 500 / 24px
Bolded inline body emphasis at sixteen pixels.
body-sm14 / 400 / 20px
Secondary body text — table cells, supporting descriptions, fine print.
body-sm-strong14 / 500 / 20px
Nav link and button label weight at fourteen pixels.
caption12 / 400 / 16px
Fine print at twelve pixels — footnotes and footer secondary lines.
code13 / 400 / 18px · DM Mono
$ warp init --workspace personal
code-md14 / 400 / 20px · DM Mono
$ git checkout -b feature/agent-runtime
button-md14 / 500 / 20px
Button label set in Inter medium

COMPONENTS · 03

## Button Variants

Extremely tight 3 px corners across the primary and ghost variants — almost rectangular. The brand never uses generous pill shapes for CTAs. Only icon containers use 9999 px full rounding.

button-primary

Download Warp

Off-white fill · warm-dark ink · 3px radius

button-secondary-ghost

Read the docs

Transparent · 1px hairline · 3px radius

button-icon-circular

9999px round — icon container only

COMPONENTS · 04

## Cards & Containers

Hairline-bordered cards on canvas-soft fill — the brand's primary chrome. No shadows. No gradients. Just precise 4 px rectangles, the occasional terminal mockup, partner-logo tile, testimonial card, and platform download tile.

#### card-content

Default content card chrome. Canvas-soft background, 1 px hairline border, 4 px radius, 24 px padding. Used for feature copy, callouts, and inline information.

    # Open Warp and spawn an agent
    $ warp agent run
    » resolve failing tests in
      /packages/agent-runtime
    # Searching 1,204 files...
    # 3 candidates · proposing fix

Warp for macOS

Apple Silicon · Intel · 88 MB

Download .dmg
Anthropic
MR

> "Warp turned my terminal into a thinking surface. The agent works alongside me, not against the prompt I just typed."

M. REYES · STAFF ENG, NORTHWIND
The Verge Why agentic terminals are the next IDE. 2025·11
Hacker News Show HN: Warp launches Agent Mode. 2025·10
TechCrunch Warp's Series B closes at $50M. 2025·07
Senior Systems Engineer San Francisco Full-time
Staff Designer, Brand Remote · US Full-time
ML Research Engineer New York Full-time

COMPONENTS · 05

## Form Elements

Inputs sit on the canvas-soft fill so they read as recessed against the warm-dark page. 1 px hairline border, 3 px radius, 36 px tall — tight, near-rectangular.

Work Email
Workspace Name
License Key

FOUNDATION · 06

## Spacing Scale

A 4 px base unit, with occasional 10 px and 6 px values for button padding. Section bands sit at 5xl (96 px) top and bottom; card interiors at xl (24 px). The whole layout breathes in even multiples.

spacing.xxs2pxHairline-thin inline gaps.
spacing.xs4pxBase unit. Used inside dense lists.
spacing.sm8pxVertical button padding; tight stack.
spacing.md10pxNav-bar vertical padding.
spacing.lg16pxHorizontal button padding; medium gap.
spacing.xl24pxCard interior padding (default).
spacing.2xl32pxContainer horizontal gutter.
spacing.3xl48pxFooter band vertical padding.
spacing.4xl64pxSection break gap.
spacing.5xl96pxHero / content band top & bottom.

FOUNDATION · 07

## Border Radius Scale

Extremely tight corners across the board. 3 px buttons, 4 px cards, 9999 px reserved only for icon containers and inline status pills.

none0px · full-bleed
xxs1px · tightest
xs2px · chips
sm3px · buttons
md4px · cards
lg6px · larger
pill9999px · status
full9999px · icons

FOUNDATION · 08

## Elevation & Depth

Surface contrast and hairline borders carry elevation. The brand never uses soft drop-shadows in its marketing surface — depth is implied through canvas-vs-canvas-soft tone difference and a single 1 px hairline.

Level 0 Flat band
Level 1 Hairline (1px)
Level 2 Inset card

COMPOSITES · 09

## Signature Components

The brand-native composite surfaces — the warm-dark hero band, the standard content band, the 5-up partner-logo strip, the testimonial card, and the 3-up Mac/Linux/Windows download row. Together these define every page on the marketing site.

hero-band

AGENTIC DEVELOPMENT ENVIRONMENT

### Warp is the agentic development environment

content-band

### The terminal you actually wanted

The standard content band hosts feature grids on the warm-dark canvas. Section headlines sit at 32 px Inter medium with -0.8 px tracking.

partner-logo-tile · 5-up strip

Anthropic
OpenAI
Google
Stanford
MIT

testimonial-card

AP

> "The first terminal where I trust the agent enough to walk away from the keyboard. Warp ships the workflow I've been hand-rolling for years."

A. PARK · DIRECTOR OF ENGINEERING, ATLAS

download-tile · 3-up Mac/Linux/Windows

macOS

Apple Silicon · Intel · 88 MB

Download .dmg

Linux

Debian · Fedora · Arch · 104 MB

Download .deb

Windows

x64 · ARM64 · 92 MB

Download .msi

nav-bar

footer

SYSTEM · 10

## Responsive Behavior

Three breakpoints. The hero terminal-mockup split stacks at mobile; the partner-logo strip drops from 5-up to 3-up to 2-up; download tiles drop from 3-up to 1-up. Hero type scales fluidly from 64 px to 36 px.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Hero 64→36 px; partner strip 2-up; download tiles 1-up; nav hamburger.
Tablet | 768–1023px | Partner strip 3-up; download tiles 1-up; nav links collapse.
Desktop | ≥ 1024px | Full 5-up partner strip; 3-up download tiles; nav full row.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding