Color Palette
Warp Terminal — Dark palette in context
~/projects/my-app $ warp run "build my app"
✓ Analyzing codebase...
✓ Generating build plan...
Agent: I'll run npm install then npm run build.
● #121212 page bg · #2F2F2F cards · #AFAEAC secondary text · #CBB0F7 accent
Light Mode Backgrounds (Website)
Dark Mode Backgrounds (Terminal Product)
Opacity Fills (Dark overlay scale)
DG-6 (91.8%)
rgba(18,18,18,0.918)
DG-4 (86%)
rgba(18,18,18,0.86)
DG-9 (19%)
rgba(18,18,18,0.19)
DG-11 (14%)
rgba(18,18,18,0.14)
DG-12 (10%)
rgba(18,18,18,0.1)
Black-2 (8.2%)
rgba(18,18,18,0.082)
DG-13 (6.7%)
rgba(18,18,18,0.067)
Typography
Serif Base · Times / Matter Regular
Times
The agentic development environment. Build faster with AI that understands your codebase and terminal.
Regular · 400
Bold · 700
Display / UI · Matter · Geist Mono
Matter
$ warp run "fix this bug" · AI suggestions · /workspace/app
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Warp
Display 6XL · 56px · Bold · Matter · line-height: 54px · letter-spacing: −0.84px
The Agentic Dev Environment
Display 5XL · 42px · Bold · Matter · line-height: 48.3px · letter-spacing: −0.80px
Ship 10x faster with AI
Heading 4XL · 32px · Semibold · line-height: 38px · letter-spacing: −0.64px
AI that understands your code
Heading 3XL · 24px · Semibold · line-height: 32px · letter-spacing: −0.32px
Warp is the AI-powered terminal that lets developers and their teams work together more efficiently. Build, debug, and deploy with natural language.
Body · 16px · Regular · Times/serif · line-height: 22px · letter-spacing: −0.20px
Last session: 2 hours ago · 147 commands run · 3 AI assists used
Caption · 13px · Regular · Matter/Inter · line-height: 20px · letter-spacing: −0.18px
WARP DRIVE · AGENTS · NOTEBOOKS
Micro Label · 11px · Semibold · caps · letter-spacing: 2.4px
⚡ Dual font system: Warp's base font is Times (serif) — unusual for a developer tool. The proprietary Matter family handles UI text (Regular, Medium, Mono), while Geist Mono and Inter provide fallbacks. Letter-spacing spans the full range: −0.84px (tightest display) through +2.4px (micro caps labels).
Letter Spacing
Warp
Tight · −0.84px
--letter-spacing-tight · display 56px
Agent
Wider · −0.32px
--letter-spacing-wider · headings 24px
WARP DRIVE
LS-11 · +1.4px
--letter-spacing-ls-11 · section labels
TERMINAL
LS-12 · +2.4px
--letter-spacing-ls-12 · caps micro
Spacing
Spacing Scale
34 tokens — 2px → 160px · Dense small values with non-sequential token naming
Warp's spacing token names are non-sequential — --space-32 maps to 64px while --space-256 is only 24px. Also includes one fractional value: --space-5: 6.63366px — a sub-pixel fine-tuning token.
Borders
Border Radii
10 radius tokens ranging from 4px–50px (plus 50% for circles). The tight clustering of 4–10px reflects Warp's compact, terminal-native UI. The 33.17px token is a distinctive large pill used for CTA buttons on the marketing site — captured as a computed value.
Border Widths
--border-width-hairline
1px — single border width, used sparingly (×4 total)
Warp uses borders very rarely — only 4 instances detected. Most surface separation is achieved through background color contrast between the layered dark grays (#121212 → #1A1A1A → #2F2F2F → #40403F) rather than border lines.
Shadow / Elevation
No Shadow Tokens Defined
Warp's design system contains no CSS shadow tokens.
No shadow tokens were detected in Warp's extracted design system. This is consistent with a terminal-native product — elevation and depth are created entirely through background color layering using the opacity fill scale (rgba(18,18,18,0.067) through rgba(18,18,18,0.918)) rather than box shadows. The terminal UI's dark surfaces naturally create depth hierarchy through luminance contrast alone.
Z-Index
| Layer | Value | Usage |
|---|
| --z-1 | 1 | Base stacking — inline interactive elements, card overlays |
| --z-2 | 3 | Mid-layer — tooltips, hover states, secondary panels |
| --z-3 | 9 | Navigation layer — sticky bars, persistent UI chrome |
| --z-4 | 10 | Top application layer — modals, command palette, sidebars |
| --z-5 | 2,147,483,647 | Maximum (int32 max) — critical system overlays: onboarding, splash screens, AI agent chat. Ensures Warp UI renders above any embedded web content or third-party frames |
The 2,147,483,647 value is the maximum 32-bit signed integer — the same strategy used by Superhuman. This isn't by accident: both are high-performance productivity apps that need their overlays to reliably appear above everything in the browser, including any DOM injected by extensions or third-party scripts.
Breakpoints
📱
--breakpoint-xs / sm
809 / 809.98px
Mobile max / tablet threshold (paired)
💻
--breakpoint-md
810px
Tablet / narrow desktop minimum
💻
--breakpoint-lg / xl
1199 / 1199.98px
Desktop max / wide desktop (paired)
🖥️
--breakpoint-2xl
1500px
Wide desktop / hero layout
6 breakpoints total (809–1500px). Uses the same paired max/min boundary pattern (809/809.98, 1199/1199.98) as Bloomberg and Spotify. The starting point at 809px is higher than most brands — Warp's terminal app is primarily desktop-focused and doesn't support very small mobile viewports.
Opacity
Opacity Tokens
4 tokens — 0.18 → 0.70 · includes an unusual 18% dim token
--opacity-18
18% · subtle dim
--opacity-50
50% · half (×19)
--opacity-60
60% · secondary
--opacity-70
70% · muted text
The --opacity-18 token is unusual — 18% is non-standard across all 16 systems in this series. In Warp's context it's likely used for the near-transparent dark overlay on glassmorphic terminal elements. Note: the opacity fill scale is also encoded in the color tokens directly (rgba(18,18,18,*) from 6.7% to 91.8%).
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Warp is a dual-mode brand — light backgrounds for the website, dark for the terminal. Contrast is evaluated against both.
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-black | --color-white | 21:1 | AAA |
| --color-black | --color-white-3 | 19.95:1 | AAA |
| --color-black | --color-light-gray | 17.62:1 | AAA |
| --color-blue | --color-white | 9.4:1 | AAA |
| --color-blue | --color-white-3 | 8.93:1 | AAA |
| --color-blue | --color-light-gray | 7.88:1 | AAA |
| --color-white-2 | --color-dark-gray | 17.76:1 | AAA |
| --color-white-2 | --color-dark-gray-2 | 12.69:1 | AAA |
| --color-mid-gray | --color-white | 3.68:1 | AA Large |
| --color-mid-gray | --color-dark-gray | 5.09:1 | AA |
| --color-mid-gray | --color-dark-gray-2 | 3.64:1 | AA Large |
| --color-mid-gray-2 | --color-dark-gray | 8.45:1 | AAA |
| --color-mid-gray-2 | --color-dark-gray-2 | 6.04:1 | AA |
| --color-black | --color-dark-gray | 1.12:1 | Fail |
| --color-black | --color-dark-gray-2 | 1.57:1 | Fail |
| --color-white-2 | --color-white | 1.05:1 | Fail |
| --color-mid-gray-2 | --color-white | 2.22:1 | Fail |
| --color-mid-gray-2 | --color-light-gray | 1.86:1 | Fail |
CSS Variables Reference
White--color-white#FFFFFF
White 3 (page bg)--color-white-3#FAF9F6
White 5--color-white-5#F9FAF5
Light Gray--color-light-gray#EBEBEB
Light Gray 2--color-light-gray-2#E3E2E0
Light Gray 3--color-light-gray-3#E0DFDC
Black (×1856)--color-black#000000
Blue Link (×306)--color-blue#0000EE
Mid Gray--color-mid-gray#868584
Mid Gray 2--color-mid-gray-2#AFAEAC
Light Purple--color-light-purple#CBB0F7
Dark Gray (terminal bg)--color-dark-gray#121212
Dark Gray 5--color-dark-gray-5#1A1A1A
Dark Gray 15--color-dark-gray-15#1E1E1D
Dark Gray 7--color-dark-gray-7#2A2B25
Dark Gray 2--color-dark-gray-2#2F2F2F
Dark Gray 8--color-dark-gray-8#333333
Dark Gray 10--color-dark-gray-10#353534
Dark Gray 3--color-dark-gray-3#40403F
Green (terminal prompt)--color-green#2ECC71
DG-6 (91.8% overlay)--color-dark-gray-6rgba(18,18,18,0.918)
DG-4 (86% overlay)--color-dark-gray-4rgba(18,18,18,0.86)
DG-9 (19% overlay)--color-dark-gray-9rgba(18,18,18,0.19)
White-2 (text on dark)--color-white-2rgba(250,249,246,0.9)
White-4 (dim on dark)--color-white-4rgba(250,249,246,0.5)
Serif (base)--font-family-baseTimes
Sans-serif fallback--font-family-2sans-serif
Matter Regular--font-family-3Matter Regular
Matter Medium--font-family-4Matter Medium
Inter (UI)--font-family-5Inter
Geist Mono--font-family-6Geist Mono
Matter Mono--font-family-7Matter Mono Regular
2XS--font-size-2xs10px
XS--font-size-xs12px
SM--font-size-sm13px
Base--font-size-base14px
LG--font-size-lg16px
XL--font-size-xl18px
2XL--font-size-2xl20px
3XL--font-size-3xl24px
4XL--font-size-4xl32px
5XL--font-size-5xl42px
6XL Display--font-size-6xl56px
Tight (display)--letter-spacing-tight−0.84px
Normal--letter-spacing-normal−0.80px
LS-11 (section caps)--letter-spacing-ls-11+1.4px
LS-12 (micro caps)--letter-spacing-ls-12+2.4px
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal400ms
Ease In-Out--easing-ease-in-outease-in-out
Base · Content--z-1 → --z-41–10
Maximum (int32)--z-52,147,483,647
Design System Preview · Warp (Dual Light/Dark) · Generated 18/04/2026 · 32 color tokens · 11 font-size · 7 font-family · 4 font-weight · 13 line-height · 12 letter-spacing · 34 spacing · 10 radius · 1 border-width · 0 shadow · 3 duration · 1 easing · 5 z-index · 6 breakpoints · 4 opacity