Warp

Difficulty:
Company
Warp Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Matter

  • Ag

    Body 16px · regular

    Matter

  • Ag

    Labels 13px · medium

    Matter

Warp is the open platform for automating development, bringing agents across the whole SDLC. Its terminal aesthetic is deliberately warm: an earthy near-black with warm gray undertones, parchment (#faf9f6) text instead of pure white, the geometric-but-approachable Matter typeface avoiding typical dev-tool coldness, nature photography interleaved with product shots, and an almost monochromatic warm-gray palette with no bold accents.

DeveloperBold

Prompt Template

Base Template
Design a Warp-inspired interface. - Warm dark background — not cold black, but earthy near-black with warm gray undertones; - Warm Parchment (#faf9f6) text instead of pure white — subtle cream warmth; - Matter font family (Regular weight) — geometric but approachable, not the typical developer-tool typeface; - Nature photography interleaved with product screenshots — lifestyle meets developer tool; - Almost monochromatic warm gray palette — no bold accent colors. Colors: #faf9f6, #353534, #868584, #afaeac.

Variant Prompts

📱 Mobile
Design a mobile app with Warp aesthetics. Use Warp color identity with #faf9f6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Warp style. Use Warp color identity with #faf9f6 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Warp design language. Use Warp color identity with #faf9f6 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Warp visual identity. Use Warp color identity with #faf9f6 accents. Compelling, conversion-focused.

Usage Examples

Warp App

Web
Build a web app with Warp design language and brand color system.

Warp Dashboard

Dashboard
Create a dashboard using Warp style with data visualization and modern typography.

✅ Best For

  • Developer
  • Terminals and command-line tools
  • Developer productivity tool sites

❌ Avoid For

  • Mass-market retail e-commerce
  • Bright playful education products

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download