// Design System

The terminal,
reimagined.

Pure black canvas, electric cyan accents, monospace-first typography. A design system built for developers who live in the command line.

16 color tokens 10 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Pure black surfaces with electric cyan as the signature accent. 16 tokens across base surfaces, text, status indicators, and glows.

Void Black
#000000
Terminal background
Obsidian
#0a0a0a
Elevated panels
Carbon
#111111
Code blocks, inputs
Graphite
#1a1a1a
Borders, dividers
Slate
#2a2a2a
Inactive states
Terminal White
#ffffff
Primary text
Dim White
#b0b0b0
Secondary text
Muted Gray
#666666
Placeholders
Dark Gray
#333333
Borders
Electric Cyan
#00D4FF
Primary accent
Neon Green
#00ff88
Success, prompts
Amber
#ffb800
Warnings
Signal Red
#ff4040
Errors
Violet
#a78bfa
Decorative accents
Typography

Type Scale

Monospace-first. JetBrains Mono as primary terminal font, Inter for marketing chrome. 10 distinct steps.

Display The terminal, reimagined 48px / 1.1 / -0.02em
Heading-lg Ship faster 32px / 1.2 / -0.02px
Heading Section heading 24px / 1.3 / 0
Subheading Subsection text 18px / 1.4 / 0.01px
Body Default body text for readable content 16px / 1.5 / 0.01px
Terminal $ warp --version 2.0.0 14px / 1.5 / mono
Terminal-sm Dense terminal output 13px / 1.5 / mono
Caption Meta info // Labels 12px / 1.5 / mono

Fonts

Primary JetBrains Mono 400, 500, 700
Sans Inter 400, 500, 600, 700
Fallback SFMono-Regular / Menlo / Consolas
Layout

Spacing & Shapes

Base unit 4px. Compact density for information-rich terminal UI. 14-step spacing scale, 7 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sharp 0px
sm 4px
md 6px
lg 8px
xl / cards 12px
pill 9999px
Elevation

Surfaces

4 distinct surface levels. Borders over shadows — the terminal aesthetic is flat and precise.

Void Black #000000
Obsidian #0a0a0a
Carbon #111111
Graphite #1a1a1a

Terminal Block

warp ~ /projects/my-app
$ warp build --release --target "production"
// compiling 142 modules...
BUILD SUCCESS in 2.4s
$ warp deploy
WARN skipping cache (stale)
DEPLOYED https://my-app.warp.dev
_
Components

Button Variants

Electric Cyan primary, ghost secondary, and terminal-native tab switching. Minimal, precise, keyboard-friendly.

Primary Action Button
Main CTA — highest visual weight
.btn-primary
Electric Cyan (#00D4FF) background, Void Black text, 6px radius. Use for the single most important action.
Ghost Button
Secondary interactive actions
.btn-ghost
Electric Cyan text, Dark Gray border. Hover adds cyan glow background.
Secondary Button
Tertiary actions
.btn-secondary
Terminal White text, Dark Gray border. Subtle presence for less prominent actions.
Command Prompt
Terminal input line
.prompt-line
$ git status
~ npm run build
> warp ai |
Prompt symbol in Neon Green or Electric Cyan, command text in Terminal White, 14px JetBrains Mono.
Status Badges
Build state, connection status
.badge
PASSING PENDING FAILED CONNECTED
Uppercase, 10px weight 700, JetBrains Mono. Color maps to status semantics.
Input Field
Terminal search, text input
input
Carbon background, Graphite border, 8px radius. Focus state uses Electric Cyan border with cyan glow.
Guidelines

Do's & Don'ts

Do
  • Void Black (#000000) as primary background
  • Electric Cyan (#00D4FF) for active states and CTAs
  • Monospace for all terminal-facing content
  • Neon Green (#00ff88) for prompts and success
  • Compact spacing (12px gap) for density
  • 8px radius for terminal blocks, 6px for buttons
  • High contrast: white on black for primary text
Don't
  • Light backgrounds — the terminal is dark
  • Serif or decorative fonts in terminal contexts
  • Electric Cyan for large background fills
  • Low-contrast text (Dim White on Carbon)
  • Playful rounded shapes — keep it sharp
  • Mixing sans and mono in one terminal block
  • Heavy drop shadows — use borders or glows