# Warp — Design System
> An agentic development environment built for the modern terminal.
- **Canonical:** https://uiuxskills.com/library/warp
- **Source:** https://www.warp.dev
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:48.352Z

---

---
version: alpha
name: Warp
description: An agentic development environment built for the modern terminal.
tone: >-
  Technical, authoritative, and forward-thinking. The tone is direct and focused on developer
  productivity.
color-scheme: dark
colors:
  primary: "#B6B6B6"
  secondary: "#B6B6B6"
  tertiary: "#D976E8"
  background: "#121212"
  surface: "#383838"
  surface-dim: "#1F1F1F"
  on-surface: "#FFFFFF"
  on-primary: "#121212"
  outline: "#636363"
  error: "#FF4D4D"
typography:
  display-lg:
    fontFamily: Matter
    fontSize: 64px
    fontWeight: 400
    letterSpacing: "-0.025em"
  display-md:
    fontFamily: Matter
    fontSize: 48px
  headline-lg:
    fontFamily: Matter
    fontSize: 30px
  headline-md:
    fontFamily: Inter
    fontSize: 24px
  headline-sm:
    fontFamily: Inter
    fontSize: 20px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.6"
  body-sm:
    fontFamily: Inter
    fontSize: 14px
  label-md:
    fontFamily: Inter
    fontSize: 14px
  label-sm:
    fontFamily: Inter
    fontSize: 12px
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.background}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface-dim}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.tertiary}"
  link:
    textColor: "{colors.tertiary}"
  link-hover:
    textColor: "#FFFFFF"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-medium: 200ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: none
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 8px 30px rgba(0,0,0,0.4)
---

## Overview

Warp presents a high-contrast, dark-mode-first aesthetic that feels technical, precise, and performant. It uses a sophisticated, monochromatic palette punctuated by subtle accent colors to emphasize its AI-driven capabilities and developer-focused utility.

## Colors

The color strategy relies on a deep, neutral foundation to minimize eye strain, using specific accent tokens to guide user attention toward interactive elements and AI features.

