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.
FOUNDATION · 01
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.
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.
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.
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
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.
COMPONENTS · 04
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.
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
"Warp turned my terminal into a thinking surface. The agent works alongside me, not against the prompt I just typed."
COMPONENTS · 05
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.
FOUNDATION · 06
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.
FOUNDATION · 07
Extremely tight corners across the board. 3 px buttons, 4 px cards, 9999 px reserved only for icon containers and inline status pills.
FOUNDATION · 08
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.
COMPOSITES · 09
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
content-band
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
testimonial-card
"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."
download-tile · 3-up Mac/Linux/Windows
nav-bar
footer
SYSTEM · 10
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. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.