Warp

Warp operates in a deep charcoal universe: near-black canvas (#121212) layered with subtly lighter surfaces (#1e1e1d, #353534) and no shadows — elevation is communicated entirely through background-color steps. The primary typeface, Matter, does all the expressive heavy lifting: tight negative tracking at display sizes (-0.04em at 56-64px) whispers confidence rather than shouting, and the custom OpenType features (cv03, cv04, cv09, cv11) give it a precision-engineered feel that generic sans-serifs lack. Color is almost entirely absent — the one chromatic exception, a muted sage-green (#799c92), surfaces exclusively as an accent on section subheadings, making it feel like a terminal prompt color that escaped into the UI. The terminal product screenshot is the hero; the interface reproduces itself as marketing material, blurring the line between product and page. Use #121212 as the default page canvas — every section that lacks a specific override inherits this base. Apply Terminal Sage (#799c92) only to eyebrow/subheading text above section titles — never as a button color, background, or decoration. Set display headings (48px+) in Matter weight 400 with letter-spacing -0.03em to -0.04em — the negative tracking at these sizes is mandatory, not optional. Step surfaces upward using background color only: #121212 → #1e1e1d → #353534. Never use borders or shadows to separate co-planar sections. Use border-radius 16px for all feature cards, 4px for all rectangular buttons, and 50px for pill/circular controls — these three radii cover 90% of UI components. Render all terminal commands and code samples in Geist Mono 400 16px on #353534 backgrounds with #e3e2e0 text. Keep the white (#ffffff) download button exclusive to primary navigation CTAs — it is the sole maximum-contrast element and dilutes if reused. Never introduce additional chromatic colors beyond Terminal Sage (#799c92) — the system is intentionally near-monochrome and a second hue breaks the terminal-inspired restraint. Do not use box shadows or drop shadows on cards or sections — depth is communicated through surface color steps, not elevation effects. Avoid font weights above 600 for Matter — the type system lives in the 400-600 range; heavier weights create visual noise against the dark canvas. Do not use border-radius above 20px on cards and never apply round corners (50px+) to rectangular content containers — pill radius is reserved for icon-button controls only. Never place light (#faf9f6 or #ffffff) backgrounds behind full sections as a design choice — light backgrounds appear only on the nav bar on scroll and the primary download button fill. Do not add decorative gradients, glows, or colored backgrounds to content sections — the aurora photography in the hero is the only atmospheric color; UI components stay achromatic. Avoid setting body or paragraph text above 18px — Matter at 16px is the comfortable reading size; larger body text breaks the dense, information-forward density of the layout.