Warp Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

9tokens

15type steps

6radius steps

2pxspacing base

Warp, in one page

Warp is an "agentic development environment" — a terminal application that wraps an AI agent — and its marketing site mirrors the product's posture: a single dark band running the entire page, warmer than pure black ({colors.canvas} #2b2622 carries a hint of brown-beige from the brand's oklch-defined warmth value), with copy set almost entirely in Inter. The page reads more like a developer's reading-mode editor than a marketing surface.

The decoration is restrained. Two terminal screenshots open the hero (split between the two main product modes — agent + terminal). A partner-logo strip (Anthropic / OpenAI / Google / Stanford) sits below the hero on a slightly warmer tile surface. A single testimonial card with a portrait photograph. A press-coverage list. Then the page closes with download tiles for Mac / Linux / Windows. There is no gradient, no atmospheric backdrop, no illustration system.

Type is the second decisive voice. Hero display sits at 64 px Inter weight 400 with -1.6px tracking — restrained for a hero, deliberately quiet. The brand carries DM Mono as its monospace face for code blocks, and Instrument Serif italics occasionally appear for editorial moments. Body text is 16 px Inter at line-height 1.5, very readable.

Key Characteristics:

A single primary "color" — really an off-white {colors.primary} (#f7f5f0) — that doubles as text on canvas and as the button-primary fill. There is no chromatic brand accent.
Warm dark canvas ({colors.canvas} #2b2622) is the only page surface. The brand's defining tone is the brown-warmth, not pure black.
Extremely tight button radii — 3 / 4 px (1 / 2× the brand's {rounded.md} 4 px base) — the brand never uses generous pill shapes for CTAs. Only icon containers use {rounded.full}.
Inter sans + DM Mono mono is the canonical pairing. Instrument Serif appears as a third editorial face for occasional italics.
Terminal-mockup imagery is the brand's only consistent decorative system — no gradients, no atmospheric overlays.
A subtle warm tint runs through every neutral; even body text and dividers carry a hint of warmth rather than neutral gray.

Do's and don'ts

Do

Reserve {colors.primary} off-white for primary CTA pills and default text. There is no chromatic accent.
Use tight {rounded.sm} 3 px or {rounded.md} 4 px button radii. The brand never uses generous pills for CTAs.
Set hero headlines in Inter weight 400 with -1.6 px tracking. The brand reads as quietly confident.
Pair Inter (sentence-case) with DM Mono (code blocks, terminal mockups).
Keep the warm-dark canvas tone — pure black breaks the brand's identity.

Don't

Don't introduce a chromatic brand accent. The off-white-on-warm-dark IS the brand's voice.
Don't render the hero headline in heavy weight (700+). The brand's display is intentionally light.
Don't use generous pill CTAs. The brand's button radius is 3-4 px, almost rectangular.
Don't replace the warm dark canvas with neutral gray or pure black. The warmth IS the brand.
Don't drop a soft drop-shadow on cards. Hairlines + surface contrast carry elevation.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Warp design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #f7f5f0
- on-primary: #2b2622
- ink: #f7f5f0
- body: #c9c0ad
- body-strong: #dad2c1
- mute: #aea69c
- canvas: #2b2622
- canvas-soft: #383330
- hairline: #3f3a36

Type:
- families: Inter, -apple-system, Segoe UI, Roboto
- scale: 12, 13, 14, 16, 18, 20, 24, 28, 32
- weights: 400, 500

Shape:
- radius: 0, 1, 2, 3, 4, 6
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 10, 16, 24, 32, 48, 64, 96

Rules:
- Reserve `{colors.primary}` off-white for primary CTA pills and default text. There is no chromatic accent.
- Use tight `{rounded.sm}` 3 px or `{rounded.md}` 4 px button radii. The brand never uses generous pills for CTAs.
- Set hero headlines in Inter weight 400 with `-1.6 px` tracking. The brand reads as quietly confident.
- Pair Inter (sentence-case) with DM Mono (code blocks, terminal mockups).
- Keep the warm-dark canvas tone — pure black breaks the brand's identity.

Avoid:
- Don't introduce a chromatic brand accent. The off-white-on-warm-dark IS the brand's voice.
- Don't render the hero headline in heavy weight (700+). The brand's display is intentionally light.
- Don't use generous pill CTAs. The brand's button radius is 3-4 px, almost rectangular.
- Don't replace the warm dark canvas with neutral gray or pure black. The warmth IS the brand.
- Don't drop a soft drop-shadow on cards. Hairlines + surface contrast carry elevation.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Off White Primary ({colors.primary} — #f7f5f0): The brand's "primary" is a warm off-white. Used as button-primary fill, as default text on canvas, as the wordmark color. There is no chromatic brand accent — the off-white IS the brand's distinguishing tone.

Surface

Canvas ({colors.canvas} — #2b2622): The warm dark page background. Resolved from oklch(22.0% 0.004 84.6). Slightly browner than pure black, slightly warmer than a neutral gray — the warmth IS the brand's identity.
Canvas Soft ({colors.canvas-soft} — #383330): A lighter warm-dark fill used for cards, mockup chrome, and partner-logo tiles.
Hairline ({colors.hairline} — #3f3a36): 1 px solid divider on dark surfaces.

Text

Ink ({colors.ink} — #f7f5f0): Default text on canvas — same off-white as the primary, intentionally unified.
Body Strong ({colors.body-strong} — #dad2c1): Mid-emphasis body text.
Body ({colors.body} — #c9c0ad): Secondary body text — captions, supporting copy, press-coverage rows.
Mute ({colors.mute} — #aea69c): Lowest-priority text — timestamps, fine print, footer secondary lines. Resolved from oklch(71.5% 0.008 84.6).

Semantic

The brand doesn't surface a separate error / warning / success palette in its marketing pages. Validation cues come from the unified off-white system; in-product semantic colors live in the terminal application proper.

Type scaleRead the full spec

Font Family

Three faces ladder the system:

Inter for every display, body, button, link, and label role. Weights 400 / 500 are the working pair. Used with the brand's "Inter Fallback" custom face as the metric-compatible system fallback.
DM Mono for terminal mockups, command snippets, and code blocks. Weight 400 only. Loaded as --font-dm-mono.
Instrument Serif for occasional editorial italic moments — rare on the marketing surface, but documented as a third face for emphasised tagline-style phrases. Abel is also loaded as a fourth fallback for headline emphasis.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	64px	400	70.4px	-1.6px	Hero headline ("Warp is the agentic development environment").
`{typography.display-lg}`	48px	400	52.8px	-1.2px	Section headlines.
`{typography.display-md}`	32px	500	40px	-0.8px	Sub-section displays.
`{typography.display-sm}`	24px	500	32px	-0.4px	Card titles and lead emphasis.
`{typography.display-serif}`	48px	400	52px	-0.5px	Instrument Serif italic editorial moments.
`{typography.body-lg}`	18px	400	28px	0	Lead paragraphs.
`{typography.body-md}`	16px	400	24px	0	Default body.
`{typography.body-md-strong}`	16px	500	24px	0	Bold inline body.
`{typography.body-sm}`	14px	400	20px	0	Secondary body.
`{typography.body-sm-strong}`	14px	500	20px	0	Nav link / button labels.
`{typography.caption}`	12px	400	16px	0	Captions, fine print.
`{typography.code}`	13px	400	18px	0	Terminal mockup body.
`{typography.code-md}`	14px	400	20px	0	Inline command snippets.
`{typography.button-md}`	14px	500	20px	0	Button labels.

Principles

Hero display at weight 400 — the brand reads as quietly confident, not as a billboard.
Negative tracking is part of the voice. -1.6 px at 64 px hero, scaling down through display levels.
Inter for narrative, DM Mono for technical. Strict role separation.

Note on Font Substitutes

All three faces are open or freely-loadable:

Inter — load directly from Google Fonts or Vercel-hosted CDN.
DM Mono — open-source on Google Fonts.
Instrument Serif — open-source on Google Fonts.

Components and layoutRead the full spec

Buttons

button-primary — the off-white CTA on dark canvas.

Background {colors.primary} (off-white), text {colors.on-primary} (warm dark), label {typography.button-md}, padding {spacing.sm} {spacing.lg}, shape {rounded.sm} 3 px. Tight.

button-secondary-ghost — the ghost-style secondary used for nav and tertiary actions.

Background {colors.canvas}, text {colors.ink}, no border, same typography / shape.

button-icon-circular — the circular icon container.

Background {colors.canvas}, ink icon, shape {rounded.full}. Used for nav controls (search, theme).

Cards & Containers

card-content — the default content card on canvas-soft.

Background {colors.canvas-soft}, text {colors.ink}, 1 px solid {colors.hairline}, padding {spacing.xl}, shape {rounded.md}.

card-mockup — the terminal-screenshot mockup card.

Same chrome as card-content but body in {typography.code} (DM Mono) when text appears inside.

download-tile — the Mac / Linux / Windows download tile.

Background {colors.canvas-soft}, text {colors.ink}, hairline border, padding {spacing.xl}, shape {rounded.md}. Hosts a platform icon + label + download CTA.

partner-logo-tile — the canvas-soft tile hosting a partner logo.

Background {colors.canvas-soft}, monochrome logo SVG inside, padding {spacing.lg}, shape {rounded.md}.

testimonial-card — the single quote-style card with a portrait.

Background {colors.canvas-soft}, text {colors.ink}, padding {spacing.xl}, shape {rounded.md}. Portrait 1:1 + body in {typography.body-md}.

press-row — the press-coverage list item.

Background {colors.canvas} (no fill — sits on the canvas band), 1 px solid bottom border {colors.hairline}, body in {typography.body-md}, padding {spacing.lg} 0.

job-row — the "Join our team" list item (single row per open role).

Background {colors.canvas}, 1 px solid bottom border, body in {typography.body-md-strong}, padding {spacing.lg} 0.

Inputs & Forms

text-input — the dark-canvas text input.

Background {colors.canvas-soft}, text {colors.ink}, 1 px solid {colors.hairline}, body in {typography.body-sm}, padding {spacing.sm} {spacing.md}, shape {rounded.sm}.

Navigation

nav-bar — the sticky top nav.

Background {colors.canvas}, text {colors.ink}, padding {spacing.md} {spacing.xl}.

nav-link — link items in nav.

Background {colors.canvas}, text {colors.ink}, body in {typography.body-sm-strong}, padding {spacing.xs} {spacing.md}, shape {rounded.sm}.

footer — the footer band.

Background {colors.canvas}, text {colors.body}, padding {spacing.3xl} {spacing.xl}. Body in {typography.body-sm}.

Signature Components

hero-band — the dark hero band hosting the 64-px Inter headline.

Background {colors.canvas}, text {colors.ink}, padding {spacing.5xl} {spacing.xl}. Headline {typography.display-xl} (64 px / 400 / -1.6 px). Below: a 2-column terminal-mockup split.

content-band — the standard content band.

Background {colors.canvas}, text {colors.ink}, padding {spacing.5xl} {spacing.xl}. Section headline {typography.display-md}.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-warp {--page-bg: #2b2622;
  --page-bg-gradient: none;
  --text-color: #f7f5f0;
  --heading-color: #f7f5f0;
  --link-color: #f7f5f0;
  --link-hover-color: #e5dfcf;
  --border-color: #504b47;
  --card-bg: #2b2622;
  --card-shadow: 0 1px 2px rgba(247,245,240,0.06);
  --card-hover-shadow: 0 6px 18px rgba(247,245,240,0.12);
  --header-bg: #3c3734;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #2b2622;
  --footer-text-color: #b0ada8;
  --button-bg: #f7f5f0;
  --button-text-color: #2b2622;
  --button-hover-bg: #e5dfcf;
  --button-border: none;
  --button-border-radius: 3px;
  --button-secondary-bg: #37322e;
  --button-secondary-text-color: #f7f5f0;
  --button-secondary-hover-bg: #433f3b;
  --button-secondary-border: 1px solid #504b47;
  --prompt-bg: #35302c;
  --prompt-text-color: #f7f5f0;
  --base-font: var(--font-inter);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 3px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

maruyamacoffee 82.5%
mikimoto 77.9%
truck furniture 77.1%
markaware 76.3%
nikka 74.6%

Where this came from

Source document: volt/design-md/warp/DESIGN.md · 23.7 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.