Design System: Warp

1. Visual Theme & Atmosphere

Warp's website feels like sitting at a campfire in a deep forest warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either it's Warm Parchment (#faf9f6), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.

The typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool Matter has a softness and humanity that signals "this terminal is for everyone, not just greybeards." Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.

The overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.

Key Characteristics:

• 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
• Uppercase labels with wide letter-spacing (2.4px) for categorization editorial signaling
• Pill-shaped dark buttons (#353534, 50px radius) restrained, muted CTAs