Gold Leaf
#bd9f65Code syntax strings, keyword highlights, inline emphasis — appears only inside terminal content, never as a UI button
Warp
warp.devWebsite preview
The design language
Warp operates as a dimmed control room: warm near-black canvases, terminal-derived product surfaces, and tight geometric typography that reads like a command line rendered in print. The palette is almost entirely achromatic with a warm undertone — no cool blues or sterile grays — giving every screen the amber cast of a late-night coding session. Accent color is rationed ruthlessly: a single muted gold and a single blue-gray appear only where the terminal needs syntax punctuation or a link must surface. Components are flat, dense, and weightless — no decorative shadows, no skeuomorphic depth, no rounded pillowy buttons. Every element earns its place through typographic precision and generous negative tracking at display sizes.
Color palette
accent
Muted Cobalt
#6f839fCode syntax identifiers, secondary link text, tag accents — the cool counterpoint to the warm gold
neutral
Warm Off-White
#faf9f6Primary headlines, body text, nav links — the warm cream reads softer than pure white against the charcoal canvas
Bone Gray
#868684Secondary text, captions, muted labels — the midtone that separates from Off-White without losing warmth
Pale Stone
#b4b4b2Tertiary text, ghost button labels, low-emphasis copy
Faint Linen
#e3e2e0Hairline borders, subtle dividers, selected state outlines
Smoke Charcoal
#2f2f2fCard surfaces, nested panels, terminal window backgrounds
Iron Veil
#383838Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Slate Hearth
#40403fHighest surface elevation — modal overlays, floating panels
Deep Ember
#121212Page canvas, section backgrounds — the warm near-black that grounds the whole system
Smoked Onyx
#1e1e1dFooter, banded section backgrounds, subtle vertical shifts
Absolute
#000000Deepest dark, nav text, icon strokes, image masks
Ink Black
#080808Deep text, hairline borders that must disappear into the canvas
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
68px · 400 · 1 · -2.04px trackingThe quick brown fox jumps
text-56
56px · 400 · 1.2The quick brown fox jumps
heading-lg
48px · 400 · 1.1 · -1.44px trackingThe quick brown fox jumps
text-42
42px · 400 · 1The quick brown fox jumps
text-40
40px · 400 · 1The quick brown fox jumps
heading
32px · 400 · 1.19 · -0.64px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.2 · -0.48px trackingThe quick brown fox jumps
text-22
22px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Additional typeface
Matter
- Weights
- 400, 500
- Sizes
- 16px, 19px
- Line height
- 0.91-1.40
- Letter spacing
- -0.030em at 40-68px, -0.020em at 20-32px, -0.010em at 18-19px, 0 to +0.020em at 14-16px, +0.100em at 12px, +0.200em at 11px
- Fallback
- Söhne (premium) or Inter (free fallback)
- Features
- "ss01" on, "tnum" on
Primary typeface for all UI text — headlines, body, nav, and labels. Custom geometric grotesque with mechanical rhythm; the signature custom font. Letter-spacing tightens aggressively at display sizes (-0.030em at 56-68px) and opens wide for tracked small caps (0.200em at 11px), giving the system two distinct voices from one family.
Additional typeface
Geist Mono
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.00
- Fallback
- JetBrains Mono or IBM Plex Mono
Command-line strings inside buttons and inline code chips — the only monospace that touches user-facing UI
Additional typeface
Matter Mono
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.00
- Letter spacing
- -0.0120em
- Fallback
- JetBrains Mono
Monospaced variant of Matter for code blocks and product mockup bodies
Additional typeface
Inter
- Weights
- 400, 500
- Sizes
- 14px, 16px
- Line height
- 1.00-1.38
- Letter spacing
- -0.0140em, -0.0120em
- Fallback
- Inter
Secondary support face for body copy where Matter licensing is unavailable; rare in the system
Additional typeface
Matter Regular
- Weights
- 400
- Sizes
- 11px, 12px, 14px, 16px, 18px, 19px, 20px, 22px, 24px, 32px, 40px, 48px, 56px, 68px
- Line height
- 0.91, 1, 1.1, 1.15, 1.19, 1.2, 1.3, 1.35, 1.38, 1.4
- Letter spacing
- -0.03, -0.02, -0.01, 0.01, 0.02, 0.1, 0.2
Matter Regular — detected in extracted data but not described by AI
Additional typeface
Matter SQ Regular
- Weights
- 400
- Sizes
- 16px, 42px
- Line height
- 1, 1.2, 1.4
- Letter spacing
- 0.01
Matter SQ Regular — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 20-24px
- Element gap
- 10px
Border radius
nav
4pxcards
8pxicons
8pxpills
50pximages
20pxbuttons
4pxheroMask
110pxSpacing scale
1px2px4px5px6px8px10px11px12px13px14px15px16px20px24px26px30px32px36px40px44px48px59px64px66px128px171pxGuidelines
Do
- Use Matter (or Söhne as a paid substitute, Inter as a free fallback) for all UI text — never substitute a slab or humanist sans
- Set display headlines at 48-68px with letter-spacing between -1.44px and -2.04px; the negative tracking is what makes the type feel engineered, not editorial
- Use 0.200em tracking (2.2px) on 11px uppercase labels for the system's tracked-eyebrow voice
- Reach for #bd9f65 (Gold Leaf) and #6f839f (Muted Cobalt) only inside terminal/code contexts — never on UI buttons, tags, or badges
- Maintain the warm-gray palette: every neutral from #2f2f2f upward should have a slight amber undertone, not a cool blue cast
- Use 4px radius on all buttons and nav elements, 8px on cards and icons, 20px+ on images — the small-but-not-sharp radius defines the system's quiet precision
- Pair the white filled button with a ghost text link beside it for primary actions; avoid stacking two filled buttons
Don’t
- Don't introduce a bright primary brand color — the system's power comes from restraint; chromatic accents are syntax-only
- Don't add drop shadows to cards, modals, or buttons — the blue glow is reserved for one signature element, not generic elevation
- Don't use pure #ffffff for text on the dark canvas — always use #faf9f6, the warm off-white, to preserve the system's amber cast
- Don't apply rounded pill shapes (9999px) to buttons — Warp uses 4px, never fully rounded; the sharp-cornered button is part of the identity
- Don't break the 10px element-gap rhythm with 15px or 18px — the system breathes in multiples of 2 and 10
- Don't use the cool blue-gray #6f839f for body text or UI chrome — it lives exclusively inside terminal code and section headings
- Don't insert icons that aren't mono-weight and outlined — icons should match the precision of the type, not soften it
Components
Primary Download Button
Hero CTA — filled, white-on-white terminal command feelSolid #faf9f6 fill, #121212 text, Matter Medium 500 at 16px, 4px radius, 10px 16px padding. Includes a small downward-arrow icon (16px) to the right of the label. No shadow, no border. Sits flat against the dark canvas as the only luminous element on the page.
Ghost Nav Link
Secondary nav items and the "Contact sales" linkTransparent fill, #faf9f6 text, Matter Regular 400 at 14-16px, no border, no padding. Color shifts to #b4b4b2 on hover. Inherits the nav's 4px radius on any pill-shaped variant.
Terminal Product Mockup
Hero visual asset — the product, renderedDark window with rounded 8px corners, #2f2f2f body, #383838 chrome bar at top. Three macOS traffic-light circles (red/yellow/green) at 10px in the top-left. Code rendered in Geist Mono or Matter Mono at 12-14px, with syntax colored using #bd9f65 for strings and #6f839f for identifiers, all on the smoke charcoal panel.
Top Navigation Bar
Persistent site header#000000 background, 4px corner radius on its container. Left side: brand mark (Apple-shaped Warp glyph at 18px in #faf9f6) + nav items in Matter at 16px. Right side: ghost "Contact sales" link + filled "Download for Mac" button. Sits above an announcement banner.
Announcement Banner
Top-of-page news stripThin band, #000000 fill, centered Matter Regular text at 12-14px in #faf9f6, with an inline "Learn more" link in slightly heavier weight or underlined. 1px bottom border in #2f2f2f.
Section Heading Block
Section openers like "Coding Tools"Matter Regular 400 at 48-68px, #6f839f (blue-gray) or #faf9f6 color, letter-spacing -1.44px to -2.04px. Sits left-aligned with a generous left margin. The cool blue-gray tint on the heading distinguishes it from the warm cream body, creating a deliberate chromatic pivot at section level.
Hero Block
Above-the-fold split layoutTwo-column on desktop (text left, terminal visual right) with text block capped at ~520px. Headline at 68px Matter Regular, #faf9f6, -2.04px tracking. Sub-headline at 18-20px Matter Regular, #b4b4b2. CTA stack: filled white button above a `brew install` command line in Geist Mono 16px with a green command-prompt glyph.
Brew Install Command Chip
Inline developer-flavored CTATransparent background, Geist Mono 400 at 16px, #faf9f6 text, prefixed with a small green circle (#7ba564) acting as a prompt indicator. No border, no background — sits as raw terminal text under the Download button.
Footer
Site footer#1e1e1d background, multi-column link grid, Matter Regular at 14px in #b4b4b2 for links, #868684 for column headers, #e3e2e0 thin top border. Tight 8-10px row gaps between links.
Atmospheric Hero Image
Background image treatment for heroFull-bleed landscape photograph (mountains, mist) with dark warm grading — the entire image is treated to live behind a #121212 overlay at ~40% opacity so the photo reads as mood, not content. Masked corners at 110px on the terminal mockup that floats over it. Image is not decorative wallpaper; it carries the brand's nocturnal mood.
Surfaces & elevation
Level 0
Canvas
#121212Full-page background, hero and section grounds
Level 1
Banded Section
#1e1e1dFooter and alternating section bands
Level 2
Card
#2f2f2fTerminal mockup panels, product card containers
Level 3
Elevated Control
#383838Button fills, hover surfaces
Level 4
Floating Panel
#40403fModals, popovers, sticky overlays
Warp uses almost no shadow language. The single detected elevation is a wide blue bloom reserved for one signature element — it functions as a brand mark, not structural depth. All other surfaces rely on tonal contrast between warm grays (smoke, iron, slate) to communicate layering. This produces an interface that feels printed, not floated: flat, weightless, and confident enough to trust the eye to find hierarchy without drop shadows.
Signature glow accent
0 0 32px 10px rgba(33, 126, 255, 0.5)
Layout & imagery
Layout
Warp uses a 1200px max-width centered container with comfortable vertical breathing room (80-120px section gaps). The hero is a two-column split: text block left (capped ~520px) with a headline, sub-headline, filled CTA, and inline brew-install command; full-bleed terminal mockup floating right with a 110px masked corner. Subsequent sections shift to centered text + centered terminal mockup stacks, with feature headings (in cool #6f839f) offset left to break the centered pattern. Navigation is a sticky top bar with an announcement banner above it. No sidebar, no mega-menu, no card grid — sections are vertical stacks of headline + screenshot, letting the terminal imagery carry visual weight.
Imagery
Warp blends two visual registers: atmospheric landscape photography and terminal screenshots. The hero uses a full-bleed dark mountain photograph (treated with a warm #121212 overlay at roughly 40% opacity) that sets a nocturnal, contemplative mood — uncommon for a developer tool and deliberately cinematic. Product imagery is the IDE/terminal itself, shown as full macOS window mockups with traffic-light controls, rendered in Geist Mono and Matter Mono with gold and blue-gray syntax. Icons are thin-stroke, outlined, and mono-colored in #faf9f6. No illustrations, no 3D renders, no stock photography of people — the visual language is terminal + landscape, nothing in between.
Design notes
Agent Guide
**Quick Color Reference** - background: #121212 - surface card: #2f2f2f - text primary: #faf9f6 - text secondary: #868684 - text muted: #b4b4b2 - border hairline: #e3e2e0 - primary action: no distinct CTA color **Example Component Prompts** 1. **Hero section**: Background #121212. Headline at 68px Matter weight 400, #faf9f6, letter-spacing -2.04px, line-height 1.00. Subheadline at 20px Matter weight 400, #b4b4b2, letter-spacing -0.2px. primary action: no distinct CTA color 2. **Terminal product mockup**: 8px radius, #2f2f2f body, 32px #383838 title bar with three 10px traffic-light circles (red #ff5f57, yellow #febc20, green #28c840) in the top-left. Code body in Geist Mono 13px, #faf9f6 base text, #bd9f65 string values, #6f839f identifiers. Drop shadow: none. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 4. **Section heading + terminal stack**: Centered column, max-width 900px. Eyebrow label at 11px Matter 400, +2.2px letter-spacing, #b4b4b2, all caps. Heading at 48px Matter 400, #6f839f, letter-spacing -1.44px. Sub-copy at 18px Matter 400, #868684, max 60ch line length. Below: terminal mockup at full column width. 5. **Ghost nav link**: Transparent fill, #faf9f6 text, Matter 400 16px, no border, 8px horizontal padding. On hover: text shifts to #b4b4b2. Inherits the nav's 4px radius only when wrapped in a pill container.
Warm-Cool Chromatic Tension
Warp's most distinctive choice is refusing the cool blue-gray that dominates developer-tool design. Every neutral is warm (amber-tinged grays from #e3e2e0 to #080808), but the two chromatic accents are cool: #bd9f65 is a warm gold and #6f839f is a cool blue-gray. The system lives in this single warm-cool seam — gold strings on cool identifiers inside warm panels on a warm canvas. When in doubt, ask: does this color lean toward the candle or the moon? The candle is the surface, the moon is the code.
Similar brands
Linear
Same dark-canvas premium typography with custom geometric sans and aggressive negative tracking on display sizes; both ration chromatic color and let white-on-dark carry hierarchy
Raycast
Developer tool with a similar warm dark palette and product-forward hero composition; both foreground the IDE/terminal as the hero visual rather than abstract marketing imagery
Vercel
Tight geometric grotesque, 4px button radius, 1200px max-width content, flat surfaces without drop shadows — the same restraint-first approach to dark mode
Arc Browser
Warm dark canvas with high-contrast cream typography and a single restrained accent palette; both treat the terminal/command-line aesthetic as a visual language
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
