Warp

developer tools Color System

Color Philosophy

Warp's website feels like sitting at a campfire in a deep forest — warm, dark, and alive with quiet ...

Warp's website feels like sitting at a campfire in a deep forest — warm, dark, a...

Key Principles

Accent Color Strategy

Warp uses #faf9f6 as the primary accent for interactive elements

Color Palette

Carefully selected 8 colors for developer-tools applications

Design Techniques

Uses negative letter-spacing, gradient and more

Color Palette

Warm Parchment

#faf9f6

Primary text color — a barely-cream off-white that softens every surface

Earth Gray

#353534

Button backgrounds, dark interactive surfaces — warm, not cold

Stone Gray

#868584

Secondary text, muted descriptions — warm mid-gray

Ash Gray

#afaeac

Body text, button text — the workhorse reading color

Purple-Tint Gray

#666469

Link text with subtle purple undertone — underlined links in content

Frosted Veil

rgba(255, 255, 255, 0.04)

Ultra-subtle white overlay for surface differentiation

Translucent Parchment

rgba(250, 249, 246, 0.9)

Slightly transparent primary surface, allowing depth

Warm Parchment

#faf9f6

Headlines, high-emphasis text

CSS Implementation

CSS Variables

/* Warp Color System */
:root {
  --warp-warm-parchment: #faf9f6;
  --warp-earth-gray: #353534;
  --warp-stone-gray: #868584;
  --warp-ash-gray: #afaeac;
  --warp-purple-tint-gray: #666469;
  --warp-frosted-veil: rgba(255, 255, 255, 0.04);
  --warp-translucent-parchment: rgba(250, 249, 246, 0.9);
  --warp-warm-parchment: #faf9f6;
}

/* Example usage */
.warp-button-primary {
  background-color: var(--warp-warm-parchment);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 15px;
}

Related Companies

Cursor

Cursor's website is a study in warm minimalism meets code-editor elegance. The e...

Expo

Expo's interface is a luminous, confidence-radiating developer platform built on...

Linear App

Linear's website is a masterclass in dark-mode-first product design — a near-bla...

Lovable

Lovable's website radiates warmth through restraint. The entire page sits on a c...

/* Warp Color System */ :root { --warp-warm-parchment: #faf9f6; --warp-earth-gray: #353534; --warp-stone-gray: #868584; --warp-ash-gray: #afaeac; --warp-purple-tint-gray: #666469; --warp-frosted-veil: rgba(255, 255, 255, 0.04); --warp-translucent-parchment: rgba(250, 249, 246, 0.9); --warp-warm-parchment: #faf9f6; } /* Example usage */ .warp-button-primary { background-color: var(--warp-warm-parchment); color: #ffffff; border: none; border-radius: 8px; padding: 8px 15px; }