---
name: Warp
description: "This site is a prime example of a modern, high-end developer tool that uses a dark mode to reduce eye strain while maintaining a premium, sophisticated brand identity."
version: alpha

colors:
  background: "#121212"
  primary: "#FFFFFF"
  secondary: "#C7AEFF"
  tertiary: "#C7AEFF"
  neutral: "#888888"
  bg-soft: "#1E1E1E"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.8px"
  h2:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1.12px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.25px"
  overline:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "2.8px"

rounded:
  sm: 3px
  md: 4px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A developer-first terminal and agent platform designed for high-velocity software teams.

*A modern, AI-native command line interface that bridges the gap between a traditional terminal and a collaborative development environment.*

## Colors

High-contrast dark mode with a signature purple accent to highlight active states and key data.

- **Background (`#121212`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#C7AEFF`)** — uses `ink-soft` token
- **Accent (`#C7AEFF`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospaced

- Use tight negative letter spacing for large display headlines
- Maintain generous line height (1.4-1.6) for dense body text
- Use monospaced fonts strictly for code snippets and commands

## Layout

Full-width dark hero sections followed by structured content grids.

*Rhythm:* Consistent 4px grid system with generous padding in large container layouts.

## Elevation & Depth

- 0px 8px 30px rgba(0, 0, 0, 0.4)
- 0px 1px 3px rgba(0, 0, 0, 0.1)
- Borders: Minimal, using thin 1px lines or inset box shadows to define edges.

## Shapes

- `sm`: 3px
- `md`: 4px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** High-contrast solid white buttons for primary actions, subtle border-only buttons for secondary actions, and rounded pill shapes.
- **card:** Dark-themed cards with subtle inset borders, often featuring interactive code or data visualizations.
- **chip:** Small, rounded tags for status indicators (Active, Failed, Archived) within the agent interface.
- **input:** Dark input fields with subtle borders, often accompanied by inline code or command actions.
- **hero:** Large, left-aligned typographic hero sections with a prominent code block or terminal screenshot below.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated background colors — screenshot shows deep, desaturated grays and blacks.
- Don't use decorative serif fonts for body text — screenshot shows clean humanist sans-serif for readability.
- Don't use heavy, solid block borders — screenshot shows subtle 1px lines or inset shadows for elevation.
- Don't use a wide, multi-column layout for primary headlines — screenshot shows tight, left-aligned typographic blocks.
- Don't use soft, pastel accent colors — screenshot shows high-chroma purple and stark white for emphasis.
- Don't use rounded, bubbly UI elements — screenshot shows sharp corners or very subtle border radii.

---

## System Prompt (paste into AI agent)

```
This site is a developer tools platform with a premium, dark-themed aesthetic. The design DNA is built on a deep black (#121212) and dark gray (#1E1E1E) palette, punctuated by a high-chroma purple accent (#C7AEFF). Typography relies on a clean humanist-sans for body text and a monospaced font for technical commands. The layout uses large, left-aligned headlines with tight letter-spacing to create impact. Critical donts: avoid bright background colors, use humanist-sans instead of decorative serifs, and maintain subtle elevation via shadows instead of heavy borders.
```