---
name: warp-design
description: "This skill should be used when the user explicitly says 'Warp style', 'Warp design', '/warp-design', or directly asks to use/apply the Warp design system. NEVER trigger automatically for generic UI or design tasks."
version: 1.0.0
allowed-tools: [Read, Write, Edit, Glob, Grep]
---

# warp-design

You are a senior product designer. When this skill is active, every UI decision follows this design language.

**Before starting any design work, declare which fonts are required and how to load them** (see `references/platform-mapping.md`). Never assume fonts are already available.

---

## 1. DESIGN PHILOSOPHY

Warm darkness as a design decision. Most dev tools pick clinical cool-gray — Warp chose olive-tinted warmth in everything: the background (#0a0907) has warm undertones, text (#f8f5ee) is warm off-white, borders (#464541) are warm gray. This warmth at low intensity creates a feeling of material depth — like a well-worn notebook rather than a cold screen.

The accent system is maximally restrained. The "primary accent" is a muted warm gray (#a5a39d) — functionally neutral, visually unpretentious. Color appears as a precise event: lavender (#cbb0f7) arrives as a single moment of warmth-to-violet contrast. Terminal theme colors (green, purple, red, amber) belong to the product, not the marketing shell.

Typography pairs Instrument Serif italic for editorial hero moments with Inter for all functional UI. The serif says "crafted"; the sans says "precise". DM Mono handles terminal output and code — where mechanical rhythm is part of the meaning.

The primary tension: **artisanal warmth vs. technical precision**. A terminal tool that doesn't feel like one.

---

## 2. CRAFT RULES — HOW TO COMPOSE

### Rule 1: Warmth is structural, not decorative
Every neutral must carry a warm olive undertone. Never reach for pure black (#000), pure gray (#888), or cool gray (#8892A0). The warmth is in the _temperature_ of the neutral, not in added color.

| Surface | Token | Hex |
|---------|-------|-----|
| Canvas | `--background` | `#0a0907` |
| Card | `--surface1` | `#1b1a18` |
| Panel | `--surface2` | `#2c2b29` |
| Inset | `--surface3` | `#464541` |
| Primary text | `--text1` | `#f8f5ee` |

### Rule 2: The inverted CTA is non-negotiable
The primary button is warm white on dark background — not a colorful button. `background: #f8f5ee; color: #0a0907`. This is the signature interaction. Hover dims slightly (opacity: 0.85). Never change the CTA to a colored button.

### Rule 3: Borders breathe at 40%
Card borders use the border color at 40% opacity (`rgba(70,69,65,0.4)`), not full opacity. Full opacity is reserved for `--border-visible` — inputs with focus, active states, dropdown rings. The 40% creates depth without weight.

### Rule 4: Large radii, generous spacing
Cards use 20px radius for hero/feature cards, 16px for standard containers. The pill (999px) dominates small interactive elements — nav bar, tags, small toggles. Spacing is section-based: internal card padding 24px, outer section gap 64px. Never go below 16px card padding.

### Rule 5: Glassmorphism for card headers only
The glassmorphism treatment (`background: rgba(27,26,24,0.6); backdrop-filter: blur(8px)`) belongs on card _headers_ — the meta/label area above the card's main content. It signals "this is UI chrome, not content." Don't apply it to the card body, the page background, or buttons.

### Rule 6: Lavender arrives once per screen
The vivid lavender (#cbb0f7) should appear at most once or twice per screen — as a hover glow, a special CTA accent, a gradient highlight. When it arrives, it carries weight because it's rare. Using it for multiple elements destroys the signal value.

### Rule 7: Mono font for code only
DM Mono is strictly for terminal output, code blocks, file paths, shell commands, and command-line arguments. All numeric values (pricing, counts, stats, metrics on the marketing site) use Inter. Don't confuse "dev tool" with "everything should be mono."

---

## 3. ANTI-PATTERNS — WHAT TO NEVER DO

**No cool-gray neutrals.** #888888, #666666, #9ca3af — all wrong. The neutrals must carry warmth. When in doubt, add a tiny amount of yellow or orange to your grays.

**No pure black backgrounds.** #000000 is not Warp's dark. The correct background is #0a0907. The difference is subtle but critical — pure black feels digital; #0a0907 feels material.

**No colored primary buttons.** The primary CTA is inverted (warm white), not blue, green, or lavender. Color buttons signal secondary or destructive actions — not primary.

**No thin card borders.** Don't try to reduce border opacity below 30% to be more "minimal." Below 30%, the border disappears on dark backgrounds and the card loses its container definition.

**No backdrop blur on the entire card.** Glassmorphism is for card headers, nav bars, and floating panels — not for full card backgrounds. Full-card backdrop-blur creates visual noise.

**No flat nav header.** The nav pill must use `backdrop-blur` and slight transparency. A solid nav bar reads as a bar chart, not a floating control.

**No neon or vivid accent colors.** The terminal themes (green, purple, red) are product content. They belong inside the terminal window, not in the marketing UI chrome.

**No tight spacing on feature cards.** Feature cards need minimum 20px padding on the body, 16px on the header. Cramped cards break the "crafted" feeling.

**No full-opacity frosted pills.** Tag pills use `bg-white/20 backdrop-blur-sm` — 20% opacity. Increasing this to 50%+ loses the translucent quality.

**No serif in UI components.** Instrument Serif is display-only: hero headlines, pull quotes, editorial section openers. Never use it for buttons, labels, nav items, or data.

**No motion bounce.** Warp uses `ease-in-out` with 100-200ms durations. No spring, no overshoot, no elastic. The motion is precise, not playful.

**No drop shadows on buttons.** Buttons use no shadow — they rely on the inverted contrast. Adding a shadow makes them look like Web 2.0 relics.

---

## 4. WORKFLOW

1. **Declare fonts** — check `references/platform-mapping.md` for Google Fonts loading
2. **Set tokens** — apply CSS custom properties from `references/tokens.md`
3. **Establish the warm dark canvas** — `background: var(--background)` = #0a0907
4. **Build components** — use specs from `references/components.md`
5. **Check warmth** — squint and ask: does everything have warm undertones? Any cool grays snuck in?
6. **Check the accent** — lavender appears at most 1-2 times per screen. Is it special or repeated?
7. **Verify mono discipline** — only code/terminal content uses DM Mono. Everything else is Inter.
8. **Test dark (primary)** — the main mode is dark. Check it first.
9. **Test light (derived)** — run the light mode; it should feel like the same warmth, inverted.

---

## 5. REFERENCE FILES

| File | Contains |
|------|----------|
| `references/tokens.md` | Fonts, type scale, color system (dark primary + light derived), spacing, radii, elevation, motion, iconography |
| `references/components.md` | Cards, buttons (inverted CTA), inputs, nav pill, tags, overlays, terminal-specific patterns |
| `references/platform-mapping.md` | HTML/CSS custom properties, SwiftUI extensions, React/Tailwind config |