Dark Mode

# 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.

### Primary

Warm Parchment
#faf9f6
Primary text
Earth Gray
#353534
Button backgrounds
Deep Void
#0e0e0d
Page background

### Neutrals & Text

Ash Gray
#afaeac
Body text
Stone Gray
#868584
Secondary text
Purple-Tint Gray
#666469
Link text

### Surface & Border

Frosted Veil
rgba(255,255,255,0.04)
Surface overlay
Mist Border
rgba(226,226,226,0.35)
Card borders
Frosted Button
rgba(255,255,255,0.16)
Tag backgrounds

## Typography Scale

Matter font family — geometric but approachable. Regular weight dominance.

Display Hero — 80px / 400 / 1.00 / -2.4px
The best terminal
Matter Regular (Inter fallback)
Section Display — 56px / 400 / 1.20 / -0.56px
Development environment
Matter Regular
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
Body — 18px / 400 / 1.30 / -0.18px
Built from the ground up in Rust for speed, with AI integrated at every level.
Matter Regular
Uppercase Label — 12px / 400 / 1.35 / 2.4px
Featured Integration
Matter Regular — editorial wide tracking
Code — 16px / 400 / 1.00
curl -fsSL https://warp.dev/install | bash
Geist Mono

## Button Variants

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

Download Warp Dark Pill
Learn More Border Pill
Frosted Tag
Ghost Underline

## Card Examples

Semi-transparent borders, warm dark surfaces, editorial tags.

Terminal

### Built in Rust

Blazingly fast terminal performance with native rendering and GPU acceleration.

AI Agent

### Agent Mode

Let AI agents handle complex terminal workflows while you focus on building.

Collaboration

### Shared Workflows

Share terminal sessions, commands, and configurations with your team.

## Form Elements

Warm dark inputs with subtle borders. No colored focus rings.

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

## Spacing Scale

8px base unit with editorial-grade spacing.

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

## Border Radius Scale

From small tags to full pill CTAs.

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

## Elevation & Depth

Remarkably flat — depth through borders and photography.

Level 0 — Flat
No shadow. The warm dark canvas baseline.
Level 1 — Veil
Ultra-subtle white overlay.
Level 2 — Border
Semi-transparent border containment.
Level 3 — Ambient
Subtle shadow for floating elements.