Warp
Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.
Developer terminal. Warm near-black canvas, parchment text, a warm-grey palette with a soft lilac accent.
Palette
Typography
60px
42px
16px
14px
14px
32px
Border Radius
| Token | Value | Preview |
|---|---|---|
| sm | 1px | |
| md | 2px | |
| lg | 3px | |
| xl | 4px |
design.md
tokens (raw)
name: warp-design
version: alpha
description: >
A warm developer-terminal dark mode. The canvas is a near-black warm charcoal
with cream ink (oklch 97% at hue 84.6 — paper-warm, not blue-white). A
four-face system: Matter for headings, Inter for body, DM Mono for the
ever-present command lines, with Instrument Serif as an occasional editorial
voice. Sharp 2px radii (almost square), a cream primary button against dark
secondaries, and full-bleed lilac interludes are the moves. DM Mono UPPERCASE
eyebrows ("ALL DOWNLOADS") and inline `brew install` chips reinforce the
terminal heritage. Surfaces studied via Playwright: home + downloads
(computed --color/--font tokens + elements).
colors:
# Surface (warm dark)
surface: '#0C0C0B' # near-black warm canvas
surface-elevated: '#1C1B19' # --color-surface (oklch 22% 0.004 84.6)
surface-accent: '#C9A9F5' # full-bleed lilac/lavender interlude (approximate)
# Text (warm cream)
on-surface: '#FAF7F0' # --color-text (oklch 97% 0.010 84.6)
on-surface-secondary: '#B0ADA6' # --color-text-secondary (oklch 71.5%)
on-surface-body: '#C9C5BC' # --color-text-body
hairline: '#2A2926'
# Inverse / primary action
inverse: '#FAF7F0' # cream primary button fill
on-inverse: '#0C0C0B'
typography:
display: # "Ship better software with any agent"
fontFamily: 'Matter, system-ui, sans-serif'
fontSize: 60px
fontWeight: 400
lineHeight: 66px
letterSpacing: -1.5px
heading:
fontFamily: 'Matter, system-ui, sans-serif'
fontSize: 42px
fontWeight: 400
lineHeight: 48px
letterSpacing: -1.05px
body-md:
fontFamily: 'Inter, "Inter Fallback", system-ui, sans-serif'
fontSize: 16px
fontWeight: 400
lineHeight: 24px
letterSpacing: 0
body-sm:
fontFamily: 'Inter, system-ui, sans-serif'
fontSize: 14px
fontWeight: 400
lineHeight: 20px
mono: # "$ brew install --cask warp", "ALL DOWNLOADS"
fontFamily: '"DM Mono", ui-monospace, monospace'
fontSize: 14px
fontWeight: 400
lineHeight: 20px
serif: # occasional editorial accent
fontFamily: '"Instrument Serif", Georgia, serif'
fontSize: 32px
fontWeight: 400
rounded:
sm: 1px # --radius-sm (0.0625rem)
md: 2px # --radius / --radius-md (0.125rem) — default, near-square
lg: 3px # --radius-lg
xl: 4px # --radius-xl
components:
button-primary: # "Download"
backgroundColor: '{colors.inverse}'
textColor: '{colors.on-inverse}'
typography: '{typography.body-sm}'
rounded: '{rounded.md}'
padding: '12px 20px'
note: 'cream fill, dark label, optional Apple/OS glyph'
button-secondary: # "Contact Sales"
backgroundColor: '{colors.surface-elevated}'
textColor: '{colors.on-surface}'
rounded: '{rounded.md}'
command-field: # "$ brew install --cask warp" with copy
backgroundColor: 'transparent'
border: '1px solid {colors.hairline}'
textColor: '{colors.on-surface-secondary}'
typography: '{typography.mono}'
rounded: '{rounded.md}'
download-tile: # ".deb / .rpm / .exe"
backgroundColor: '{colors.inverse}'
textColor: '{colors.on-inverse}'
rounded: '{rounded.md}'
motion:
easing-standard: 'cubic-bezier(0.2, 0, 0, 1)'
duration-standard: 200ms
note: 'restrained; terminal-fast'
icons:
style: line / OS glyphs
stroke: 1.5px
sizes: { sm: 16px, md: 24px }
color-rule: 'cream on dark; OS marks (Apple, Linux, Windows) as-is'Warp
v alpha · "Ship better software with any agent"
Overview. Warp wears a warm developer-terminal dark mode: the canvas is a near-black warm charcoal (#0C0C0B) and the ink is cream (#FAF7F0, oklch 97% at hue 84.6 — paper-warm, never blue-white). This warmth is the whole personality. Typography is a four-face stack: Matter for headings (geometric grotesque), Inter for body, DM Mono for the omnipresent command lines, and Instrument Serif for the occasional editorial flourish. Corners are nearly square (a 2px base radius). The primary button is a bright cream chip against dark #1C1B19 secondaries, and full-bleed lilac interludes break the dark. DM Mono UPPERCASE eyebrows ("ALL DOWNLOADS") and inline $ brew install --cask warp chips constantly reaffirm the terminal heritage.
Colors
- Warm cream ink
#FAF7F0{colors.on-surface}— oklch 97% at warm hue. The signature; it makes the dark feel inviting rather than clinical. Secondary#B0ADA6(71.5%), body#C9C5BC. - Near-black warm
#0C0C0B{colors.surface}canvas;#1C1B19{colors.surface-elevated}(oklch 22%) for cards and secondary buttons. - Lilac
#C9A9F5{colors.surface-accent}(approximate) — full-bleed lavender interlude band. - Hairline
#2A2926for subtle borders.
Typography
Four families. Matter (substitute Söhne / Inter Tight) for headings, tracked tight (-1.5px). Inter for body. DM Mono for commands, code and uppercase eyebrows. Instrument Serif (substitute Newsreader) for rare editorial accents. Headings sit at normal weight (400) and large size — confidence through size, not bold.
| Token | Family | Size | Weight | Line-height | Tracking | Usage |
|---|---|---|---|---|---|---|
| display | Matter | 60px | 400 | 66px | -1.5px | hero h1 |
| heading | Matter | 42px | 400 | 48px | -1.05px | section h2 |
| body-md | Inter | 16px | 400 | 24px | 0 | body |
| mono | DM Mono | 14px | 400 | 20px | 0 | commands, eyebrows |
| serif | Instrument Serif | 32px | 400 | — | — | editorial accent |
Layout
Centered single column, full-width dark canvas with large media panels below the hero. The downloads page is a tidy grid of OS sections (Mac / Linux / Windows) with cream download tiles and arch chips (x64 / ARM64). Comfortable spacing; the command field sits inline with the primary CTA.
Elevation & Depth
Flat warm dark. Surfaces are distinguished by tint steps (#0C0C0B → #1C1B19) and hairlines, not shadows. The cream button is the brightest object on any screen and carries the visual weight.
Shapes
Almost square. The radius scale tops out at 4px and defaults to 2px (--radius-md). This sharpness reads as technical/precise — deliberately the opposite of soft consumer rounding.
Components
- button-primary "Download": cream fill, dark label, 2px radius, optional OS glyph.
- button-secondary "Contact Sales": dark elevated fill, cream label.
- command-field: transparent, hairline-bordered, DM Mono text with a copy icon.
- download-tile: cream tile with dark label for
.deb/.rpm/.exe, plus dark arch chips.
Motion
Restrained and terminal-fast (~200ms). No bounce or parallax — speed and precision over flourish.
Iconography
1.5px line icons and OS marks (Apple, Linux penguin, Windows) rendered as-is. Cream on dark. Sizes 16/24px.
Do's and Don'ts
- Do keep ink warm cream (
#FAF7F0), not blue-white — the warmth is the brand. - Do keep radii tiny (2px default); corners read sharp/technical.
- Do use DM Mono for commands and UPPERCASE eyebrows.
- Do make the cream button the single brightest element per view.
- Don't render a light/white background variant — the canvas is warm dark.
- Don't soften corners into large rounded cards; that breaks the precise terminal feel.
