# Design System
Inspired by Warp

A visual catalog of design tokens, components, and patterns extracted from Warp's warm-dark marketing site and documented in DESIGN.md.

Explore Tokens View Components

## Color Palette

Almost monochromatic warm grays — from warm parchment text to earth-tone dark surfaces. No bold accents.

### Primary

Warm Parchment
#faf9f6
Primary text, barely-cream off-white
Earth Gray
#353534
Button backgrounds, dark surfaces
Deep Void
#0e0e0d
Page background, warm near-black

### Neutrals & Text

Ash Gray
#afaeac
Body text, button text
Stone Gray
#868584
Secondary text, labels
Purple-Tint Gray
#666469
Link text, subtle purple undertone

### Surface & Border

Frosted Veil
rgba(255,255,255,0.04)
Subtle surface overlay
Mist Border
rgba(226,226,226,0.35)
Card borders, containment
Frosted Button
rgba(255,255,255,0.16)
Tag/inline button background

## Typography Scale

Matter font family — geometric but approachable. Regular weight dominance with editorial uppercase labels.

Display Hero — 80px / 400 / 1.00 / -2.4px
The best terminal
Matter Regular (shown in Inter fallback) — maximum compression
Section Display — 56px / 400 / 1.20 / -0.56px
Development environment
Matter Regular — feature section headings
Feature Heading — 40px / 400 / 1.10 / -0.4px
Agents that actually work
Matter Regular — feature block titles
Card Title — 22px / 500 / 1.14
Everything you need to ship faster
Matter Medium — emphasized card headers
Body Large — 20px / 400 / 1.40 / -0.2px
Warp is the terminal reimagined with AI and collaborative tools for modern development teams.
Matter Regular — relaxed reading rhythm
Body — 18px / 400 / 1.30 / -0.18px
Built from the ground up in Rust for speed, with AI integrated at every level.
Matter Regular — standard body paragraphs
Uppercase Label — 12px / 400 / 1.35 / 2.4px
Featured Integration
Matter Regular — editorial categorization, wide tracking
Code — 16px / 400 / 1.00
curl -fsSL https://warp.dev/install | bash
Geist Mono / Matter Mono Regular — terminal display

## Button Variants

Restrained and muted — dark pills, frosted tags, underline ghosts. No bright CTAs.

Download Warp Dark Pill / Primary
Learn More Border Pill / Secondary
Frosted Tag / 6px
Ghost / Underline
Sign Up Small / Nav CTA

## Card Examples

Semi-transparent borders for containment, warm dark surfaces, editorial category tags.

Terminal

### Built in Rust

Blazingly fast terminal performance with native rendering and GPU acceleration for the smoothest experience.

AI Agent

### Agent Mode

Let AI agents handle complex terminal workflows — from debugging to deployment — while you focus on building.

Collaboration

### Shared Workflows

Share terminal sessions, commands, and configurations with your team. Real-time collaborative development.

## Form Elements

Warm dark inputs with subtle borders. Focus brightens the border — no colored rings.

Full Name
Email (Focus)
API Key (Error) Invalid key format
Description

## Spacing Scale

8px base unit with editorial-grade spacing for the magazine-like layout.

4px
8px
12px
16px
24px
32px
36px

## Border Radius Scale

From small tags to full pill CTAs — radius grows with element prominence.

4px
Tags
6px
Buttons
8px
Images
12px
Cards
14px
Large cards
40px
Sections
50px
Pill CTA
200px
Progress bar

## Elevation & Depth

Remarkably flat — depth through borders and photography, not shadows.

Level 0 — Flat
No shadow. The warm dark canvas baseline. Most surfaces rest here.
Level 1 — Veil
Ultra-subtle white overlay (rgba(255,255,255,0.04)). Barely visible differentiation.
Level 2 — Border
Semi-transparent border (rgba(226,226,226,0.35)). Ghostly containment for cards.
Level 3 — Ambient
Subtle ambient shadow for floating elements. Used sparingly.