developer tools Color System
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...
Warp uses #faf9f6 as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses negative letter-spacing, gradient and more
#faf9f6
Primary text color — a barely-cream off-white that softens every surface
#353534
Button backgrounds, dark interactive surfaces — warm, not cold
#868584
Secondary text, muted descriptions — warm mid-gray
#afaeac
Body text, button text — the workhorse reading color
#666469
Link text with subtle purple undertone — underlined links in content
rgba(255, 255, 255, 0.04)
Ultra-subtle white overlay for surface differentiation
rgba(250, 249, 246, 0.9)
Slightly transparent primary surface, allowing depth
#faf9f6
Headlines, high-emphasis text
/* 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;
}Cursor's website is a study in warm minimalism meets code-editor elegance. The e...
Expo's interface is a luminous, confidence-radiating developer platform built on...
Linear's website is a masterclass in dark-mode-first product design — a near-bla...
Lovable's website radiates warmth through restraint. The entire page sits on a c...