dark · minimal · sans · mono · dense · structured · cool
Warp
Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell.
By webdesignhot · www.warp.dev
$ npx design-md add warp-dev
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#121212 - bg-100
#1a1a1a - bg-200
#222222 - bg-300
#2c2c2c - bg-400
#363636 - surface-terminal
#0e0e0e - surface-card
#1a1a1a - surface-banner
#f5f5f5 - text AAA · 18.7
#ffffff - text-200
#cccccc - text-300
#999999 - text-400
#666666 - text-500
#444444 - text-banner
#0a0a0a - brand AAA · 15.7
#c2ff00 - brand-soft
#7a9e1f - brand-glow
rgba(194,255,0,0.20) - on-brand
#121212 - cta-bg
#ffffff - cta-text
#000000 - cta-bg-hover
#f5f5f5 - link
#7eb8ff - link-hover
#a3cdff - border — · 1.3
#2a2a2a - border-soft
rgba(255,255,255,0.06) - border-strong — · 1.4
rgba(255,255,255,0.12) - terminal-cursor
#c2ff00 - terminal-prompt
#a78bfa - terminal-success
#86efac - terminal-error
#fca5a5 - terminal-warning
#fde047 - semantic-success
#86efac - semantic-warning
#fde047 - semantic-danger
#fca5a5 - semantic-info
#7eb8ff
Ship faster than ever.
display-hero Inter 96px w500 -0.025em
Ship faster than ever.
display-large Inter 72px w500 -0.02em
Ship faster than ever.
h1 Inter 56px w500 -0.015em
Built for teams that ship.
h2 Inter 40px w500 -0.01em
A complete kit
h3 Inter 28px w500 -0.005em
The quick brown fox jumps over the lazy dog.
h4 Inter 22px w500 0
The quick brown fox jumps over the lazy dog.
body-large Inter 18px w400 0
The quick brown fox jumps over the lazy dog.
body Inter 16px w400 0
The quick brown fox jumps over the lazy dog.
button-large Inter 16px w500 0
The quick brown fox jumps over the lazy dog.
button Inter 15px w500 0
The quick brown fox jumps over the lazy dog.
body-small Inter 14px w400 0
The quick brown fox jumps over the lazy dog.
nav-link Inter 14px w500 0
The quick brown fox jumps over the lazy dog.
terminal-cmd "Hack" 14px w400 0
OUR DESIGN SYSTEM
caption Inter 13px w400 0
npx design-md add linear
code "Hack" 13px w400 0
npx design-md add linear
code-prompt "Hack" 13px w500 0
OUR DESIGN SYSTEM
label Inter 12px w500 0.04em
OUR DESIGN SYSTEM
label-mono "Hack" 12px w500 0.04em
The quick brown fox jumps over the lazy dog.
micro Inter 11px w500 0.03em
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 24px
- step-5 32px
- step-6 48px
- step-7 64px
- step-8 96px
- step-9 128px
- step-10 160px
- none
0px - micro
2px - xs
4px - sm
7px - md
8px - lg
12px - card
12px - terminal
12px - xl
16px - xxl
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Warp's web design is the visual continuation of the terminal product — every page reads like a CLI session that grew a marketing layer. The canvas sits at `#121212`, a touch lighter than Linear's `#08090a` and Raycast's `#07080a`, deliberately close to the macOS Terminal default background. Display type is Inter at 500–600, sized 72–96px on the hero "Warp is the agentic development environment" — the unusually open line-height (1.0–1.05) and the centered alignment make the page feel like a man-page title rather than a SaaS pitch. The brand chromatic accent is a neon-lime (`#c2ff00`) that lives almost entirely *inside* the product screenshots — the terminal's cursor and command markers — so the marketing surface itself stays monochrome white-on-black, and the color enters only when you're seeing real software. The download CTA inverts the conventional dark-site logic: instead of a tinted accent button, Warp ships a pure-white pill with black text at 7px radius, the same affordance Apple uses for "Download macOS" buttons. That single move is what makes the site feel like a system app rather than a SaaS. The surface ladder (`#121212` → `#1a1a1a` → `#0e0e0e` for terminal screenshots) is a deliberate inversion: the terminal screenshot reads *deeper* than the card it sits on, like a window cut into the page. Mono is `Hack`, an open-source terminal-grade family — used only inside terminal screenshots, never on marketing chrome.
- Pioneered the near-black dark-mode marketing canvas with Inter as display for dev tools
- The white-pill download button on dark is lifted directly from Apple's system-software pages — pure-white with black text, modest radius
- Confidence in oversized Inter display with tight tracking and dense data-heavy panels below
- Open-source terminal-grade mono used inside the actual product screenshots — equalised stem widths for code legibility
- macOS Terminal default themeThe `#121212` canvas value, the lime cursor placement, the macOS-style traffic-light terminal chrome — all lifted from the system terminal
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: Warp
tagline: Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell.
author: webdesignhot
source_url: https://www.warp.dev
spec: design.md/v1.5
quality: curated
featured: false
categories: [dev-tools, ai]
tags: [dark, minimal, sans, mono, dense, structured, cool]
preview_swatch: ['#121212', '#c2ff00', '#ffffff']
related: [raycast, vercel, anthropic]
description: 'Warp''s marketing site mirrors the terminal it sells — a near-black `#121212` canvas, Inter at 500 for an oversized 72px hero "Warp is the agentic development environment", and white-pill download CTAs that read like macOS app actions. Real screenshots of the agent terminal carry a neon-lime cursor accent rather than the marketing surface itself, so the page feels like documentation that happens to convert.'
colors:
bg: '#121212' # body backdrop, observed as rgb(18,18,18) — matches macOS Terminal default
bg-100: '#1a1a1a' # elevated panel base — first tier card
bg-200: '#222222' # input fields, terminal chrome strip
bg-300: '#2c2c2c' # popover / hover state
bg-400: '#363636' # rarely used, deepest elevated
surface-terminal: '#0e0e0e' # the actual terminal screenshot bg, deeper than the page
surface-card: '#1a1a1a' # primary card surface
surface-banner: '#f5f5f5' # announcement banner light strip above hero
text: '#ffffff' # primary copy on dark
text-200: '#cccccc' # secondary copy
text-300: '#999999' # captions, "Trusted by" labels (rgba 255,255,255,0.6)
text-400: '#666666' # disabled / metadata
text-500: '#444444' # faintest
text-banner: '#0a0a0a' # text on light banner strip
brand: '#c2ff00' # neon-lime accent (terminal cursor / highlight)
brand-soft: '#7a9e1f' # darker lime for hover states inside terminal
brand-glow: 'rgba(194,255,0,0.20)' # lime glow halo around cursor
on-brand: '#121212' # ink on lime
cta-bg: '#ffffff' # primary "Download for Mac" button bg
cta-text: '#000000' # primary CTA text
cta-bg-hover: '#f5f5f5' # subtle off-white on hover
link: '#7eb8ff' # in-copy link hue (cool blue)
link-hover: '#a3cdff' # lighter blue on hover
border: '#2a2a2a' # desaturated divider, never pure grey
border-soft: 'rgba(255,255,255,0.06)' # softer hairline
border-strong: 'rgba(255,255,255,0.12)' # hover/focus outline
terminal-cursor: '#c2ff00' # the actual lime cursor inside terminal screenshots
terminal-prompt: '#a78bfa' # purple command marker / prompt
terminal-success: '#86efac' # green output text
terminal-error: '#fca5a5' # red error text
terminal-warning: '#fde047' # yellow warning
semantic-success: '#86efac'
semantic-warning: '#fde047'
semantic-danger: '#fca5a5'
semantic-info: '#7eb8ff'
typography:
display:
family: 'Inter, "Inter Placeholder", -apple-system, "system-ui", sans-serif'
weights: [400, 500, 600, 700]
opentype: ['kern', 'liga', 'calt']
body:
family: 'Inter, "Inter Placeholder", -apple-system, "system-ui", sans-serif'
weights: [400, 500]
opentype: ['kern', 'liga', 'calt']
mono:
family: '"Hack", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Monaco, Courier, monospace'
weights: [400, 500, 700]
opentype: ['kern', 'tnum', 'zero']
scale:
display-hero: { size: 96, weight: 500, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: 'kern, calt' }
display-large: { size: 72, weight: 500, lineHeight: 1.05, tracking: '-0.02em', family: display, opentype: 'kern, calt' }
h1: { size: 56, weight: 500, lineHeight: 1.1, tracking: '-0.015em', family: display, opentype: 'kern, calt' }
h2: { size: 40, weight: 500, lineHeight: 1.15, tracking: '-0.01em', family: display, opentype: 'kern, calt' }
h3: { size: 28, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display, opentype: 'kern, calt' }
h4: { size: 22, weight: 500, lineHeight: 1.3, tracking: '0', family: display, opentype: 'kern, calt' }
body-large: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body, opentype: 'kern, calt' }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body, opentype: 'kern, calt' }
body-small: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: body, opentype: 'kern, calt' }
button: { size: 15, weight: 500, lineHeight: 1.0, tracking: '0', family: body, opentype: 'kern, calt' }
button-large: { size: 16, weight: 500, lineHeight: 1.0, tracking: '0', family: body, opentype: 'kern, calt' }
nav-link: { size: 14, weight: 500, lineHeight: 1.4, tracking: '0', family: body, opentype: 'kern, calt' }
label: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: body, transform: 'uppercase' }
label-mono: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: mono, transform: 'uppercase' }
caption: { size: 13, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
micro: { size: 11, weight: 500, lineHeight: 1.3, tracking: '0.03em', family: body }
code: { size: 13, weight: 400, lineHeight: 1.55, tracking: '0', family: mono, opentype: 'tnum, zero' }
code-prompt: { size: 13, weight: 500, lineHeight: 1.55, tracking: '0', family: mono }
terminal-cmd: { size: 14, weight: 400, lineHeight: 1.4, tracking: '0', family: mono }
radius:
none: 0
micro: 2
xs: 4
sm: 7 # primary CTA radius (observed)
md: 8
lg: 12
xl: 16
xxl: 24
card: 12
terminal: 12 # terminal screenshot frame matches macOS window chrome
pill: 9999
spacing:
base: 4
xxs: 2
xs: 4
sm: 8
md: 12
lg: 16
xl: 24
xxl: 32
section-sm: 64
section: 96
section-lg: 128
scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160]
layout:
page-width: 1200
prose-width: 720
header-height: 64
hero-height: 720
grid-gap: 24
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
ease-terminal: 'steps(1, end)' # terminal-style instant transitions
duration-fast: 100
duration-standard: 180
duration-slow: 320
duration-cursor-blink: 1000 # the lime cursor inside terminal screenshots
reduced-motion: 'respects prefers-reduced-motion: reduce — cursor blink stops; transforms collapse to opacity'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'rgba(0,0,0,0.30) 0 1px 2px'
standard: 'rgba(0,0,0,0.40) 0 4px 12px'
elevated: 'rgba(0,0,0,0.60) 0 12px 32px'
deep: 'rgba(0,0,0,0.80) 0 24px 48px'
ring: '0 0 0 2px #c2ff00'
cta-glow: '0 0 0 4px rgba(255,255,255,0.10)'
terminal-glow: '0 0 24px rgba(194,255,0,0.10)'
accessibility:
contrast-text-on-bg: 18.5 # white on #121212 — AAA
contrast-soft-on-bg: 9.4 # #cccccc on #121212 — AAA
contrast-muted-on-bg: 6.0 # #999999 on #121212 — AA at body, AAA at large
contrast-text-on-cta: 21.0 # black on white — AAA
contrast-link-on-bg: 7.6 # #7eb8ff on #121212 — AAA at body
focus-ring: '2px solid #c2ff00 with 2px offset on dark canvas'
reduced-motion-honored: true
keyboard-nav: 'tab order follows visual; skip-link present; download platform selector arrow-keys'
components:
button-primary:
background: '#ffffff'
text: '#000000'
radius: 7
padding: '10px 18px'
height: 40
font: button-large
hover: 'background #f5f5f5'
active: 'background #ebebeb'
use: 'primary CTA — Download for Mac, white-pill the page''s most chromatic moment'
button-secondary:
background: 'transparent'
text: '#ffffff'
border: '1px solid #2a2a2a'
radius: 7
padding: '10px 18px'
height: 40
font: button-large
hover: 'background #1a1a1a; border rgba(255,255,255,0.16)'
use: 'secondary action — View Docs / Read More'
button-ghost:
background: 'transparent'
text: '#cccccc'
radius: 7
padding: '8px 14px'
font: button
hover: 'text #ffffff'
use: 'tertiary text-link CTA / nav button'
button-platform:
background: '#1a1a1a'
text: '#ffffff'
border: '1px solid #2a2a2a'
radius: 7
padding: '10px 16px'
font: button
hover: 'background #222222'
use: 'platform selector — Mac / Linux / Windows toggle'
card-feature:
background: '#1a1a1a'
text: '#ffffff'
border: '1px solid #2a2a2a'
radius: 12
padding: '32px'
use: 'feature card — bg-100 above canvas, no shadow'
card-product-row:
background: '#1a1a1a'
text: '#ffffff'
border: '1px solid #2a2a2a'
radius: 12
padding: '40px'
use: 'horizontal product-row card — feature copy left, screenshot right'
card-pricing:
background: '#1a1a1a'
text: '#ffffff'
border: '1px solid #2a2a2a'
radius: 12
padding: '32px'
use: 'pricing tier card'
terminal-screenshot:
background: '#0e0e0e'
text: '#ffffff'
border: '1px solid #1a1a1a'
radius: 12
padding: 0
use: 'real terminal screenshot — deeper than canvas, with macOS traffic-light chrome'
terminal-chrome:
background: '#222222'
text: '#cccccc'
radius: '12 12 0 0'
height: 28
use: 'macOS-style terminal title bar with traffic-light buttons'
input:
background: '#1a1a1a'
text: '#ffffff'
border: '1px solid #2a2a2a'
radius: 7
padding: '10px 14px'
height: 40
font: body
focus: 'border #c2ff00; ring 0 0 0 2px rgba(194,255,0,0.20)'
use: 'email / form input'
badge-pill:
background: '#1a1a1a'
text: '#cccccc'
border: '1px solid #2a2a2a'
radius: 9999
padding: '4px 12px'
font: micro
use: 'NEW / category badge'
badge-lime:
background: 'rgba(194,255,0,0.10)'
text: '#c2ff00'
border: '1px solid rgba(194,255,0,0.20)'
radius: 9999
padding: '4px 12px'
font: micro
use: 'feature badge — lime tint, sparingly used'
announcement-banner:
background: '#f5f5f5'
text: '#0a0a0a'
radius: 0
padding: '8px 16px'
font: caption
use: 'top-of-page announcement strip — light on dark, single moment of bright contrast'
nav-link:
background: 'transparent'
text: '#cccccc'
font: nav-link
padding: '8px 14px'
hover: 'text #ffffff'
use: 'top nav menu — Product / Pricing / Docs / Blog / Sign In'
logo-cloud-item:
background: 'transparent'
opacity: 0.6
use: 'customer logo — desaturated, low opacity, hover lifts to 1.0'
dark-mode: optional
lineage:
summary: |
Warp's web design is the visual continuation of the terminal product —
every page reads like a CLI session that grew a marketing layer. The
canvas sits at `#121212`, a touch lighter than Linear's `#08090a` and
Raycast's `#07080a`, deliberately close to the macOS Terminal default
background. Display type is Inter at 500–600, sized 72–96px on the
hero "Warp is the agentic development environment" — the unusually
open line-height (1.0–1.05) and the centered alignment make the page
feel like a man-page title rather than a SaaS pitch. The brand
chromatic accent is a neon-lime (`#c2ff00`) that lives almost
entirely *inside* the product screenshots — the terminal's cursor
and command markers — so the marketing surface itself stays
monochrome white-on-black, and the color enters only when you're
seeing real software. The download CTA inverts the conventional
dark-site logic: instead of a tinted accent button, Warp ships a
pure-white pill with black text at 7px radius, the same affordance
Apple uses for "Download macOS" buttons. That single move is what
makes the site feel like a system app rather than a SaaS. The
surface ladder (`#121212` → `#1a1a1a` → `#0e0e0e` for terminal
screenshots) is a deliberate inversion: the terminal screenshot
reads *deeper* than the card it sits on, like a window cut into the
page. Mono is `Hack`, an open-source terminal-grade family — used
only inside terminal screenshots, never on marketing chrome.
influences:
- name: 'Linear'
role: 'Pioneered the near-black dark-mode marketing canvas with Inter as display for dev tools'
url: 'https://linear.app'
- name: 'Apple (macOS download pages)'
role: 'The white-pill download button on dark is lifted directly from Apple''s system-software pages — pure-white with black text, modest radius'
url: 'https://www.apple.com/macos/'
- name: 'Vercel'
role: 'Confidence in oversized Inter display with tight tracking and dense data-heavy panels below'
url: 'https://vercel.com'
- name: 'Hack font'
role: 'Open-source terminal-grade mono used inside the actual product screenshots — equalised stem widths for code legibility'
url: 'https://sourcefoundry.org/hack/'
- name: 'macOS Terminal default theme'
role: 'The `#121212` canvas value, the lime cursor placement, the macOS-style traffic-light terminal chrome — all lifted from the system terminal'
---
## 1. Visual Theme & Atmosphere
Warp's marketing site is a terminal that learned to convert. The canvas sits at `#121212` — a touch lighter than Linear (`#08090a`) or Raycast (`#07080a`), matching the macOS Terminal default — and the hero "Warp is the agentic development environment" sets at 72–96px Inter 500 with white on black, centered. The download CTA is a pure-white pill with black text at 7px radius, the same affordance Apple uses for system-software downloads.
Color enters the page almost exclusively through real product screenshots: the agent terminal's cursor flashes a neon-lime (`#c2ff00`) and its command markers glow purple (`#a78bfa`), but the marketing surface itself stays monochrome. The page reads like documentation that happens to ship a "Download for Mac" button — and that's exactly the register Warp wants. It's selling a serious developer tool, and the visual surface earns trust through restraint, not chromatic flourish.
Below the hero, sections follow a clear rhythm — hero, product-row card pair (feature left, screenshot right), logo cloud, feature stack, FAQ. The dark canvas runs edge-to-edge without breaking into light bands. Real product screenshots sit on `#1a1a1a` cards (`bg-100`) and carry their own internal `#0e0e0e` background — deeper than the page, deeper than the card. That **deepest-thing-in-the-stack-is-the-screenshot** inversion is what makes the screenshot feel like a window cut into the page rather than something pasted on top.
The signature visual moment is the **product-row card**: a horizontal pair of feature description (left) and terminal screenshot (right), with the screenshot's lime cursor as the only saturated color in view. That card pattern repeats 4–6 times down the page, each row demonstrating a different agent capability. The result is that the page reads like a series of capability proofs, not a marketing pitch.
The announcement banner above the hero ("Warp is now open-source", "Warp 2.0: AI Agents") is the single moment of bright contrast — a `#f5f5f5` light strip with `#0a0a0a` text, sitting above the dark hero. That single 32px-tall light band is what signals "important news"; it's gone elsewhere on the page.
**Key Characteristics:**
- Near-black `#121212` canvas — matches macOS Terminal default exactly.
- Three-tier surface ladder: page (`#121212`) → card (`#1a1a1a`) → terminal screenshot (`#0e0e0e`) — terminal is *deeper* than card.
- Inter 500 display at 72–96px — medium-not-bold weight, the engineered hero voice.
- Pure white pill download CTA at 7px radius — the page's most chromatic moment.
- Neon-lime (`#c2ff00`) lives only inside terminal screenshots — never on marketing chrome.
- Real product screenshots, not mockups — the agent terminal renders authentic output.
- Hack mono inside screenshots; Inter on marketing surface.
- Light announcement banner (`#f5f5f5`) above hero — the only bright contrast moment.
- Centered hero alignment — like a man-page title, not a left-aligned SaaS pitch.
- Border `#2a2a2a` — desaturated, never pure grey, the depth-without-shadow tool.
## 2. Color Palette & Roles
### Primary
- **Background** (`#121212`): canvas — body backdrop, all surfaces lift from this. Matches macOS Terminal default.
- **Text** (`#ffffff`): primary copy on dark — pure white, no off-white calibration.
- **Brand** (`#c2ff00`): neon-lime accent — lives almost entirely inside terminal screenshots.
- **CTA Background** (`#ffffff`): primary download button — pure white pill on dark canvas.
### Brand & Dark
Three-tier surface ladder for elevation:
- **bg** (`#121212`): canvas.
- **bg-100** (`#1a1a1a`): elevated panel base — cards, product-row containers.
- **bg-200** (`#222222`): input fields, terminal chrome strip (the macOS-style title bar).
- **bg-300** (`#2c2c2c`): popover / hover state.
- **bg-400** (`#363636`): rarely used.
- **surface-terminal** (`#0e0e0e`): the actual terminal screenshot bg — *deeper* than the canvas, the deliberate inversion.
### Accent (Inside Terminal Screenshots Only)
These hues live inside the agent terminal's command output — never on the marketing chrome:
- **Terminal Cursor** (`#c2ff00`): the neon-lime cursor — the brand's signature accent.
- **Terminal Prompt** (`#a78bfa`): purple command marker / agent prompt.
- **Terminal Success** (`#86efac`): green output text for successful runs.
- **Terminal Error** (`#fca5a5`): red error text.
- **Terminal Warning** (`#fde047`): yellow warning.
### Interactive
- **Link** (`#7eb8ff`): cool blue inline link — used sparingly in body copy.
- **Link Hover** (`#a3cdff`): lighter blue on hover.
- **CTA BG** (`#ffffff`): primary download pill.
- **CTA Text** (`#000000`): pure black on white.
- **CTA BG Hover** (`#f5f5f5`): subtle off-white on hover.
### Neutral Scale
- **Text** (`#ffffff`): primary copy.
- **Text 200** (`#cccccc`): secondary copy.
- **Text 300** (`#999999`): captions, "Trusted by industry leaders" label hue (rgba 255,255,255,0.6).
- **Text 400** (`#666666`): disabled / metadata.
- **Text 500** (`#444444`): faintest, rarely used.
### Surface & Borders
- **Surface Card** (`#1a1a1a`): primary card surface (same as bg-100, named for component-level use).
- **Surface Banner** (`#f5f5f5`): light announcement strip above hero — the only light surface on the page.
- **Border** (`#2a2a2a`): desaturated divider, never pure grey. Lifts from `#121212` by ~14 lightness units.
- **Border Soft** (`rgba(255,255,255,0.06)`): nested-row hairline.
- **Border Strong** (`rgba(255,255,255,0.12)`): hover/focus outline.
### Shadow Colors
- **Ambient** (`rgba(0,0,0,0.30) 0 1px 2px`): rare faint card lift.
- **Standard** (`rgba(0,0,0,0.40) 0 4px 12px`): hover elevation.
- **Elevated** (`rgba(0,0,0,0.60) 0 12px 32px`): modal, command palette mockup.
- **Terminal Glow** (`0 0 24px rgba(194,255,0,0.10)`): faint lime glow around active terminal screenshot — rare.
### Semantic
Mirrors terminal accent hues:
- **Success** (`#86efac`): same as terminal success.
- **Warning** (`#fde047`): same as terminal warning.
- **Danger** (`#fca5a5`): same as terminal error.
- **Info** (`#7eb8ff`): same as inline link.
## 3. Typography Rules
### Font Family
- **Display + Body:** `Inter, "Inter Placeholder", -apple-system, "system-ui", sans-serif`. Weights 400/500/600/700. The "Inter Placeholder" is a metric-matched fallback so layout never reflows on font load.
- **Mono:** `"Hack", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Monaco, Courier, monospace`. **Hack** is the primary — open-source, terminal-grade, with intentionally equalised stem widths. Used only inside terminal screenshots and inline code chips.
- **OpenType:** Inter ships with `kern`, `liga`, `calt` enabled. Hack ships with `kern`, `tnum`, `zero` (slashed-zero is the brand fingerprint inside terminal output).
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Inter | 96 | 500 | 1.0 | -0.025em | kern, calt | Largest hero (rare) |
| display-large | Inter | 72 | 500 | 1.05 | -0.02em | kern, calt | Homepage hero — "Warp is the agentic development environment" |
| h1 | Inter | 56 | 500 | 1.10 | -0.015em | kern, calt | Section H1 |
| h2 | Inter | 40 | 500 | 1.15 | -0.01em | kern, calt | Section heads |
| h3 | Inter | 28 | 500 | 1.25 | -0.005em | kern, calt | Sub-section heads |
| h4 | Inter | 22 | 500 | 1.30 | 0 | kern, calt | Card titles |
| body-large | Inter | 18 | 400 | 1.55 | 0 | kern, calt | Hero deck |
| body | Inter | 16 | 400 | 1.55 | 0 | kern, calt | Default body |
| body-small | Inter | 14 | 400 | 1.55 | 0 | kern, calt | Footer body |
| button | Inter | 15 | 500 | 1.0 | 0 | kern, calt | CTA label |
| button-large | Inter | 16 | 500 | 1.0 | 0 | kern, calt | Hero primary CTA |
| nav-link | Inter | 14 | 500 | 1.4 | 0 | kern, calt | Top nav |
| label | Inter | 12 | 500 | 1.3 | 0.04em | kern | UPPERCASE eyebrow |
| label-mono | Hack | 12 | 500 | 1.3 | 0.04em | tnum, uppercase | Mono UPPERCASE category label |
| caption | Inter | 13 | 400 | 1.4 | 0 | kern | Caption |
| micro | Inter | 11 | 500 | 1.3 | 0.03em | kern | Pill / badge text |
| code | Hack | 13 | 400 | 1.55 | 0 | tnum, zero | Inline code chip |
| code-prompt | Hack | 13 | 500 | 1.55 | 0 | tnum, zero | Terminal prompt marker |
| terminal-cmd | Hack | 14 | 400 | 1.4 | 0 | tnum, zero | Command-line text inside screenshots |
### Principles
- **Inter at 500, not 700.** The display weight choice is medium, not bold. Bold display reads as marketing impact; medium reads as engineered. The hero authority comes from size + tracking, not weight.
- **Tracking is heavy negative on display.** Display tier runs `-0.025em` to `-0.015em`. The negative tracking is what gives Inter the engineered, system-font feel at large size.
- **Centered hero.** Like a man-page title — the centered alignment is part of the system-app register. Most marketing sites left-align hero copy; Warp centers.
- **Mono is product-only.** Hack appears inside terminal screenshots and inline code chips. The marketing chrome itself is Inter throughout — buttons, nav, labels, even the "$" prompt-style microcopy.
- **Slashed zero in mono (zero feature).** Terminal output renders zeros with slashes — a deliberate "this is real terminal" signal.
- **No serif anywhere.** Even editorial blog posts on Warp's site are Inter — the brand is sans-only.
- **Weight as hierarchy.** 500 for display + button, 400 for body. The 100-unit gap is the readability cue.
- **UPPERCASE labels are sparing.** The 12px UPPERCASE eyebrow appears on section labels ("PRODUCT", "RESOURCES") with `0.04em` tracking — never on body or button text.
## 4. Component Stylings
### Buttons
**Primary (White Pill — Download for Mac)**
- Background: `#ffffff`
- Text: `#000000`
- Padding: `10px 18px`, height 40
- Radius: **7 (sm)** — observed unusually small radius
- Font: button-large (Inter 16 / 500)
- Hover: `#f5f5f5` background
- Active: `#ebebeb`
- Use: hero CTA — Download for Mac. The page's most chromatic moment.
**Secondary (Bordered Dark)**
- Background: transparent
- Text: `#ffffff`
- Border: `1px solid #2a2a2a`
- Padding: `10px 18px`, height 40
- Radius: 7
- Hover: `#1a1a1a` background + border `rgba(255,255,255,0.16)`
- Use: secondary action — View Docs / Read More.
**Ghost (Tertiary)**
- Background: transparent
- Text: `#cccccc`
- Padding: `8px 14px`
- Radius: 7
- Hover: text `#ffffff`
- Use: nav button, inline text-link CTA.
**Platform Selector**
- Background: `#1a1a1a`
- Text: `#ffffff`
- Border: `1px solid #2a2a2a`
- Padding: `10px 16px`
- Radius: 7
- Hover: `#222222`
- Use: Mac / Linux / Windows toggle for download.
### Cards
**Feature Card**
- Background: `#1a1a1a` (bg-100)
- Border: `1px solid #2a2a2a`
- Radius: 12
- Padding: 32
- No shadow — depth comes from tonal lift only.
**Product-Row Card**
- Background: `#1a1a1a`
- Border: `1px solid #2a2a2a`
- Radius: 12
- Padding: 40
- Layout: horizontal split — feature copy left (~40% width), terminal screenshot right (~60%).
- The signature card pattern of the page.
**Pricing Card**
- Background: `#1a1a1a`
- Border: `1px solid #2a2a2a`
- Radius: 12
- Padding: 32
- Use: pricing tier panel.
### Terminal Screenshot
The most distinctive primitive:
- Background: `#0e0e0e` (deeper than canvas)
- Border: `1px solid #1a1a1a`
- Radius: 12 (matching macOS window chrome curvature)
- **Chrome strip:** 28px tall `#222222` band at top with three traffic-light dots (red/yellow/green) — mimicking macOS Terminal title bar.
- **Inside:** Hack mono at 13–14px with the `#c2ff00` lime cursor blinking, `#a78bfa` purple agent prompts, `#86efac` green success output.
- The cursor blink animates at ~1s cadence; everything else is static.
### Inputs / Forms
**Input**
- Background: `#1a1a1a`
- Border: `1px solid #2a2a2a`
- Radius: 7
- Padding: `10px 14px`, height 40
- Focus: border `#c2ff00` + ring `0 0 0 2px rgba(194,255,0,0.20)` lime ring
- Use: email signup, contact form.
### Badges
**Pill Badge (Default)**
- Background: `#1a1a1a`
- Text: `#cccccc`
- Border: `1px solid #2a2a2a`
- Radius: 9999, Padding: `4px 12px`
- Font: micro (11/500)
**Lime Badge (Sparingly)**
- Background: `rgba(194,255,0,0.10)`
- Text: `#c2ff00`
- Border: `1px solid rgba(194,255,0,0.20)`
- Radius: 9999, Padding: `4px 12px`
- Use: feature badges where lime is earned (e.g., "AGENTIC", "OPEN SOURCE").
### Announcement Banner
**Top Strip**
- Background: `#f5f5f5` light
- Text: `#0a0a0a` dark
- Padding: `8px 16px`, height 32
- Radius: 0 (edge-to-edge)
- Use: "Warp is now open-source" / "Warp 2.0 launches" — the only light contrast moment on the page.
### Navigation
Top nav 64px tall, transparent on hero, `#121212` background with `1px solid #2a2a2a` border-bottom on scroll. Links: Inter 14/500 `#cccccc`, hover to `#ffffff`. Right side: GitHub icon + Sign In (ghost) + Download for Mac (white pill primary).
### Logo Cloud
Customer logo grid:
- Each logo: low opacity (0.6), desaturated to greyscale.
- Hover lifts opacity to 1.0 + restores color (rare on dark dev-tool sites).
- 4-6 logos per row, ~32px tall.
## 5. Layout Principles
### Spacing System
Base 4px. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160. Section gaps run 96–128px; inside-card padding 32–40; nav padding `8px 14px`; grid gap 24.
The density is moderate-to-tight — denser than Apple's airy 160px sections, looser than Stripe's 64px information-dense rhythm. Warp's pacing matches its product: efficient, terminal-like.
### Grid & Container
- **Page width:** 1200px max.
- **Prose width:** 720px (intro paragraphs).
- **Header height:** 64px.
- **Hero height:** ~720px.
- **Grid gap:** 24px (tighter than Discord's 32, Linear's 24).
The hero is centered (rare for SaaS — most left-align). Below the fold, product-row cards alternate orientation: feature-left/screenshot-right, then feature-right/screenshot-left, then back. The zigzag is what gives the page its scroll rhythm.
### Whitespace Philosophy
Warp's whitespace is **engineered**, not luxurious. Sections have enough air to breathe but never feel lavish. The page is meant to feel like documentation — efficient, dense with proof, not padded with marketing fluff. Whitespace is the negative space that lets terminal screenshots stand out.
### Section Cadence
The dark canvas runs edge-to-edge. Section breaks come from:
1. Light announcement banner (above hero) — 32px tall, `#f5f5f5`.
2. Hero (centered, 720px tall).
3. Product-row stack (4–6 cards, alternating orientation, ~600px each).
4. Logo cloud (compact, ~200px).
5. Feature stack (text-heavy, ~500px).
6. FAQ (accordion).
7. Footer.
The dark-canvas-throughout rule is the discipline — Warp does not break into light bands. The sole light moment is the announcement banner.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Edge-bound elements, announcement banner |
| Micro | 2 | Decorative pills (rare) |
| XS | 4 | Tag chips |
| **SM** | **7** | **Primary CTA, inputs** — observed unusually small radius |
| MD | 8 | Standard panel chips |
| **LG / Card** | **12** | **Card and terminal screenshot radius** |
| XL | 16 | Modal corners |
| XXL | 24 | Hero containers (rare) |
| Pill | 9999 | Badges, status pills |
Warp's radius scale is unusual: the primary CTA radius is **7px** (observed), not the 8px round number. That single-pixel-tighter-than-expected value is part of the brand's "we measured the actual macOS Terminal" precision. Cards land at 12 to match macOS window chrome.
**Compound radii:** none. The terminal chrome strip has rounded top corners (`12 12 0 0`) which attach to the body's `0 0 12 12` — but that's inside the screenshot mockup, not on marketing components.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat, no shadow | Body copy on canvas, transparent buttons |
| 1 | Tonal lift `#1a1a1a` over `#121212` | Feature cards |
| 2 | Tonal `#0e0e0e` (deeper inversion) | Terminal screenshots — deeper than card |
| 3 | `0 4px 12px rgba(0,0,0,0.40)` | Hover-elevated card (rare) |
| 4 | `0 12px 32px rgba(0,0,0,0.60)` | Modal, popover |
| 5 | `0 0 24px rgba(194,255,0,0.10)` | Active terminal glow (rare) |
### Shadow Philosophy
Warp uses **tonal layering, not blurs.** The page bg `#121212` → card bg `#1a1a1a` → terminal screenshot bg `#0e0e0e` forms a three-step ladder. The terminal screenshot reads as *deeper* than the card it sits on — a deliberate inversion that makes the screenshot feel like a window cut into the page rather than a panel pasted on top.
Shadows are minimal and reserved for true elevation moments (modal, popover). The chrome relies on tone, not blur. The desaturated `#2a2a2a` border (slightly lighter than the surface, never pure grey) is the depth-without-shadow tool — it gives cards a hairline definition while preserving the matte register.
## 8. Interaction & Motion ✨
### Easing Curves
- **Standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — default ease-in-out.
- **Emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — modal, full reveal.
- **Entrance:** `cubic-bezier(0, 0, 0.2, 1)` — content fade-in on scroll.
- **Terminal:** `steps(1, end)` — instant transitions for cursor blink and command output reveal (mimics terminal behavior).
### Duration Buckets
- **Fast (100ms):** color transitions, button hover.
- **Standard (180ms):** card lift, modal entry.
- **Slow (320ms):** hero fade-in, large reveal.
- **Cursor Blink (1000ms):** the lime cursor inside terminal screenshots.
### Per-Component Micro-States
- **Button (white pill):** background flickers `#ffffff` → `#f5f5f5` on hover. No shadow grow, no transform. 100ms.
- **Button (secondary bordered):** background goes from transparent to `#1a1a1a`; border opacity rises from `#2a2a2a` to `rgba(255,255,255,0.16)`. 180ms.
- **Card (feature):** border opacity slightly intensifies on hover (`#2a2a2a` → `rgba(255,255,255,0.12)`). No transform. 180ms.
- **Logo cloud:** opacity 0.6 → 1.0 + greyscale → color on hover. 180ms.
- **Link / nav-link:** text color `#cccccc` → `#ffffff` on hover. 100ms.
- **Terminal cursor:** blinks `#c2ff00` ↔ transparent at 1s `steps(1, end)` infinite — sharp on/off, not faded.
### Page Transitions
- Hero: content fades + 8px translateY rise on load. 320ms ease-entrance.
- Below-fold sections: fade + 6px translateY on scroll-into-viewport. 240ms.
- Product-row cards: stagger 80ms between cards as they enter viewport.
- Modal (rare): backdrop fade + scale 0.96 → 1.0. 320ms ease-emphasized.
### Reduced Motion
`@media (prefers-reduced-motion: reduce)`:
- Cursor blink stops (cursor stays solid lime).
- All transforms collapse to opacity-only.
- Logo cloud color/opacity restoration on hover persists (it's a state cue).
- Page-load fade-ins reduce to opacity-only without translate.
## 9. Accessibility & A11y ✨
### Contrast Pairs
- **Body text on canvas:** `#ffffff` on `#121212` → 18.5:1. **AAA at body sizes.**
- **Soft text on canvas:** `#cccccc` on `#121212` → 9.4:1. **AAA at body.**
- **Muted text on canvas:** `#999999` on `#121212` → 6.0:1. **AA at body, AAA at large.**
- **CTA text on white:** `#000000` on `#ffffff` → 21.0:1. **AAA.**
- **Inline link on canvas:** `#7eb8ff` on `#121212` → 7.6:1. **AAA at body.**
- **Lime accent inside terminal:** `#c2ff00` on `#0e0e0e` → 17.4:1. **AAA at body and code sizes.**
### Focus Indicators
`2px solid #c2ff00` with 2px offset on dark canvas. The lime ring is the system signature — same color as the in-product terminal cursor. Form fields use the same lime ring at `0 0 0 2px rgba(194,255,0,0.20)` softer halo.
### ARIA Pattern Recommendations
- **Top nav:** `<nav aria-label="Primary">` with skip-link to `#main-content`.
- **Platform selector:** `role="tablist"` with `role="tab"` (Mac / Linux / Windows), `aria-selected` on active.
- **Terminal screenshot:** `role="img"` with descriptive `aria-label` summarizing the command and output (e.g., "Warp terminal showing `git status` command with green success output").
- **Cursor blink:** `aria-hidden="true"` — purely decorative.
- **Announcement banner:** `role="region"` with `aria-label="Announcement"` and a dismiss button.
- **CTA buttons:** semantic `<button>` or `<a>`, descriptive labels ("Download Warp for Mac" not "Download").
### Keyboard Navigation
- Tab order: announcement banner dismiss → nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to `#main-content` first focus stop.
- Platform selector arrow-keys (left/right between Mac/Linux/Windows).
- FAQ accordion: Tab to expand, Enter/Space to toggle, Esc to collapse.
### Screen Reader Hints
- Terminal screenshots provide an `aria-label` summarizing what the terminal demonstrates — not the literal pixel content.
- Cursor blink and decorative dots: `aria-hidden="true"`.
- Logo cloud items have semantic `<img alt="Company name">` or descriptive `aria-label` on `<a>` if the logo is a link.
### Reduced Motion
`prefers-reduced-motion: reduce` halts cursor blink, transform animations, and fade-in translateY. Hover state color/opacity transitions persist.
## 10. Responsive Behavior
### Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–640px | Single column, hero shrinks to ~520px, terminal screenshots scale to fit |
| Tablet | 640–1024px | Two-column features, product-row cards stack vertically (feature top, screenshot bottom) |
| Desktop | 1024–1280px | Full product-row horizontal layout, three-column logo cloud |
| Wide | 1280–1536px+ | 1200px container caps; surrounding gutters absorb extra width |
### Touch Targets
- Buttons height ≥40px; pad to 44 on mobile via vertical padding.
- Platform selector tabs: 40px tall — exceeds 44 minimum with surrounding hit area.
- Nav links 44px hit area on mobile.
### Collapsing Strategy
- **Hero:** display-large shrinks 72 → 56 → 44 → 36. Line-height stays 1.05–1.15.
- **Product-row card:** horizontal split → vertical stack at <1024px. Screenshot scales to card width.
- **Terminal screenshot:** scales fluidly; mono text inside reflows or scrolls horizontally on mobile (depending on content).
- **Logo cloud:** 6-col → 4-col → 2-col across breakpoints.
- **Announcement banner:** persists; text shortens on mobile if needed.
### Image Behavior
- Terminal screenshots: aspect-ratio container (typically 16:10), scale to fit card width.
- Below-fold screenshots: `loading="lazy"`.
- Customer logos: SVG, scale fluidly.
### Container Queries
Product-row cards may use `@container` queries to switch from horizontal to vertical layout based on container width — useful when a card sits in a narrow column.
## 11. Content & Voice ✨
### Tone
**Engineered, direct, terminal-native.** Warp talks like a developer tool's documentation: short sentences, capability claims with proof, no marketing fluff. The brand voice avoids superlatives and emoji. It assumes the reader is technical and gives them specifics over hype.
### Microcopy Patterns
- **Headlines:** capability-direct. "Warp is the agentic development environment", "Run terminal commands as natural language", "Built for AI agents, not just humans."
- **Decks:** specifics + proof. "The terminal that lets you write commands in plain English. With block output, AI suggestions, and team workflows."
- **CTA verbs:** "Download for Mac", "Get Started Free", "Read the Docs", "Sign Up". Always specific and verb-first.
- **Error messages** (in-product convention): direct, with recovery path. "Couldn't connect — check your network and retry."
### Empty States
In-product: terminal-native. "No agents yet. Try `warp agent create my-helper` to start." Always with a concrete command suggestion.
### Success Confirmations
- Download started: "Downloading Warp for Mac…"
- Form submit: "Thanks! We'll be in touch."
- Sign up: "Welcome to Warp. Check your email for the download link."
### CTA Verb Conventions
The verbs Warp uses, ranked:
1. **Download for Mac** (primary conversion — never "Download Now")
2. **Get Started** (secondary, broad)
3. **Read the Docs** (educational)
4. **Sign Up** / **Sign In**
5. **Try Free** (rare; Warp's pricing is freemium)
What Warp *doesn't* say: "Get Warp Today" (too marketing), "Click Here" (never), "Free Trial" (the brand prefers "Free" or "Try Free"). The verb register is system-software, not SaaS.
## 12. Dark Mode & Theming ✨
Warp's marketing site is **dark-only by default**. The brand identity is built around the near-black canvas and terminal-native register — there is no light-mode marketing variant. The in-product terminal supports light/dark themes (and custom themes via Warp's theme marketplace), but the marketing site stays dark across user preference.
If a future light-mode variant were implemented (unlikely given brand identity), the canonical token swap would be:
```yaml
colors-light:
bg: '#fafafa' # near-white, not pure
bg-100: '#ffffff' # elevated surface
bg-200: '#f0f0f0' # input fields
surface-terminal: '#1a1a1a' # terminal stays dark even in light mode (it's a real terminal)
text: '#0a0a0a'
text-200: '#3f3f3f'
text-300: '#6b6b6b'
brand: '#7a9e1f' # darker lime for legibility on light
cta-bg: '#0a0a0a' # invert: dark pill on light canvas
cta-text: '#ffffff'
border: '#e5e5e5'
```
The terminal screenshot would *not* invert — terminals are dark by convention even on light-OS chrome. The light-mode CTA would invert to dark-pill-on-light, mirroring how Apple shows download CTAs on light marketing pages.
**Dark-only register** — Warp's brand identity is the terminal canvas; light variant is not offered.
## 13. Lineage & Influences
Warp's design lineage is the **Linear → Vercel → Raycast** dev-tool dark-canvas tradition, adjusted toward terminal-software register. Linear pioneered the near-black marketing canvas with Inter as display; Vercel proved oversized Inter display worked for dev infra; Raycast pushed into HSL accent hues and tonal surface ladders. Warp lifts the canvas and Inter pairing but adds two distinctive moves:
1. **The terminal-screenshot deeper-than-canvas inversion.** Most dark sites elevate cards above canvas with lighter backgrounds; Warp puts the screenshot *deeper*, mimicking how a real terminal window looks slightly recessed in macOS chrome.
2. **Lime accent that lives only inside product screenshots.** Linear and Vercel use brand accents on marketing chrome (Linear's blue gradients, Vercel's data colors); Warp restricts the lime to inside terminal screenshots. The marketing surface is monochrome; color enters only when you're seeing real software.
The white-pill download CTA at 7px radius is lifted from Apple's macOS download pages — pure-white pill with black text, modest radius, no shadow on dark canvas. That single move is what makes the site feel like a system app's marketing surface (Apple, Logitech, Mac App Store) rather than a SaaS landing.
**Influences:**
- **Linear** — pioneered the near-black dev-tool marketing canvas with Inter display (https://linear.app)
- **Apple (macOS download pages)** — white-pill download CTA on dark, lifted directly (https://www.apple.com/macos/)
- **Vercel** — confidence in oversized Inter at 500 with tight tracking (https://vercel.com)
- **Hack font** — open-source terminal-grade mono (https://sourcefoundry.org/hack/)
- **macOS Terminal default theme** — `#121212` canvas, lime cursor, traffic-light chrome
- **Raycast** — adjacent dev-tool with HSL accent strategy and similar surface ladder
## 14. Do's and Don'ts
### Do's
- **Do** anchor the canvas at `#121212` — lighter than Linear or Raycast, matching macOS Terminal default exactly.
- **Do** ship the primary download button as a pure-white pill with black text at 7px radius; tinted accent buttons read as generic dev-tool SaaS.
- **Do** let neon-lime live inside the terminal screenshots, not on marketing chrome — that constraint is what keeps the page calm.
- **Do** use real terminal screenshots, not stylized mockups. Authentic command output is the brand's proof.
- **Do** invert the terminal screenshot deeper (`#0e0e0e`) than the card it sits on (`#1a1a1a`). The depth inversion is the brand fingerprint.
- **Do** center the hero. Like a man-page title, not a left-aligned SaaS pitch.
- **Do** use Hack mono inside terminal screenshots, Inter on marketing chrome — the family swap is the register-switch.
- **Do** keep the desaturated border at `#2a2a2a` — never pure grey; the slight cool tint is the depth-without-shadow tool.
- **Do** ship the announcement banner as a `#f5f5f5` light strip — it should be the only bright contrast moment on the page.
- **Do** use Inter at weight 500, not 700, for display. Medium-not-bold is the engineered hero voice.
### Don'ts
- **Don't** add gradient washes or particle backgrounds; the dark canvas is the brand. Animated gradients tip the page toward gaming-platform register.
- **Don't** introduce a second brand accent — lime is the only saturated color, and it belongs to the product, not the site.
- **Don't** soften display type below Inter 500; the hero's authority comes from the medium-not-bold weight at large size.
- **Don't** apply the lime to button fills, badges, or backgrounds. The lime-stays-inside-screenshots discipline is non-negotiable.
- **Don't** use a serif anywhere. Even editorial blog posts are Inter on Warp's site.
- **Don't** elevate cards above canvas with shadows. Tonal layering (`#121212` → `#1a1a1a`) is the depth language.
- **Don't** break into light bands mid-page. Aside from the announcement banner, the canvas runs dark edge-to-edge.
- **Don't** use a 4px or 12px button radius. The 7px observed value is the system precision; rounding it to 8 reads as approximate.
- **Don't** left-align the hero. Centered hero is the man-page register; left-aligned is the SaaS register.
- **Don't** add emoji to marketing copy. The voice is engineered, not casual.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #121212
bg-100 (card): #1a1a1a
surface-terminal: #0e0e0e
text: #ffffff
text-200: #cccccc
text-300: #999999
brand (lime): #c2ff00
cta-bg: #ffffff
cta-text: #000000
link: #7eb8ff
border: #2a2a2a
banner-light: #f5f5f5
```
### Example Component Prompts
- **Hero:** "Create a centered hero on a `#121212` canvas with a 72px Inter / weight 500 / line-height 1.05 / tracking -0.02em headline reading 'Warp is the agentic development environment', a 18px Inter 400 deck below in `#cccccc`, a primary CTA pill in `#ffffff` with `#000000` text at 7px radius / `10px 18px` padding, and a secondary bordered button next to it. Centered alignment — like a man-page title."
- **Product-row card:** "Design a horizontal product-row card with `#1a1a1a` background, `1px solid #2a2a2a` border, 12px radius, 40px padding. Left half (~40%): h3 heading in Inter 28/500 white, body in Inter 16/400 `#cccccc`, optional 'Learn more' ghost link. Right half (~60%): a terminal screenshot at `#0e0e0e` background with 12px radius, macOS traffic-light chrome strip at top, Hack mono command output inside with `#c2ff00` cursor."
- **Terminal screenshot:** "Render a terminal screenshot at `#0e0e0e` background, 12px radius, `1px solid #1a1a1a` border. Add a 28px tall `#222222` chrome strip at top with three traffic-light dots (red `#ff5f57`, yellow `#febc2e`, green `#28c840`). Inside, render Hack mono at 13–14px with: a `$` prompt in `#cccccc`, the command in white, a blinking lime `#c2ff00` cursor, and output text in green `#86efac` for success or purple `#a78bfa` for agent prompts. Cursor blinks at 1s `steps(1, end)` infinite."
- **Download CTA pill:** "Place a primary CTA button as `#ffffff` background with `#000000` text at 7px radius (note: 7px not 8), `10px 18px` padding, height 40, Inter 16/500 label 'Download for Mac'. Hover transitions background to `#f5f5f5` over 100ms — no shadow, no transform."
- **Announcement banner:** "Add a top-of-page strip at `#f5f5f5` background with `#0a0a0a` text, height 32, full-bleed (radius 0), padding `8px 16px`. Inter 13/400 message + small dismiss × on the right. This is the only light-color moment on the page."
- **Logo cloud:** "Build a customer logo cloud with 4–6 logos per row at ~32px height. Each logo desaturated (greyscale) and at 0.6 opacity. On hover, lift to 1.0 opacity + restore color. 180ms transitions."
### Iteration Guide
1. **Anchor canvas at `#121212`.** Lighter than Linear, matches macOS Terminal default. If you set it to pure black `#000000` or off-black `#0a0a0a`, the page loses the terminal-native register.
2. **Set Inter at weight 500, not 700.** Display tier is medium-not-bold. The hero voice comes from size + tracking, not weight.
3. **Center the hero.** Like a man-page title. Most SaaS hero are left-aligned; Warp's centered alignment is part of the system-software register.
4. **Restrict lime to inside terminal screenshots.** If lime appears on a button or badge on the marketing chrome, the brand discipline is broken. The constraint is the brand.
5. **Make terminal screenshots deeper than the card** (`#0e0e0e` inside `#1a1a1a` card on `#121212` canvas). The depth inversion is the fingerprint.
6. **Use real product screenshots** — actual terminal output with real commands. Stylized mockups feel fake; real output earns trust.
7. **White-pill primary CTA at 7px radius.** Pure white, black text, modest radius. This is the Apple system-app affordance — not the dev-tool brand-colored button.
8. **Use Hack mono only inside screenshots.** Marketing chrome (buttons, nav, labels) all in Inter. The mono-inside / sans-outside split is the register-switch.
1. Visual Theme & Atmosphere
Warp’s marketing site is a terminal that learned to convert. The canvas sits at #121212 — a touch lighter than Linear (#08090a) or Raycast (#07080a), matching the macOS Terminal default — and the hero “Warp is the agentic development environment” sets at 72–96px Inter 500 with white on black, centered. The download CTA is a pure-white pill with black text at 7px radius, the same affordance Apple uses for system-software downloads.
Color enters the page almost exclusively through real product screenshots: the agent terminal’s cursor flashes a neon-lime (#c2ff00) and its command markers glow purple (#a78bfa), but the marketing surface itself stays monochrome. The page reads like documentation that happens to ship a “Download for Mac” button — and that’s exactly the register Warp wants. It’s selling a serious developer tool, and the visual surface earns trust through restraint, not chromatic flourish.
Below the hero, sections follow a clear rhythm — hero, product-row card pair (feature left, screenshot right), logo cloud, feature stack, FAQ. The dark canvas runs edge-to-edge without breaking into light bands. Real product screenshots sit on #1a1a1a cards (bg-100) and carry their own internal #0e0e0e background — deeper than the page, deeper than the card. That deepest-thing-in-the-stack-is-the-screenshot inversion is what makes the screenshot feel like a window cut into the page rather than something pasted on top.
The signature visual moment is the product-row card: a horizontal pair of feature description (left) and terminal screenshot (right), with the screenshot’s lime cursor as the only saturated color in view. That card pattern repeats 4–6 times down the page, each row demonstrating a different agent capability. The result is that the page reads like a series of capability proofs, not a marketing pitch.
The announcement banner above the hero (“Warp is now open-source”, “Warp 2.0: AI Agents”) is the single moment of bright contrast — a #f5f5f5 light strip with #0a0a0a text, sitting above the dark hero. That single 32px-tall light band is what signals “important news”; it’s gone elsewhere on the page.
Key Characteristics:
- Near-black
#121212canvas — matches macOS Terminal default exactly. - Three-tier surface ladder: page (
#121212) → card (#1a1a1a) → terminal screenshot (#0e0e0e) — terminal is deeper than card. - Inter 500 display at 72–96px — medium-not-bold weight, the engineered hero voice.
- Pure white pill download CTA at 7px radius — the page’s most chromatic moment.
- Neon-lime (
#c2ff00) lives only inside terminal screenshots — never on marketing chrome. - Real product screenshots, not mockups — the agent terminal renders authentic output.
- Hack mono inside screenshots; Inter on marketing surface.
- Light announcement banner (
#f5f5f5) above hero — the only bright contrast moment. - Centered hero alignment — like a man-page title, not a left-aligned SaaS pitch.
- Border
#2a2a2a— desaturated, never pure grey, the depth-without-shadow tool.
2. Color Palette & Roles
Primary
- Background (
#121212): canvas — body backdrop, all surfaces lift from this. Matches macOS Terminal default. - Text (
#ffffff): primary copy on dark — pure white, no off-white calibration. - Brand (
#c2ff00): neon-lime accent — lives almost entirely inside terminal screenshots. - CTA Background (
#ffffff): primary download button — pure white pill on dark canvas.
Brand & Dark
Three-tier surface ladder for elevation:
- bg (
#121212): canvas. - bg-100 (
#1a1a1a): elevated panel base — cards, product-row containers. - bg-200 (
#222222): input fields, terminal chrome strip (the macOS-style title bar). - bg-300 (
#2c2c2c): popover / hover state. - bg-400 (
#363636): rarely used. - surface-terminal (
#0e0e0e): the actual terminal screenshot bg — deeper than the canvas, the deliberate inversion.
Accent (Inside Terminal Screenshots Only)
These hues live inside the agent terminal’s command output — never on the marketing chrome:
- Terminal Cursor (
#c2ff00): the neon-lime cursor — the brand’s signature accent. - Terminal Prompt (
#a78bfa): purple command marker / agent prompt. - Terminal Success (
#86efac): green output text for successful runs. - Terminal Error (
#fca5a5): red error text. - Terminal Warning (
#fde047): yellow warning.
Interactive
- Link (
#7eb8ff): cool blue inline link — used sparingly in body copy. - Link Hover (
#a3cdff): lighter blue on hover. - CTA BG (
#ffffff): primary download pill. - CTA Text (
#000000): pure black on white. - CTA BG Hover (
#f5f5f5): subtle off-white on hover.
Neutral Scale
- Text (
#ffffff): primary copy. - Text 200 (
#cccccc): secondary copy. - Text 300 (
#999999): captions, “Trusted by industry leaders” label hue (rgba 255,255,255,0.6). - Text 400 (
#666666): disabled / metadata. - Text 500 (
#444444): faintest, rarely used.
Surface & Borders
- Surface Card (
#1a1a1a): primary card surface (same as bg-100, named for component-level use). - Surface Banner (
#f5f5f5): light announcement strip above hero — the only light surface on the page. - Border (
#2a2a2a): desaturated divider, never pure grey. Lifts from#121212by ~14 lightness units. - Border Soft (
rgba(255,255,255,0.06)): nested-row hairline. - Border Strong (
rgba(255,255,255,0.12)): hover/focus outline.
Shadow Colors
- Ambient (
rgba(0,0,0,0.30) 0 1px 2px): rare faint card lift. - Standard (
rgba(0,0,0,0.40) 0 4px 12px): hover elevation. - Elevated (
rgba(0,0,0,0.60) 0 12px 32px): modal, command palette mockup. - Terminal Glow (
0 0 24px rgba(194,255,0,0.10)): faint lime glow around active terminal screenshot — rare.
Semantic
Mirrors terminal accent hues:
- Success (
#86efac): same as terminal success. - Warning (
#fde047): same as terminal warning. - Danger (
#fca5a5): same as terminal error. - Info (
#7eb8ff): same as inline link.
3. Typography Rules
Font Family
- Display + Body:
Inter, "Inter Placeholder", -apple-system, "system-ui", sans-serif. Weights 400/500/600/700. The “Inter Placeholder” is a metric-matched fallback so layout never reflows on font load. - Mono:
"Hack", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Monaco, Courier, monospace. Hack is the primary — open-source, terminal-grade, with intentionally equalised stem widths. Used only inside terminal screenshots and inline code chips. - OpenType: Inter ships with
kern,liga,caltenabled. Hack ships withkern,tnum,zero(slashed-zero is the brand fingerprint inside terminal output).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | Inter | 96 | 500 | 1.0 | -0.025em | kern, calt | Largest hero (rare) |
| display-large | Inter | 72 | 500 | 1.05 | -0.02em | kern, calt | Homepage hero — “Warp is the agentic development environment” |
| h1 | Inter | 56 | 500 | 1.10 | -0.015em | kern, calt | Section H1 |
| h2 | Inter | 40 | 500 | 1.15 | -0.01em | kern, calt | Section heads |
| h3 | Inter | 28 | 500 | 1.25 | -0.005em | kern, calt | Sub-section heads |
| h4 | Inter | 22 | 500 | 1.30 | 0 | kern, calt | Card titles |
| body-large | Inter | 18 | 400 | 1.55 | 0 | kern, calt | Hero deck |
| body | Inter | 16 | 400 | 1.55 | 0 | kern, calt | Default body |
| body-small | Inter | 14 | 400 | 1.55 | 0 | kern, calt | Footer body |
| button | Inter | 15 | 500 | 1.0 | 0 | kern, calt | CTA label |
| button-large | Inter | 16 | 500 | 1.0 | 0 | kern, calt | Hero primary CTA |
| nav-link | Inter | 14 | 500 | 1.4 | 0 | kern, calt | Top nav |
| label | Inter | 12 | 500 | 1.3 | 0.04em | kern | UPPERCASE eyebrow |
| label-mono | Hack | 12 | 500 | 1.3 | 0.04em | tnum, uppercase | Mono UPPERCASE category label |
| caption | Inter | 13 | 400 | 1.4 | 0 | kern | Caption |
| micro | Inter | 11 | 500 | 1.3 | 0.03em | kern | Pill / badge text |
| code | Hack | 13 | 400 | 1.55 | 0 | tnum, zero | Inline code chip |
| code-prompt | Hack | 13 | 500 | 1.55 | 0 | tnum, zero | Terminal prompt marker |
| terminal-cmd | Hack | 14 | 400 | 1.4 | 0 | tnum, zero | Command-line text inside screenshots |
Principles
- Inter at 500, not 700. The display weight choice is medium, not bold. Bold display reads as marketing impact; medium reads as engineered. The hero authority comes from size + tracking, not weight.
- Tracking is heavy negative on display. Display tier runs
-0.025emto-0.015em. The negative tracking is what gives Inter the engineered, system-font feel at large size. - Centered hero. Like a man-page title — the centered alignment is part of the system-app register. Most marketing sites left-align hero copy; Warp centers.
- Mono is product-only. Hack appears inside terminal screenshots and inline code chips. The marketing chrome itself is Inter throughout — buttons, nav, labels, even the ”$” prompt-style microcopy.
- Slashed zero in mono (zero feature). Terminal output renders zeros with slashes — a deliberate “this is real terminal” signal.
- No serif anywhere. Even editorial blog posts on Warp’s site are Inter — the brand is sans-only.
- Weight as hierarchy. 500 for display + button, 400 for body. The 100-unit gap is the readability cue.
- UPPERCASE labels are sparing. The 12px UPPERCASE eyebrow appears on section labels (“PRODUCT”, “RESOURCES”) with
0.04emtracking — never on body or button text.
4. Component Stylings
Buttons
Primary (White Pill — Download for Mac)
- Background:
#ffffff - Text:
#000000 - Padding:
10px 18px, height 40 - Radius: 7 (sm) — observed unusually small radius
- Font: button-large (Inter 16 / 500)
- Hover:
#f5f5f5background - Active:
#ebebeb - Use: hero CTA — Download for Mac. The page’s most chromatic moment.
Secondary (Bordered Dark)
- Background: transparent
- Text:
#ffffff - Border:
1px solid #2a2a2a - Padding:
10px 18px, height 40 - Radius: 7
- Hover:
#1a1a1abackground + borderrgba(255,255,255,0.16) - Use: secondary action — View Docs / Read More.
Ghost (Tertiary)
- Background: transparent
- Text:
#cccccc - Padding:
8px 14px - Radius: 7
- Hover: text
#ffffff - Use: nav button, inline text-link CTA.
Platform Selector
- Background:
#1a1a1a - Text:
#ffffff - Border:
1px solid #2a2a2a - Padding:
10px 16px - Radius: 7
- Hover:
#222222 - Use: Mac / Linux / Windows toggle for download.
Cards
Feature Card
- Background:
#1a1a1a(bg-100) - Border:
1px solid #2a2a2a - Radius: 12
- Padding: 32
- No shadow — depth comes from tonal lift only.
Product-Row Card
- Background:
#1a1a1a - Border:
1px solid #2a2a2a - Radius: 12
- Padding: 40
- Layout: horizontal split — feature copy left (~40% width), terminal screenshot right (~60%).
- The signature card pattern of the page.
Pricing Card
- Background:
#1a1a1a - Border:
1px solid #2a2a2a - Radius: 12
- Padding: 32
- Use: pricing tier panel.
Terminal Screenshot
The most distinctive primitive:
- Background:
#0e0e0e(deeper than canvas) - Border:
1px solid #1a1a1a - Radius: 12 (matching macOS window chrome curvature)
- Chrome strip: 28px tall
#222222band at top with three traffic-light dots (red/yellow/green) — mimicking macOS Terminal title bar. - Inside: Hack mono at 13–14px with the
#c2ff00lime cursor blinking,#a78bfapurple agent prompts,#86efacgreen success output. - The cursor blink animates at ~1s cadence; everything else is static.
Inputs / Forms
Input
- Background:
#1a1a1a - Border:
1px solid #2a2a2a - Radius: 7
- Padding:
10px 14px, height 40 - Focus: border
#c2ff00+ ring0 0 0 2px rgba(194,255,0,0.20)lime ring - Use: email signup, contact form.
Badges
Pill Badge (Default)
- Background:
#1a1a1a - Text:
#cccccc - Border:
1px solid #2a2a2a - Radius: 9999, Padding:
4px 12px - Font: micro (11/500)
Lime Badge (Sparingly)
- Background:
rgba(194,255,0,0.10) - Text:
#c2ff00 - Border:
1px solid rgba(194,255,0,0.20) - Radius: 9999, Padding:
4px 12px - Use: feature badges where lime is earned (e.g., “AGENTIC”, “OPEN SOURCE”).
Announcement Banner
Top Strip
- Background:
#f5f5f5light - Text:
#0a0a0adark - Padding:
8px 16px, height 32 - Radius: 0 (edge-to-edge)
- Use: “Warp is now open-source” / “Warp 2.0 launches” — the only light contrast moment on the page.
Navigation
Top nav 64px tall, transparent on hero, #121212 background with 1px solid #2a2a2a border-bottom on scroll. Links: Inter 14/500 #cccccc, hover to #ffffff. Right side: GitHub icon + Sign In (ghost) + Download for Mac (white pill primary).
Logo Cloud
Customer logo grid:
- Each logo: low opacity (0.6), desaturated to greyscale.
- Hover lifts opacity to 1.0 + restores color (rare on dark dev-tool sites).
- 4-6 logos per row, ~32px tall.
5. Layout Principles
Spacing System
Base 4px. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160. Section gaps run 96–128px; inside-card padding 32–40; nav padding 8px 14px; grid gap 24.
The density is moderate-to-tight — denser than Apple’s airy 160px sections, looser than Stripe’s 64px information-dense rhythm. Warp’s pacing matches its product: efficient, terminal-like.
Grid & Container
- Page width: 1200px max.
- Prose width: 720px (intro paragraphs).
- Header height: 64px.
- Hero height: ~720px.
- Grid gap: 24px (tighter than Discord’s 32, Linear’s 24).
The hero is centered (rare for SaaS — most left-align). Below the fold, product-row cards alternate orientation: feature-left/screenshot-right, then feature-right/screenshot-left, then back. The zigzag is what gives the page its scroll rhythm.
Whitespace Philosophy
Warp’s whitespace is engineered, not luxurious. Sections have enough air to breathe but never feel lavish. The page is meant to feel like documentation — efficient, dense with proof, not padded with marketing fluff. Whitespace is the negative space that lets terminal screenshots stand out.
Section Cadence
The dark canvas runs edge-to-edge. Section breaks come from:
- Light announcement banner (above hero) — 32px tall,
#f5f5f5. - Hero (centered, 720px tall).
- Product-row stack (4–6 cards, alternating orientation, ~600px each).
- Logo cloud (compact, ~200px).
- Feature stack (text-heavy, ~500px).
- FAQ (accordion).
- Footer.
The dark-canvas-throughout rule is the discipline — Warp does not break into light bands. The sole light moment is the announcement banner.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| None | 0 | Edge-bound elements, announcement banner |
| Micro | 2 | Decorative pills (rare) |
| XS | 4 | Tag chips |
| SM | 7 | Primary CTA, inputs — observed unusually small radius |
| MD | 8 | Standard panel chips |
| LG / Card | 12 | Card and terminal screenshot radius |
| XL | 16 | Modal corners |
| XXL | 24 | Hero containers (rare) |
| Pill | 9999 | Badges, status pills |
Warp’s radius scale is unusual: the primary CTA radius is 7px (observed), not the 8px round number. That single-pixel-tighter-than-expected value is part of the brand’s “we measured the actual macOS Terminal” precision. Cards land at 12 to match macOS window chrome.
Compound radii: none. The terminal chrome strip has rounded top corners (12 12 0 0) which attach to the body’s 0 0 12 12 — but that’s inside the screenshot mockup, not on marketing components.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat, no shadow | Body copy on canvas, transparent buttons |
| 1 | Tonal lift #1a1a1a over #121212 | Feature cards |
| 2 | Tonal #0e0e0e (deeper inversion) | Terminal screenshots — deeper than card |
| 3 | 0 4px 12px rgba(0,0,0,0.40) | Hover-elevated card (rare) |
| 4 | 0 12px 32px rgba(0,0,0,0.60) | Modal, popover |
| 5 | 0 0 24px rgba(194,255,0,0.10) | Active terminal glow (rare) |
Shadow Philosophy
Warp uses tonal layering, not blurs. The page bg #121212 → card bg #1a1a1a → terminal screenshot bg #0e0e0e forms a three-step ladder. The terminal screenshot reads as deeper than the card it sits on — a deliberate inversion that makes the screenshot feel like a window cut into the page rather than a panel pasted on top.
Shadows are minimal and reserved for true elevation moments (modal, popover). The chrome relies on tone, not blur. The desaturated #2a2a2a border (slightly lighter than the surface, never pure grey) is the depth-without-shadow tool — it gives cards a hairline definition while preserving the matte register.
8. Interaction & Motion ✨
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default ease-in-out. - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal, full reveal. - Entrance:
cubic-bezier(0, 0, 0.2, 1)— content fade-in on scroll. - Terminal:
steps(1, end)— instant transitions for cursor blink and command output reveal (mimics terminal behavior).
Duration Buckets
- Fast (100ms): color transitions, button hover.
- Standard (180ms): card lift, modal entry.
- Slow (320ms): hero fade-in, large reveal.
- Cursor Blink (1000ms): the lime cursor inside terminal screenshots.
Per-Component Micro-States
- Button (white pill): background flickers
#ffffff→#f5f5f5on hover. No shadow grow, no transform. 100ms. - Button (secondary bordered): background goes from transparent to
#1a1a1a; border opacity rises from#2a2a2atorgba(255,255,255,0.16). 180ms. - Card (feature): border opacity slightly intensifies on hover (
#2a2a2a→rgba(255,255,255,0.12)). No transform. 180ms. - Logo cloud: opacity 0.6 → 1.0 + greyscale → color on hover. 180ms.
- Link / nav-link: text color
#cccccc→#ffffffon hover. 100ms. - Terminal cursor: blinks
#c2ff00↔ transparent at 1ssteps(1, end)infinite — sharp on/off, not faded.
Page Transitions
- Hero: content fades + 8px translateY rise on load. 320ms ease-entrance.
- Below-fold sections: fade + 6px translateY on scroll-into-viewport. 240ms.
- Product-row cards: stagger 80ms between cards as they enter viewport.
- Modal (rare): backdrop fade + scale 0.96 → 1.0. 320ms ease-emphasized.
Reduced Motion
@media (prefers-reduced-motion: reduce):
- Cursor blink stops (cursor stays solid lime).
- All transforms collapse to opacity-only.
- Logo cloud color/opacity restoration on hover persists (it’s a state cue).
- Page-load fade-ins reduce to opacity-only without translate.
9. Accessibility & A11y ✨
Contrast Pairs
- Body text on canvas:
#ffffffon#121212→ 18.5:1. AAA at body sizes. - Soft text on canvas:
#ccccccon#121212→ 9.4:1. AAA at body. - Muted text on canvas:
#999999on#121212→ 6.0:1. AA at body, AAA at large. - CTA text on white:
#000000on#ffffff→ 21.0:1. AAA. - Inline link on canvas:
#7eb8ffon#121212→ 7.6:1. AAA at body. - Lime accent inside terminal:
#c2ff00on#0e0e0e→ 17.4:1. AAA at body and code sizes.
Focus Indicators
2px solid #c2ff00 with 2px offset on dark canvas. The lime ring is the system signature — same color as the in-product terminal cursor. Form fields use the same lime ring at 0 0 0 2px rgba(194,255,0,0.20) softer halo.
ARIA Pattern Recommendations
- Top nav:
<nav aria-label="Primary">with skip-link to#main-content. - Platform selector:
role="tablist"withrole="tab"(Mac / Linux / Windows),aria-selectedon active. - Terminal screenshot:
role="img"with descriptivearia-labelsummarizing the command and output (e.g., “Warp terminal showinggit statuscommand with green success output”). - Cursor blink:
aria-hidden="true"— purely decorative. - Announcement banner:
role="region"witharia-label="Announcement"and a dismiss button. - CTA buttons: semantic
<button>or<a>, descriptive labels (“Download Warp for Mac” not “Download”).
Keyboard Navigation
- Tab order: announcement banner dismiss → nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to
#main-contentfirst focus stop. - Platform selector arrow-keys (left/right between Mac/Linux/Windows).
- FAQ accordion: Tab to expand, Enter/Space to toggle, Esc to collapse.
Screen Reader Hints
- Terminal screenshots provide an
aria-labelsummarizing what the terminal demonstrates — not the literal pixel content. - Cursor blink and decorative dots:
aria-hidden="true". - Logo cloud items have semantic
<img alt="Company name">or descriptivearia-labelon<a>if the logo is a link.
Reduced Motion
prefers-reduced-motion: reduce halts cursor blink, transform animations, and fade-in translateY. Hover state color/opacity transitions persist.
10. Responsive Behavior
Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–640px | Single column, hero shrinks to ~520px, terminal screenshots scale to fit |
| Tablet | 640–1024px | Two-column features, product-row cards stack vertically (feature top, screenshot bottom) |
| Desktop | 1024–1280px | Full product-row horizontal layout, three-column logo cloud |
| Wide | 1280–1536px+ | 1200px container caps; surrounding gutters absorb extra width |
Touch Targets
- Buttons height ≥40px; pad to 44 on mobile via vertical padding.
- Platform selector tabs: 40px tall — exceeds 44 minimum with surrounding hit area.
- Nav links 44px hit area on mobile.
Collapsing Strategy
- Hero: display-large shrinks 72 → 56 → 44 → 36. Line-height stays 1.05–1.15.
- Product-row card: horizontal split → vertical stack at <1024px. Screenshot scales to card width.
- Terminal screenshot: scales fluidly; mono text inside reflows or scrolls horizontally on mobile (depending on content).
- Logo cloud: 6-col → 4-col → 2-col across breakpoints.
- Announcement banner: persists; text shortens on mobile if needed.
Image Behavior
- Terminal screenshots: aspect-ratio container (typically 16:10), scale to fit card width.
- Below-fold screenshots:
loading="lazy". - Customer logos: SVG, scale fluidly.
Container Queries
Product-row cards may use @container queries to switch from horizontal to vertical layout based on container width — useful when a card sits in a narrow column.
11. Content & Voice ✨
Tone
Engineered, direct, terminal-native. Warp talks like a developer tool’s documentation: short sentences, capability claims with proof, no marketing fluff. The brand voice avoids superlatives and emoji. It assumes the reader is technical and gives them specifics over hype.
Microcopy Patterns
- Headlines: capability-direct. “Warp is the agentic development environment”, “Run terminal commands as natural language”, “Built for AI agents, not just humans.”
- Decks: specifics + proof. “The terminal that lets you write commands in plain English. With block output, AI suggestions, and team workflows.”
- CTA verbs: “Download for Mac”, “Get Started Free”, “Read the Docs”, “Sign Up”. Always specific and verb-first.
- Error messages (in-product convention): direct, with recovery path. “Couldn’t connect — check your network and retry.”
Empty States
In-product: terminal-native. “No agents yet. Try warp agent create my-helper to start.” Always with a concrete command suggestion.
Success Confirmations
- Download started: “Downloading Warp for Mac…”
- Form submit: “Thanks! We’ll be in touch.”
- Sign up: “Welcome to Warp. Check your email for the download link.”
CTA Verb Conventions
The verbs Warp uses, ranked:
- Download for Mac (primary conversion — never “Download Now”)
- Get Started (secondary, broad)
- Read the Docs (educational)
- Sign Up / Sign In
- Try Free (rare; Warp’s pricing is freemium)
What Warp doesn’t say: “Get Warp Today” (too marketing), “Click Here” (never), “Free Trial” (the brand prefers “Free” or “Try Free”). The verb register is system-software, not SaaS.
12. Dark Mode & Theming ✨
Warp’s marketing site is dark-only by default. The brand identity is built around the near-black canvas and terminal-native register — there is no light-mode marketing variant. The in-product terminal supports light/dark themes (and custom themes via Warp’s theme marketplace), but the marketing site stays dark across user preference.
If a future light-mode variant were implemented (unlikely given brand identity), the canonical token swap would be:
colors-light:
bg: '#fafafa' # near-white, not pure
bg-100: '#ffffff' # elevated surface
bg-200: '#f0f0f0' # input fields
surface-terminal: '#1a1a1a' # terminal stays dark even in light mode (it's a real terminal)
text: '#0a0a0a'
text-200: '#3f3f3f'
text-300: '#6b6b6b'
brand: '#7a9e1f' # darker lime for legibility on light
cta-bg: '#0a0a0a' # invert: dark pill on light canvas
cta-text: '#ffffff'
border: '#e5e5e5'The terminal screenshot would not invert — terminals are dark by convention even on light-OS chrome. The light-mode CTA would invert to dark-pill-on-light, mirroring how Apple shows download CTAs on light marketing pages.
Dark-only register — Warp’s brand identity is the terminal canvas; light variant is not offered.
13. Lineage & Influences
Warp’s design lineage is the Linear → Vercel → Raycast dev-tool dark-canvas tradition, adjusted toward terminal-software register. Linear pioneered the near-black marketing canvas with Inter as display; Vercel proved oversized Inter display worked for dev infra; Raycast pushed into HSL accent hues and tonal surface ladders. Warp lifts the canvas and Inter pairing but adds two distinctive moves:
-
The terminal-screenshot deeper-than-canvas inversion. Most dark sites elevate cards above canvas with lighter backgrounds; Warp puts the screenshot deeper, mimicking how a real terminal window looks slightly recessed in macOS chrome.
-
Lime accent that lives only inside product screenshots. Linear and Vercel use brand accents on marketing chrome (Linear’s blue gradients, Vercel’s data colors); Warp restricts the lime to inside terminal screenshots. The marketing surface is monochrome; color enters only when you’re seeing real software.
The white-pill download CTA at 7px radius is lifted from Apple’s macOS download pages — pure-white pill with black text, modest radius, no shadow on dark canvas. That single move is what makes the site feel like a system app’s marketing surface (Apple, Logitech, Mac App Store) rather than a SaaS landing.
Influences:
- Linear — pioneered the near-black dev-tool marketing canvas with Inter display (https://linear.app)
- Apple (macOS download pages) — white-pill download CTA on dark, lifted directly (https://www.apple.com/macos/)
- Vercel — confidence in oversized Inter at 500 with tight tracking (https://vercel.com)
- Hack font — open-source terminal-grade mono (https://sourcefoundry.org/hack/)
- macOS Terminal default theme —
#121212canvas, lime cursor, traffic-light chrome - Raycast — adjacent dev-tool with HSL accent strategy and similar surface ladder
14. Do’s and Don’ts
Do’s
- Do anchor the canvas at
#121212— lighter than Linear or Raycast, matching macOS Terminal default exactly. - Do ship the primary download button as a pure-white pill with black text at 7px radius; tinted accent buttons read as generic dev-tool SaaS.
- Do let neon-lime live inside the terminal screenshots, not on marketing chrome — that constraint is what keeps the page calm.
- Do use real terminal screenshots, not stylized mockups. Authentic command output is the brand’s proof.
- Do invert the terminal screenshot deeper (
#0e0e0e) than the card it sits on (#1a1a1a). The depth inversion is the brand fingerprint. - Do center the hero. Like a man-page title, not a left-aligned SaaS pitch.
- Do use Hack mono inside terminal screenshots, Inter on marketing chrome — the family swap is the register-switch.
- Do keep the desaturated border at
#2a2a2a— never pure grey; the slight cool tint is the depth-without-shadow tool. - Do ship the announcement banner as a
#f5f5f5light strip — it should be the only bright contrast moment on the page. - Do use Inter at weight 500, not 700, for display. Medium-not-bold is the engineered hero voice.
Don’ts
- Don’t add gradient washes or particle backgrounds; the dark canvas is the brand. Animated gradients tip the page toward gaming-platform register.
- Don’t introduce a second brand accent — lime is the only saturated color, and it belongs to the product, not the site.
- Don’t soften display type below Inter 500; the hero’s authority comes from the medium-not-bold weight at large size.
- Don’t apply the lime to button fills, badges, or backgrounds. The lime-stays-inside-screenshots discipline is non-negotiable.
- Don’t use a serif anywhere. Even editorial blog posts are Inter on Warp’s site.
- Don’t elevate cards above canvas with shadows. Tonal layering (
#121212→#1a1a1a) is the depth language. - Don’t break into light bands mid-page. Aside from the announcement banner, the canvas runs dark edge-to-edge.
- Don’t use a 4px or 12px button radius. The 7px observed value is the system precision; rounding it to 8 reads as approximate.
- Don’t left-align the hero. Centered hero is the man-page register; left-aligned is the SaaS register.
- Don’t add emoji to marketing copy. The voice is engineered, not casual.
15. Agent Prompt Guide
Quick Color Reference
bg: #121212
bg-100 (card): #1a1a1a
surface-terminal: #0e0e0e
text: #ffffff
text-200: #cccccc
text-300: #999999
brand (lime): #c2ff00
cta-bg: #ffffff
cta-text: #000000
link: #7eb8ff
border: #2a2a2a
banner-light: #f5f5f5Example Component Prompts
-
Hero: “Create a centered hero on a
#121212canvas with a 72px Inter / weight 500 / line-height 1.05 / tracking -0.02em headline reading ‘Warp is the agentic development environment’, a 18px Inter 400 deck below in#cccccc, a primary CTA pill in#ffffffwith#000000text at 7px radius /10px 18pxpadding, and a secondary bordered button next to it. Centered alignment — like a man-page title.” -
Product-row card: “Design a horizontal product-row card with
#1a1a1abackground,1px solid #2a2a2aborder, 12px radius, 40px padding. Left half (~40%): h3 heading in Inter 28/500 white, body in Inter 16/400#cccccc, optional ‘Learn more’ ghost link. Right half (~60%): a terminal screenshot at#0e0e0ebackground with 12px radius, macOS traffic-light chrome strip at top, Hack mono command output inside with#c2ff00cursor.” -
Terminal screenshot: “Render a terminal screenshot at
#0e0e0ebackground, 12px radius,1px solid #1a1a1aborder. Add a 28px tall#222222chrome strip at top with three traffic-light dots (red#ff5f57, yellow#febc2e, green#28c840). Inside, render Hack mono at 13–14px with: a$prompt in#cccccc, the command in white, a blinking lime#c2ff00cursor, and output text in green#86efacfor success or purple#a78bfafor agent prompts. Cursor blinks at 1ssteps(1, end)infinite.” -
Download CTA pill: “Place a primary CTA button as
#ffffffbackground with#000000text at 7px radius (note: 7px not 8),10px 18pxpadding, height 40, Inter 16/500 label ‘Download for Mac’. Hover transitions background to#f5f5f5over 100ms — no shadow, no transform.” -
Announcement banner: “Add a top-of-page strip at
#f5f5f5background with#0a0a0atext, height 32, full-bleed (radius 0), padding8px 16px. Inter 13/400 message + small dismiss × on the right. This is the only light-color moment on the page.” -
Logo cloud: “Build a customer logo cloud with 4–6 logos per row at ~32px height. Each logo desaturated (greyscale) and at 0.6 opacity. On hover, lift to 1.0 opacity + restore color. 180ms transitions.”
Iteration Guide
- Anchor canvas at
#121212. Lighter than Linear, matches macOS Terminal default. If you set it to pure black#000000or off-black#0a0a0a, the page loses the terminal-native register. - Set Inter at weight 500, not 700. Display tier is medium-not-bold. The hero voice comes from size + tracking, not weight.
- Center the hero. Like a man-page title. Most SaaS hero are left-aligned; Warp’s centered alignment is part of the system-software register.
- Restrict lime to inside terminal screenshots. If lime appears on a button or badge on the marketing chrome, the brand discipline is broken. The constraint is the brand.
- Make terminal screenshots deeper than the card (
#0e0e0einside#1a1a1acard on#121212canvas). The depth inversion is the fingerprint. - Use real product screenshots — actual terminal output with real commands. Stylized mockups feel fake; real output earns trust.
- White-pill primary CTA at 7px radius. Pure white, black text, modest radius. This is the Apple system-app affordance — not the dev-tool brand-colored button.
- Use Hack mono only inside screenshots. Marketing chrome (buttons, nav, labels) all in Inter. The mono-inside / sans-outside split is the register-switch.
Drop warp-dev into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add warp-dev 2 · ship landing page
npx agentkit init --design warp-dev dark minimal
Raycast
Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that th…
Docs
Install
Raycast
webdesignhot
light minimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
Docs
Install
Vercel
webdesignhot
light editorial
Anthropic
Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay…
Docs
Install
Anthropic
webdesignhot