*   Primary (#B6B6B6): The core color for text and essential UI elements.
*   Secondary (#B6B6B6): Muted tone for secondary text and low-priority UI.
*   Tertiary (#D976E8): Strategic accent color reserved exclusively for AI-related actions and highlights.
*   Background (#121212): The foundational canvas for the entire interface.
*   Surface (#383838): Used for cards, panels, and elevated containers.
*   Surface-dim (inferred) (#1F1F1F): A deeper tone used to create subtle depth and separation.
*   On-surface (inferred) (#FFFFFF): High-contrast text color for readability on surfaces.
*   On-primary (inferred) (#121212): Dark text for use on primary-colored buttons.
*   Outline (#636363): The standard color for borders, dividers, and input fields.
*   Error (inferred) (#FF4D4D): Semantic color reserved for critical status indicators.

## Typography

Warp utilizes a dual-font system that pairs the geometric, technical feel of Matter for headings with the highly readable, professional Inter typeface for UI labels and body content.

*   Display-lg: Matter, 64px, used exclusively for primary hero headings.
*   Display-md (inferred): Matter, 48px, for secondary section titles.
*   Headline-md (inferred): Inter, 24px, for card titles and sub-sections.
*   Body-md: Inter, 16px, the standard for all paragraph and long-form content.
*   Label-md (inferred): Inter, 14px, the standard weight and size for button text.

## Layout

The layout is built on a centered container model with a max-width of 80rem, ensuring readability across large displays. A strict 16px base spacing rhythm governs vertical stacking and component gaps. The page follows a consistent flow: navigation, hero, social-proof, features, and footer. The hero section is defined by a centered headline and subhead, a primary CTA, and a high-fidelity product screenshot. On mobile, the navigation collapses into a drawer to maintain a clean, focused viewport.

## Elevation & Depth

Depth is conveyed through subtle color shifts between surfaces rather than heavy, multi-layered shadows. The elevation tokens define the hierarchy: {elevation.sm} is reserved for flat elements, {elevation.md} provides a light lift for interactive components, and {elevation.lg} is strictly reserved for hero assets and product imagery to create a sense of focus.

## Shapes

The brand utilizes a consistent, slightly rounded corner radius of 8px ({rounded.lg}) for most UI components. This choice balances technical precision with a modern, approachable aesthetic, avoiding overly aggressive curves while maintaining a polished, enterprise-ready look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {typography.label-md} for clear, legible labels. The primary button features a {colors.primary} background with {colors.on-primary} text, transitioning to a white background on hover. Use secondary buttons for lower-priority actions, utilizing a transparent background with a {colors.outline} border.

### Card
Cards utilize {colors.surface} as a background and {rounded.lg} for consistent corner geometry. They are intended for grouping related content and should maintain a clean, minimal appearance without heavy drop shadows.

### Input Field
Input fields use a {colors.surface-dim} background and {colors.outline} border. On focus, the border transitions to {colors.tertiary} to indicate active state and AI-readiness.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.tertiary} for AI-related CTAs | Use {colors.tertiary} for standard buttons |
| Apply {typography.display-lg} for hero headings | Mix {typography.display-lg} with body text |
| Use {rounded.lg} for all card components | Use {rounded.full} on content cards |
| Maintain {spacing.md} between sections | Use excessive whitespace between blocks |
| Use {colors.primary} for text on dark backgrounds | Use high-contrast shadows on UI cards |
| Ensure buttons use {typography.label-md} | Use {colors.error} for non-critical status |
| Use {elevation.lg} for hero imagery | Use {elevation.lg} on standard UI elements |
| Use {colors.surface-dim} for background depth | Use {colors.background} for card backgrounds |

## Content Style

CTA labels are direct and action-oriented, using concise verbs such as "Download" or "Explore." Keep button text short to maintain the minimalist UI.

Headings are benefit-driven and declarative, focusing on the speed and agentic capabilities of the platform. They should be scannable and clearly define the value proposition of the section.

Copy density is kept low, favoring short, scannable paragraphs and clear visual hierarchy. Use whitespace to separate ideas rather than dense text blocks.

## Imagery & Icons

Imagery consists of high-fidelity product screenshots treated with {elevation.lg} to create a sense of depth and focus. Partner branding is represented through clean, dark-themed SVG logos. The overall style is mixed, combining technical product interfaces with minimalist iconography to reinforce the developer-first brand identity.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Warp, a minimal enterprise developer tool with a technical, authoritative tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or raw font names.
2. Use only component variants listed under `components:`. Do not invent states or variants absent from the spec (e.g., no `button-destructive`, no `card-outlined`).
3. Reserve `{colors.tertiary}` exclusively for AI-related actions and input focus rings. Do not apply it to standard buttons, headings, or decorative elements.
4. Follow the Elevation & Depth narrative: `{elevation.lg}` applies only to hero imagery and product screenshots; use `{elevation.md}` for interactive lifts; keep UI cards flat.
5. Before generating, check the Do's and Don'ts table. If a user request conflicts with it, surface the conflict explicitly and wait for confirmation before proceeding.

## Output contract

**Must:**
- Use token names for every color, typographic scale, radius, spacing, and shadow value.
- Include hover, focus, and disabled states for any interactive component when the spec defines them (button-primary-hover, input-field-focus, link-hover).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{rounded.lg}` to cards, `{rounded.md}` to buttons and inputs, per the spec's shape narrative.
- Apply motion tokens `{motion.duration-medium}` and `{motion.easing-standard}` to all state transitions.
- Keep CTA copy concise and action-oriented per the Content Style section.

**Must NOT:**
- Invent colors, radii, font families, or elevation values outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a raw string) when a named token exists.
- Apply `{colors.tertiary}` to anything non-AI-related.
- Use `{rounded.full}` on content cards.
- Add emoji, filler text, or unsolicited marketing copy.
- Rewrite page copy, button labels, navigation items, or alter page structure as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask before inventing one.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, it overrides the spec.
- For ambiguous backgrounds, default to `{colors.surface-dim}` for depth layers and `{colors.surface}` for cards — never `{colors.background}` for card backgrounds.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px; collapse navigation into a drawer per the Layout section.
- When composing new UI, combine existing spec components before considering any new token.