dark · sans · structured · developer · sandbox · cool · bright
DESIGN.md inspired by StackBlitz
Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt.
By webdesignhot · stackblitz.com ↗
$ npx @webdesignhot/design-md add stackblitz
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. 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. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. 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. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm 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. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. 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. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. 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. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. 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. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. 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. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. 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. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. 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. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. 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. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. 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. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. 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. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. 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. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. 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. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. 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. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a 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. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red 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. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. 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. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. 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. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. 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. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. 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. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. 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. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. 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. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. 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. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. 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. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. 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. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. 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. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black 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. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. 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. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. 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. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. 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. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. 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. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. 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. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. 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 Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. 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. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. 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. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. 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. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. 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. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. 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. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet 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. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. 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. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. 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. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. 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. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. 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.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. 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. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. 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. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. 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. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. 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. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. 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. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. 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. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. 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 Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. 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. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. 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. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". 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. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. 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. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. 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. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. 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. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. 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. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#1c1f25 - bg-deep
#15181d - bg-darker
#101216 - surface
#24272e - surface-high
#2c3038 - surface-low
#1f2127 - surface-elev
#363b45 - text AAA · 16.5
#ffffff - text-strong
#ffffff - text-body
#e4e7ec - text-muted
#9ba3b4 - text-soft
#7d8694 - text-faint — · 2.5
#565d6b - text-on-brand
#ffffff - brand AA·LG · 3.8
#1574ef - brand-hover
#2b80f0 - brand-deep
#0f5fcc - brand-soft
rgba(21,116,239,0.16) - brand-tint
rgba(21,116,239,0.08) - accent-bolt
#1574ef - accent-purple
#8b5cf6 - accent-purple-soft
rgba(139,92,246,0.16) - accent-cyan
#22d3ee - on-brand
#ffffff - border — · 1.3
rgba(255,255,255,0.08) - border-strong — · 1.5
rgba(255,255,255,0.14) - border-soft
rgba(255,255,255,0.04) - border-brand
rgba(21,116,239,0.45) - signin-bg
rgba(49,61,94,0.24) - signin-text
rgba(255,255,255,0.8) - link
#1574ef - link-hover
#2b80f0 - success
#34d399 - success-bg
rgba(52,211,153,0.15) - warning
#fbbf24 - warning-bg
rgba(251,191,36,0.15) - danger
#f87171 - danger-bg
rgba(248,113,113,0.15) - info
#1574ef - shadow-deep
rgba(0,0,0,0.45) - shadow-soft
rgba(0,0,0,0.25) - shadow-glow
rgba(21,116,239,0.28)
Ship faster than ever.
display-hero Manrope 94px w600 -0.03em
Ship faster than ever.
display-lg Manrope 64px w700 -0.025em
Ship faster than ever.
h1 Manrope 48px w700 -0.02em
Built for teams that ship.
h2 Manrope 36px w600 -0.015em
A complete kit
h3 Manrope 28px w600 -0.01em
The quick brown fox jumps over the lazy dog.
h4 Manrope 22px w600 -0.005em
The quick brown fox jumps over the lazy dog.
h5 Manrope 18px w600 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 Inter 15px w600 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 Inter 14px w500 0
npx @webdesignhot/design-md add stripe
code ui-monospace 14px w400 0
The quick brown fox jumps over the lazy dog.
button-small Inter 13px w600 0
OUR DESIGN SYSTEM
caption Inter 13px w400 0
OUR DESIGN SYSTEM
label Inter 12px w600 0.04em
npx @webdesignhot/design-md add stripe
code-small ui-monospace 12px w400 0
OUR DESIGN SYSTEM
label-uppercase Inter 11px w600 0.08em
The quick brown fox jumps over the lazy dog.
micro ui-monospace 11px w500 0.02em
- step-0 0px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 48px
- step-10 64px
- step-11 80px
- step-12 96px
- step-13 128px
- micro
2px - sm
4px - md
8px - lg
10px - xl
12px - xxl
16px - 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
Design roles 8/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → accent-bolt
- muted → text-muted
- border → border
- ring → border-brand
StackBlitz's marketing aesthetic is the in-browser IDE turned into a landing page. The canvas is a cool graphite #1c1f25 — a neutral, slightly blue-grey near-black that reads as "editor chrome" rather than Vercel's pure void or Replit's navy ink — and the single brand colour is an electric, software-honest blue #1574ef (rgb 21,116,239) that does every piece of action work, from the flagship `Try Bolt.new` CTA to links and focus rings. That same blue is the through-line to Bolt.new, the AI app-builder StackBlitz shipped on top of its WebContainer technology, so the marketing colour and the product colour are one and the same. The type system pairs Manrope — a rounded-geometric grotesque — for display, hitting a towering 94px at weight 600 on the hero, with Inter for body and UI at a comfortable 16px / 1.6. There is no custom foundry typeface and no serif; the identity is geometric-sans display over neutral-sans body. The defining visual move is the live editor: StackBlitz pioneered the in-browser dev environment (WebContainers run Node.js entirely client-side), so the hero shows a real, booting editor + preview rather than a static screenshot. The secondary chromatic energy comes from AI-feature contexts — a violet #8b5cf6 and a cyan #22d3ee appear in Bolt and AI moments — but the action layer stays blue, always.
- StackBlitz's own AI app-builder — shares the electric blue and supplies the marketing's flagship CTA
- The client-side Node.js runtime that makes the live in-browser editor possible — the technical reason the hero can boot a real environment
- The neutral UI/body typeface — workhorse for running text and interface labels
- The rounded-geometric grotesque used for display headlines — gives the hero its confident, modern character
- Dark-mode marketing discipline — flat near-black canvas, single saturated brand accent, generous product real estate
- Sibling cloud-IDE — shared "editor-as-marketing" visual heritage, dark canvas with one saturated action colour
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: StackBlitz
tagline: Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt.
updated_at: 2026-05-29T00:00:00.000Z
published_at: 2026-05-28T23:12:19.064Z
author: webdesignhot
source_url: https://stackblitz.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, ai, saas]
tags: [dark, sans, structured, developer, sandbox, cool, bright]
preview_swatch: ['#1c1f25', '#1574ef', '#ffffff']
related: [replit, vercel, cursor]
description: 'StackBlitz''s marketing site runs on a cool graphite `#1c1f25` canvas with a single electric blue `#1574ef` doing all the action work — the same blue that powers its breakout product, Bolt.new. The type system pairs Manrope for display (a rounded-geometric grotesque, h1 at a towering 94px / 600) with Inter for body, and the layout leans dense and product-forward: faux-IDE frames, instant-boot demos, and a confident "Click. Code. Done." cadence. Where Replit goes navy-ink with saturated cyan, StackBlitz goes neutral graphite with a true product blue — the blue reads as software-honest rather than neon, signalling "this is the editor, not a brochure."'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
accent: accent-bolt
muted: text-muted
border: border
ring: border-brand
colors:
bg: '#1c1f25'
bg-deep: '#15181d'
bg-darker: '#101216'
surface: '#24272e'
surface-high: '#2c3038'
surface-low: '#1f2127'
surface-elev: '#363b45'
text: '#ffffff'
text-strong: '#ffffff'
text-body: '#e4e7ec'
text-muted: '#9ba3b4'
text-soft: '#7d8694'
text-faint: '#565d6b'
text-on-brand: '#ffffff'
brand: '#1574ef'
brand-hover: '#2b80f0'
brand-deep: '#0f5fcc'
brand-soft: 'rgba(21,116,239,0.16)'
brand-tint: 'rgba(21,116,239,0.08)'
accent-bolt: '#1574ef'
accent-purple: '#8b5cf6'
accent-purple-soft: 'rgba(139,92,246,0.16)'
accent-cyan: '#22d3ee'
on-brand: '#ffffff'
border: 'rgba(255,255,255,0.08)'
border-strong: 'rgba(255,255,255,0.14)'
border-soft: 'rgba(255,255,255,0.04)'
border-brand: 'rgba(21,116,239,0.45)'
signin-bg: 'rgba(49,61,94,0.24)'
signin-text: 'rgba(255,255,255,0.8)'
link: '#1574ef'
link-hover: '#2b80f0'
success: '#34d399'
success-bg: 'rgba(52,211,153,0.15)'
warning: '#fbbf24'
warning-bg: 'rgba(251,191,36,0.15)'
danger: '#f87171'
danger-bg: 'rgba(248,113,113,0.15)'
info: '#1574ef'
shadow-deep: 'rgba(0,0,0,0.45)'
shadow-soft: 'rgba(0,0,0,0.25)'
shadow-glow: 'rgba(21,116,239,0.28)'
typography:
display:
family: 'Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [500, 600, 700, 800]
body:
family: 'Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600]
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
weights: [400, 500]
scale:
display-hero: { size: 94, weight: 600, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-lg: { size: 64, weight: 700, lineHeight: 1.04, tracking: '-0.025em', family: display }
h1: { size: 48, weight: 700, lineHeight: 1.08, tracking: '-0.02em', family: display }
h2: { size: 36, weight: 600, lineHeight: 1.15, tracking: '-0.015em', family: display }
h3: { size: 28, weight: 600, lineHeight: 1.22, tracking: '-0.01em', family: display }
h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.005em', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: display }
body-large: { size: 18, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
button: { size: 15, weight: 600, lineHeight: 1.2, tracking: '0', family: body }
button-small: { size: 13, weight: 600, lineHeight: 1.2, tracking: '0', family: body }
nav: { size: 14, weight: 500, lineHeight: 1.2, tracking: '0', family: body }
caption: { size: 13, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
label: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.04em', family: body }
label-uppercase: { size: 11, weight: 600, lineHeight: 1.3, tracking: '0.08em', family: body }
code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono }
code-small: { size: 12, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
micro: { size: 11, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: mono }
radius:
micro: 2
sm: 4
md: 8
lg: 10
xl: 12
xxl: 16
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128]
layout:
page-width: 1280
prose-width: 720
header-height: 64
gutter: 24
section-y: 96
components:
button-primary:
background: brand
text: on-brand
radius: 10
padding: '11px 18px'
font: 'Inter 15px / weight 600'
hover: 'background → #2b80f0; subtle blue glow'
use: 'Electric blue CTA — white text on `#1574ef`, 10px radius. The flagship is `Try Bolt.new`.'
button-secondary:
background: 'rgba(49,61,94,0.24)'
text: 'rgba(255,255,255,0.8)'
border: 'none'
radius: 8
padding: '11px 18px'
font: 'Inter 15px / weight 600'
hover: 'background → rgba(49,61,94,0.4); text → #ffffff'
use: 'Tinted-fill secondary — the live `Sign in` button. Cool slate wash, no border.'
button-ghost:
background: transparent
text: text
border: '1px solid rgba(255,255,255,0.14)'
radius: 8
padding: '11px 18px'
hover: 'background → rgba(255,255,255,0.06)'
use: 'Outlined tertiary on the graphite canvas'
button-text:
background: transparent
text: brand
border: 'none'
padding: '8px 12px'
hover: 'colour → #2b80f0'
use: 'Inline link-button, often with a trailing arrow →'
card:
background: surface
border: '1px solid rgba(255,255,255,0.08)'
radius: 12
padding: '24px'
shadow: 'none'
use: 'Feature card on the graphite canvas — flat-on-flat via surface ladder'
editor-frame:
background: bg-deep
border: '1px solid rgba(255,255,255,0.14)'
radius: 12
chrome: 'window dots + tab strip with file label; live WebContainer preview pane beside the editor'
use: 'Faux-IDE / live-boot hero — the defining illustration of an in-browser editor'
input:
background: surface-low
border: '1px solid rgba(255,255,255,0.14)'
text: text
radius: 8
padding: '10px 14px'
use: 'Search and form fields; focus ring is electric blue'
badge:
background: 'rgba(255,255,255,0.08)'
text: text
border: 'none'
radius: 9999
padding: '4px 10px'
font: 'Inter 12px / 600 / 0.04em'
indicator: 'blue / purple dot 6px before label for NEW / AI'
use: 'NEW / AI / Beta status labels'
nav:
background: 'rgba(28,31,37,0.8)'
border-bottom: '1px solid rgba(255,255,255,0.06)'
blur: 'backdrop-blur on scroll'
use: 'Quiet graphite sticky bar — wordmark left, blue `Try Bolt.new` CTA right-pinned'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-snappy: 'cubic-bezier(0.16, 1, 0.3, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
hover-lift: 'translate-Y(-2px) on cards; blue glow on primary CTA'
reduced-motion: 'respects prefers-reduced-motion: reduce — opacity-only, no translate, no boot-animation loop'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: '0 1px 2px rgba(0,0,0,0.25)'
soft: '0 4px 12px rgba(0,0,0,0.25)'
standard: '0 8px 24px rgba(0,0,0,0.35)'
elevated: '0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)'
glow-blue: '0 0 24px rgba(21,116,239,0.28)'
ring: '0 0 0 2px #1574ef'
accessibility:
contrast-text-on-bg: 16.5 # #ffffff on #1c1f25 — AAA
contrast-text-on-brand: 4.4 # #ffffff on #1574ef — AA (large/UI)
contrast-brand-on-bg: 3.75 # #1574ef on #1c1f25 — AA Large / UI 3:1
focus-ring: '2px solid #1574ef, 2px offset'
reduced-motion-honored: true
keyboard-nav: 'tab follows DOM; blue focus ring on every interactive element'
lineage:
summary: |
StackBlitz's marketing aesthetic is the in-browser IDE turned into a
landing page. The canvas is a cool graphite #1c1f25 — a neutral,
slightly blue-grey near-black that reads as "editor chrome" rather than
Vercel's pure void or Replit's navy ink — and the single brand colour
is an electric, software-honest blue #1574ef (rgb 21,116,239) that does
every piece of action work, from the flagship `Try Bolt.new` CTA to
links and focus rings. That same blue is the through-line to Bolt.new,
the AI app-builder StackBlitz shipped on top of its WebContainer
technology, so the marketing colour and the product colour are one and
the same. The type system pairs Manrope — a rounded-geometric grotesque
— for display, hitting a towering 94px at weight 600 on the hero, with
Inter for body and UI at a comfortable 16px / 1.6. There is no custom
foundry typeface and no serif; the identity is geometric-sans display
over neutral-sans body. The defining visual move is the live editor:
StackBlitz pioneered the in-browser dev environment (WebContainers run
Node.js entirely client-side), so the hero shows a real, booting editor
+ preview rather than a static screenshot. The secondary chromatic
energy comes from AI-feature contexts — a violet #8b5cf6 and a cyan
#22d3ee appear in Bolt and AI moments — but the action layer stays
blue, always.
influences:
- name: Bolt.new
role: StackBlitz's own AI app-builder — shares the electric blue and supplies the marketing's flagship CTA
url: https://bolt.new
- name: WebContainers
role: The client-side Node.js runtime that makes the live in-browser editor possible — the technical reason the hero can boot a real environment
url: https://webcontainers.io
- name: Inter
role: The neutral UI/body typeface — workhorse for running text and interface labels
url: https://rsms.me/inter
- name: Manrope
role: The rounded-geometric grotesque used for display headlines — gives the hero its confident, modern character
url: https://manropefont.com
- name: Vercel
role: Dark-mode marketing discipline — flat near-black canvas, single saturated brand accent, generous product real estate
url: https://vercel.com
- name: Replit
role: Sibling cloud-IDE — shared "editor-as-marketing" visual heritage, dark canvas with one saturated action colour
url: https://replit.com
dark-mode: native # StackBlitz marketing is dark-first; the editor product has its own theming
---
## 1. Visual Theme & Atmosphere
StackBlitz's marketing site treats the editor itself as the brand. The canvas is a cool graphite `#1c1f25` — a neutral, faintly blue-grey near-black that reads like the chrome of a code editor rather than a void. On top of it sits a single electric blue `#1574ef` (rgb 21, 116, 239) that carries every piece of action: the flagship `Try Bolt.new` CTA, links, focus rings, and active states. The page reads as *you are looking at the product* — the hero boots a real in-browser environment, not a static mock, because StackBlitz's whole pitch is that the IDE runs in your tab.
The atmosphere is confident and software-honest. Where Vercel's dark mode is monastic pure-black with a white type wall, and Replit pushes a near-neon saturated cyan on navy ink, StackBlitz sits between them: a neutral graphite ground with a true product blue. The blue is bright enough to be the unmistakable focal point but never reads as decorative neon — it is the colour of a "primary" button in actual software, and that honesty is the point. The cool slate tint in the secondary `Sign in` button (`rgba(49,61,94,0.24)`) keeps the whole top bar in the same blue-grey temperature family.
The type system pairs Manrope for display with Inter for body. Manrope is a rounded-geometric grotesque, and StackBlitz pushes it hard: the hero headline lands at a towering **94px at weight 600**, line-height 1.0, with a tight `-0.03em` tracking that makes the wall of type feel architectural and assured. Body and interface text are Inter at 16px on a generous 1.6 line-height — neutral, legible, and quiet enough to let the headline and the blue do the talking. There is no serif anywhere and no custom foundry face; the identity is geometric-sans display over neutral-sans body.
Depth is achieved through a surface ladder rather than heavy shadow. The `#15181d` → `#1c1f25` → `#24272e` → `#2c3038` graphite ladder lets cards and panels lift via a background-step plus a faint white hairline (`rgba(255,255,255,0.08)`, `rgba(255,255,255,0.14)`). Real shadows appear only beneath the floating editor frame, lifting the "app" off the page. The one chromatic depth cue is a soft blue glow on the primary CTA hover — used sparingly so it always lands.
The cadence is product-forward and brisk. The brand's own tagline — *"Click. Code. Done."* — sets the rhythm: short, imperative, no marketing throat-clearing. The site assumes the reader is a developer who wants to see the thing run, so it shows the thing running.
**Key Characteristics:**
- Cool graphite `#1c1f25` canvas — a neutral blue-grey near-black, editor-chrome coloured, not pure void or navy ink
- Single electric blue `#1574ef` (rgb 21,116,239) brand — white text on it, 10px radius — owns the entire action layer
- The brand blue is shared with Bolt.new — marketing colour and product colour are identical
- Manrope display + Inter body — geometric-sans headlines over neutral-sans interface text, no serif
- Towering hero headline: Manrope 94px / 600 / `-0.03em` tracking, line-height 1.0
- Live in-browser editor as hero — WebContainers boot a real environment, not a static screenshot
- Tinted-slate secondary button (`rgba(49,61,94,0.24)`) keeps the top bar in one cool temperature
- Surface-ladder depth instead of shadow — flat-on-flat cards with faint white hairlines
- AI/Bolt accents (violet `#8b5cf6`, cyan `#22d3ee`) appear in feature contexts but never on the main CTA
- Brisk imperative voice — *"Click. Code. Done."*
## 2. Color Palette & Roles
### Primary
- **Bg / Graphite** (`#1c1f25`): the StackBlitz canvas. Cool blue-grey near-black — editor-chrome coloured, intentionally not `#000000`.
- **Brand / Electric Blue** (`#1574ef`): signature product blue (rgb 21,116,239) — does all action work. Always paired with white text on it.
- **Text Strong** (`#ffffff`): display headings and primary type at full white.
- **Text Body** (`#e4e7ec`): running body copy, near-white with a cool cast for slightly softer reading.
### Brand & Dark
- **Bg Deep** (`#15181d`): deeper nested surface — editor frame interior, code blocks beneath the canvas.
- **Bg Darker** (`#101216`): the deepest layer, used rarely for inset terminal/output panels.
- **Surface** (`#24272e`): card and panel base — the workhorse elevated surface.
- **Surface High** (`#2c3038`): hover and elevated panels.
- **Surface Low** (`#1f2127`): subtle stripe, input fill, nested element.
- **Surface Elev** (`#363b45`): selected or pressed panel state.
### Accent
- **Bolt Blue** (`#1574ef`): the action colour is the accent — there is no competing primary accent on the action layer.
- **Purple** (`#8b5cf6`): AI / Bolt feature highlight — gradients and AI-context illustration.
- **Cyan** (`#22d3ee`): tertiary highlight paired with purple in AI/WebContainer moments.
### Interactive
- **Brand** (`#1574ef`): primary CTA, link, active state.
- **Brand Hover** (`#2b80f0`): lighter blue on hover.
- **Brand Deep** (`#0f5fcc`): pressed state.
- **Brand Soft** (`rgba(21,116,239,0.16)`): blue-tinted background for highlighted regions and info banners.
- **Sign-in Fill** (`rgba(49,61,94,0.24)`): cool slate wash for the secondary button — the live `Sign in` style.
### Neutral Scale
- **Strong** (`#ffffff`): display text, primary headings.
- **Body** (`#e4e7ec`): primary running text.
- **Muted** (`#9ba3b4`): secondary copy and metadata.
- **Soft** (`#7d8694`): caption / placeholder.
- **Faint** (`#565d6b`): disabled labels.
### Surface & Borders
- **Border** (`rgba(255,255,255,0.08)`): 8% white hairline — the default rule.
- **Border Strong** (`rgba(255,255,255,0.14)`): 14% white for elevated panels, inputs, and outlined buttons.
- **Border Soft** (`rgba(255,255,255,0.04)`): subtle inset divider.
- **Border Brand** (`rgba(21,116,239,0.45)`): blue-tinted border for focused or selected interactive elements.
### Shadow Colors
- **Shadow Deep** (`rgba(0,0,0,0.45)`): primary depth beneath the floating editor frame.
- **Shadow Soft** (`rgba(0,0,0,0.25)`): subtle lift beneath cards and panels.
- **Shadow Glow Blue** (`rgba(21,116,239,0.28)`): on-hover glow around the primary CTA.
### Semantic
- **Success** background `rgba(52,211,153,0.15)`, text `#34d399`, border `rgba(52,211,153,0.3)`.
- **Warning** background `rgba(251,191,36,0.15)`, text `#fbbf24`, border `rgba(251,191,36,0.3)`.
- **Danger** background `rgba(248,113,113,0.15)`, text `#f87171`, border `rgba(248,113,113,0.3)`.
- **Info** uses the brand blue: background `rgba(21,116,239,0.16)`, text `#1574ef`, border `rgba(21,116,239,0.3)`.
## 3. Typography Rules
### Font Family
- **Display sans**: Manrope — a rounded-geometric grotesque, used for all headings and the towering hero.
- **Display fallback chain**: `Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`.
- **Body sans**: Inter — the neutral UI/body workhorse for running text, nav, labels, and buttons.
- **Body fallback chain**: `Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif`.
- **Mono companion**: system UI monospace — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`. Used inside the editor frame and for code samples; StackBlitz does not ship a custom mono on the marketing surface.
- **OpenType features** — standard ligatures and kerning; no `ss01`-style discipline. The character comes from Manrope's geometry, not from feature tuning.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Manrope | 94 | 600 | 1.0 | -0.03em | Live hero headline — the towering wall of type |
| Display Large | Manrope | 64 | 700 | 1.04 | -0.025em | Secondary flagship statement |
| H1 | Manrope | 48 | 700 | 1.08 | -0.02em | Standard page headline |
| H2 | Manrope | 36 | 600 | 1.15 | -0.015em | Section heading |
| H3 | Manrope | 28 | 600 | 1.22 | -0.01em | Sub-section |
| H4 | Manrope | 22 | 600 | 1.30 | -0.005em | Card title |
| H5 | Manrope | 18 | 600 | 1.35 | 0 | Inline emphasis heading |
| Body Large | Inter | 18 | 400 | 1.60 | 0 | Lead paragraph |
| Body | Inter | 16 | 400 | 1.60 | 0 | Standard reading text |
| Body Small | Inter | 14 | 400 | 1.50 | 0 | Captions, footer |
| Button | Inter | 15 | 600 | 1.20 | 0 | Primary button label |
| Button Small | Inter | 13 | 600 | 1.20 | 0 | Compact buttons |
| Nav | Inter | 14 | 500 | 1.20 | 0 | Top-nav links |
| Caption | Inter | 13 | 400 | 1.45 | 0 | Helper text, image captions |
| Label | Inter | 12 | 600 | 1.30 | 0.04em | Status labels, eyebrows |
| Label Uppercase | Inter | 11 | 600 | 1.30 | 0.08em | "NEW", "BETA", "AI" tags |
| Code | mono | 14 | 400 | 1.55 | 0 | Code blocks, editor content |
| Code Small | mono | 12 | 400 | 1.50 | 0 | Inline code in body |
| Micro | mono | 11 | 500 | 1.40 | 0.02em | File path, metadata |
### Principles
- **Manrope is the display voice, Inter the body voice** — a deliberate two-family split. Manrope's rounded-geometric character carries the headlines; Inter stays neutral so it never competes.
- **The hero goes big and tight** — 94px at weight 600 with line-height 1.0 and `-0.03em` tracking. The size is the statement; the weight stays at 600, not 800, so it reads confident rather than shouty.
- **Tracking tightens with size** — `-0.03em` at 94px, `-0.02em` at 48px, normal at body sizes. Display feels architectural; body feels neutral.
- **Body breathes** — Inter at 16px on a generous 1.6 line-height. Reading comfort is prioritised over density in running copy.
- **No serif anywhere** — the identity is geometric-sans display + neutral-sans body. A serif would break the software-honest feel.
- **Mono is editor-scoped** — monospace appears only inside the editor frame and code samples, not in UI chrome.
- **Weight discipline** — display uses 600/700; body uses 400 (text), 500 (nav), 600 (buttons/labels). Labels and eyebrows go to 600 with positive tracking.
## 4. Component Stylings
### Buttons
**Primary — Electric Blue**
- Background: `#1574ef`
- Text: `#ffffff`
- Padding: `11px 18px`
- Radius: `10px`
- Font: 15px Inter weight 600
- Hover: background → `#2b80f0`; optional blue glow `0 0 24px rgba(21,116,239,0.28)`
- Active: background → `#0f5fcc`
- Use: primary CTA — `Try Bolt.new`, `Start building`, `Open editor`
**Secondary — Tinted Slate (Sign in)**
- Background: `rgba(49,61,94,0.24)` — cool slate wash
- Text: `rgba(255,255,255,0.8)`
- Border: none
- Padding: `11px 18px`
- Radius: `8px`
- Font: 15px Inter weight 600
- Hover: background → `rgba(49,61,94,0.4)`, text → `#ffffff`
- Use: secondary action paired with the blue primary — the live `Sign in` button
**Outlined Ghost**
- Background: transparent
- Text: `#ffffff`
- Border: `1px solid rgba(255,255,255,0.14)`
- Padding: `11px 18px`
- Radius: `8px`
- Hover: background → `rgba(255,255,255,0.06)`, border → `rgba(255,255,255,0.24)`
- Use: tertiary outlined action on the graphite canvas
**Text / Inline**
- Background: transparent
- Text: `#1574ef`
- No border
- Padding: `8px 12px`
- Hover: colour → `#2b80f0`
- Use: inline link-button, often with a trailing arrow `→`
**Disabled**
- Background: `rgba(255,255,255,0.06)`
- Text: `#565d6b`
- Border: `1px solid rgba(255,255,255,0.08)`
- No hover
### Cards & Containers
**Feature Card**
- Background: `#24272e`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: `12px`
- Padding: `24px`
- Shadow: none (flat-on-flat)
- Hover: surface → `#2c3038`, border → `rgba(255,255,255,0.14)`, optional `translate-Y(-2px)`
**Editor Frame (live in-browser hero)**
- Background: `#15181d`
- Border: `1px solid rgba(255,255,255,0.14)`
- Radius: `12px`
- Chrome: window dots at top-left, tab strip with the current file label
- Inside: a real editor pane (mono code) beside a live preview pane — StackBlitz boots a WebContainer rather than showing a static image
- Shadow: `0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)` to lift the "app" off the page
- Use: anchors the hero and feature sections
**Preview / Output Pane**
- Background: `#101216`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: `8px`
- Inside: live app render or terminal output; blue accents on highlighted actions
### Badges, Tags, Pills
**Status Badge**
- Background: `rgba(255,255,255,0.08)`
- Text: `#ffffff`
- Border: none
- Radius: `9999px`
- Padding: `4px 10px`
- Font: Inter 12px / 600 / `0.04em`
- Indicator: 6px coloured dot before label — blue (NEW), purple (AI), cyan (Beta)
**Mono Tag**
- Background: `rgba(255,255,255,0.06)`
- Text: `#9ba3b4`
- Border: `1px solid rgba(255,255,255,0.08)`
- Radius: `4px`
- Padding: `2px 8px`
- Font: mono 11px / 500 / `0.08em` uppercase
### Inputs & Forms
- Background: `#1f2127`
- Border: `1px solid rgba(255,255,255,0.14)`
- Radius: `8px`
- Padding: `10px 14px`
- Font: Inter 15px / 400 / `#ffffff`
- Placeholder: `#7d8694`
- Focus: border → `#1574ef`, ring `2px rgba(21,116,239,0.35)`
- Label: Inter 13px / 500 / `#9ba3b4`
- Helper: Inter 12px / 400 / `#9ba3b4`
- Error: border → `#f87171`, helper → `#f87171`
### Navigation
- Background: `rgba(28,31,37,0.8)` — graphite with `backdrop-blur` once the page scrolls
- Border-bottom: `1px solid rgba(255,255,255,0.06)`
- Logo: white wordmark on the left
- Links: Inter 14px / 500 / `#e4e7ec`, hover → `#ffffff`
- CTA cluster: tinted-slate `Sign in` then blue `Try Bolt.new`, right-pinned
- Mobile: hamburger toggle, full-screen drawer on click
### Decorative Elements
- **Blue glow** — `0 0 24px rgba(21,116,239,0.28)` around the primary CTA on hover
- **Surface-ladder bands** — alternating `#1c1f25` and `#15181d` strips for section rhythm
- **Live editor frame** — the strongest visual asset; a booting environment used as illustration in the hero and key feature sections
## 5. Layout Principles
### Spacing System
- Base unit: `4px`
- Scale: `0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128`
- Density observation: medium-dense by marketing standards. StackBlitz packs product detail per scroll but lets running copy breathe at 1.6 line-height. The `4px` base allows fine UI tuning while sections keep a `96px` vertical rhythm.
### Grid & Container
- Max content width: `1280px` with `24px` gutters
- Hero bands give the live editor frame the dominant share of horizontal space
- Feature grids are typically three-column with `#24272e` cards
- Code/editor blocks may break out to wider widths, sometimes near full-bleed
- Vertical rhythm runs `96–128px` between sections
### Whitespace Philosophy
- **Product-forward, not airy** — the editor frame and feature grids earn their space; whitespace frames the product rather than dominating.
- **Editor-pane proportions** — section widths echo IDE pane geometry (editor + preview split) rather than golden-ratio editorial.
- **Reading comfort preserved** — despite the product density, body copy stays at 16px / 1.6 and caps reading width around 720px.
### Section Cadence
- Hero (live editor on `#1c1f25`) → feature grid (3-column on `#1c1f25`) → product-demo band (often `#15181d` for contrast) → logo wall / testimonial → pricing → CTA → footer
- No light-section breaks — the canvas stays graphite-dark throughout
- Surface-ladder swaps (`#1c1f25` ↔ `#15181d`) provide rhythm without breaking the dark discipline
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Inline highlights, fine corners |
| Standard | 4px | Mono tags, status dots, small chips |
| Comfortable | 8px | Inputs, ghost/secondary buttons, preview panes |
| Relaxed | 10px | Primary CTA — the live `Try Bolt.new` radius |
| Large | 12px | Cards, editor frames |
| Featured | 16px | Hero cards, modal frames |
| Pill | 9999px | Status badges, avatars only |
The radii ladder is `4 / 8 / 10 / 12 / 16`. The notable token is the **10px primary button** — slightly softer than the 8px used on secondary and ghost buttons, giving the blue CTA a touch more presence. Cards and the editor frame land at `12px`. There are no fully-rounded CTAs; the shape vocabulary stays rectangular-with-soft-corners, like real software. Pills (`9999`) appear on tags and badges only.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | No shadow, surface ladder | Page canvas, body cards |
| 1 — Hairline | `1px solid rgba(255,255,255,0.08)` | Default card and panel separation |
| 2 — Surface Lift | Surface bg → next ladder rung + `1px solid rgba(255,255,255,0.14)` | Hover and elevated panels |
| 3 — Soft Shadow | `0 4px 12px rgba(0,0,0,0.25)` plus hairline | Cards and panels lifted off canvas |
| 4 — Elevated | `0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)` | The live editor frame, modals |
| 5 — Blue Glow | `0 0 24px rgba(21,116,239,0.28)` | Primary CTA hover state |
| 6 — Ring | `2px solid #1574ef` at `2px` offset | Keyboard focus |
**Shadow Philosophy** — depth comes from the surface ladder (`#101216` → `#15181d` → `#1c1f25` → `#24272e` → `#2c3038`) and faint white hairlines (`rgba(255,255,255,0.08)`, `rgba(255,255,255,0.14)`). Real shadows are reserved for one job: lifting the live editor frame off the page so the "app" feels like it is floating in front of the marketing. Cards themselves are flat-on-flat. The blue glow is the single chromatic depth cue and appears only on the primary CTA hover.
## 8. Interaction & Motion
### Easing Curves
- **Standard** `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover and state changes
- **Emphasized** `cubic-bezier(0.2, 0, 0, 1)` — hero entrance, glow expansion
- **Snappy** `cubic-bezier(0.16, 1, 0.3, 1)` — quick, slight overshoot for software-like state changes
### Duration Buckets
- Fast: `150ms` — colour swaps, ring fades
- Standard: `240ms` — button hover, card lift, dropdown open
- Slow: `320ms` — hero reveals, editor-frame boot reveal
### Per-Component Micro-States
- **Button hover (primary)** — background `#1574ef` → `#2b80f0` over 150ms; blue glow expands to `0 0 24px rgba(21,116,239,0.28)` over 240ms.
- **Button hover (secondary)** — slate fill `rgba(49,61,94,0.24)` → `rgba(49,61,94,0.4)`, text `rgba(255,255,255,0.8)` → `#ffffff` over 150ms.
- **Card hover** — background → next surface-ladder rung, border → `rgba(255,255,255,0.14)`, optional `translate-Y(-2px)` over 240ms standard ease.
- **Link hover** — colour `#e4e7ec` → `#ffffff` (nav) or `#1574ef` → `#2b80f0` (inline) over 150ms.
- **Input focus** — border → `#1574ef` plus 2px blue ring `rgba(21,116,239,0.35)` over 150ms.
- **Editor frame entrance** — opacity 0→1 plus `translate-Y(16px)` over 320ms emphasized, triggered by Intersection Observer; the live boot animates the preview pane filling in.
### Page Transitions
- No client-side page transitions on marketing. Standard browser navigation. Hero and feature modules animate in over 320ms once in viewport.
### Reduced Motion Strategy
- `@media (prefers-reduced-motion: reduce)` — opacity-only fades at 150ms linear. Translate, glow pulse, and the editor boot-loop are removed entirely; a static editor + preview render is shown instead.
## 9. Accessibility & A11y
### Contrast Pairs
- `#ffffff` text on `#1c1f25` bg — **16.5:1** (AAA)
- `#e4e7ec` body on `#1c1f25` bg — **14.3:1** (AAA)
- `#9ba3b4` muted on `#1c1f25` bg — **6.5:1** (AA at body sizes)
- `#7d8694` soft on `#1c1f25` bg — **4.5:1** (AA at body sizes)
- `#ffffff` text on `#24272e` surface — **15.0:1** (AAA)
- `#ffffff` text on `#1574ef` brand — **4.4:1** (AA for large text / UI; bold the label at small sizes)
- `#1574ef` brand on `#1c1f25` bg — **3.75:1** (passes 3:1 for UI components and large text)
- `#34d399` success on `#1c1f25` bg — **8.6:1** (AAA)
- `#fbbf24` warning on `#1c1f25` bg — **9.9:1** (AAA)
- `#f87171` danger on `#1c1f25` bg — **6.0:1** (AA)
### Focus Indicators
- Default focus ring: `2px solid #1574ef` at `2px` offset
- On the blue CTA: ring becomes `2px solid #ffffff` for contrast against the blue
- Form inputs use a 2px blue ring inset
### ARIA Patterns
- **Dialog** — `role="dialog"` `aria-modal="true"` with focus trap and `aria-labelledby` pointing to the title
- **Tablist** — `role="tablist"` for the editor frame's tab strip and any file tabs
- **Menu** — `role="menu"` / `menuitem` for nav dropdowns with arrow-key navigation
- **Region** — code/editor blocks marked `<pre><code>` inside `role="region"` with `aria-label="Code example"`
- **Status** — `aria-live="polite"` on the live boot/preview so screen readers are told when the environment is ready
### Keyboard Navigation
- Tab order follows DOM source order
- Skip-to-content link in header (visible on focus only)
- All interactive elements reachable via Tab
- `Esc` closes dropdowns and modals
- Arrow keys move between tabs in the editor-frame tablist
### Screen Reader Hints
- Decorative blue glow and dots `aria-hidden="true"`
- The live editor frame labelled with `aria-label="Live in-browser editor preview"` plus a visible caption
- "NEW" / "BETA" / "AI" badges read aloud as "New feature", "Beta feature", "AI feature"
- The boot/preview state announces "Environment ready" via the polite live region
### Reduced Motion
- Honoured — the editor boot loop and glow pulse are stripped to static. The blue focus ring still appears on focus but does not animate in.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, editor frame stacks editor-over-preview, hero 94→44px |
| Tablet | 640–1024px | 2-column grids, editor frame full-width, hero 94→64px |
| Desktop | 1024–1280px | 3-column feature grids, editor + preview split side by side |
| Wide | ≥1280px | Centred 1280px container with generous margins |
### Touch Targets
- Buttons at `11px 18px` give a comfortable `44px+` tap height
- Nav links and the `Sign in` / `Try Bolt.new` cluster use `44×44px` minimum tap area on mobile
- Status badges grow from `4px 10px` to `6px 12px` on touch devices
### Collapsing Strategy
- Hero: `94px` → `64px` → `44px` across desktop → tablet → mobile
- Body: `16px` holds; lead drops `18px` → `16px` on mobile
- Editor frame: side-by-side editor + preview → stacked editor-over-preview, each pane may scroll internally
- Feature cards: 3-column → 2-column → single column stacked
- Section spacing: `96–128px` → `64px` on mobile
- Nav: horizontal links + CTA cluster → hamburger drawer
### Image Behavior
- Live editor frame maintains `12px` radius and chrome at all sizes
- Blue glow simplifies on mobile (single layer instead of layered glow)
- Logo grids reduce to 2 columns on mobile
### Container Queries
- The editor frame uses container queries to switch from a horizontal split-pane (editor | preview) to a stacked tab layout when its container drops below `560px`.
## 11. Content & Voice
### Tone
Builder-direct, brisk, and product-confident. The brand's own line — *"Click. Code. Done."* — is the whole tone in three words: imperative, no throat-clearing, assumes the reader codes. StackBlitz never explains what an IDE is; it shows one booting. Body copy is technical but plain, naming real frameworks (Next.js, Vite, Node.js) and real capabilities (instant boot, no install) rather than abstractions.
### Microcopy Patterns
- **Button verbs** — `Try Bolt.new`, `Start building`, `Open editor`, `Sign in`. Never `Get started today`, never `Click here`.
- **Error message recipe** — direct and technical: `Install failed: missing dependency. Check your package.json.`
- **Success confirmations** — terse: `Deployed.`, `Saved.`, `Environment ready.`
- **Status labels** — short caps: `NEW`, `BETA`, `AI`.
### Empty States
- Direct and instructive: `No projects yet. Start from a template.`
- Always paired with a primary CTA `Browse templates` and a secondary `New blank project`.
- No mascots, no apologetic copy.
### CTA Verb Conventions
- Primary: `Try Bolt.new`, `Start building`, `Open editor`, `Sign up`
- Secondary: `Sign in`, `See how it works`, `Read the docs`
- Tertiary: `Learn more →`, `View pricing →`
## 12. Dark Mode & Theming
**StackBlitz's marketing is dark-first.** The canvas is the graphite `#1c1f25` from header to footer; there is no light-mode marketing surface. (The editor product has its own theming, independent of the marketing site.)
If a downstream implementation needs a light variant, the recommended swap is:
- `bg` `#1c1f25` → `#ffffff`
- `bg-deep` `#15181d` → `#f8fafc`
- `surface` `#24272e` → `#f1f5f9`
- `text` `#ffffff` → `#15181d`
- `text-muted` `#9ba3b4` → `#64748b`
- `border` `rgba(255,255,255,0.08)` → `rgba(21,25,29,0.1)` (10% graphite)
- `brand` `#1574ef` stays — the colour is brand-locked. On a light canvas the blue still reads strongly; keep white text on the blue CTA.
The colour-locked brand blue means the `Try Bolt.new` CTA looks identical in light and dark — a deliberate continuity signal that ties the marketing to the product (and to Bolt.new).
## 13. Lineage & Influences
StackBlitz's marketing aesthetic is the in-browser IDE turned into a landing page. The canvas is a cool graphite `#1c1f25` — a neutral, slightly blue-grey near-black that reads as editor chrome rather than Vercel's pure void or Replit's navy ink — and the single brand colour is an electric, software-honest blue `#1574ef` (rgb 21, 116, 239) that does every piece of action work, from the flagship `Try Bolt.new` CTA to links and focus rings. That same blue is the through-line to Bolt.new, the AI app-builder StackBlitz shipped on top of its WebContainer technology, so the marketing colour and the product colour are one and the same.
The type system pairs Manrope — a rounded-geometric grotesque — for display, hitting a towering 94px at weight 600 on the hero, with Inter for body and UI at a comfortable 16px / 1.6. There is no custom foundry typeface and no serif; the identity is geometric-sans display over neutral-sans body. The defining visual move is the live editor: StackBlitz pioneered the in-browser dev environment, and WebContainers run Node.js entirely client-side, so the hero shows a real, booting editor + preview rather than a static screenshot. The lineage runs through Vercel's dark-mode marketing discipline and the sibling cloud-IDE Replit's "editor-as-marketing" heritage — but StackBlitz's distinguishing claim is that the editor is *actually running in your tab*, which the marketing demonstrates rather than illustrates.
The brand explicitly rejects: gradient-heavy backgrounds, illustrated mascots, soft pastel palettes, pill-shaped CTAs, serif type anywhere, neon-decorative accents that compete with the action blue, and any visual move that would read as "consumer SaaS" rather than "developer tool." Secondary chromatic energy (violet `#8b5cf6`, cyan `#22d3ee`) appears in AI/Bolt feature contexts but never on the main CTA — the blue owns the action layer, always.
**Named influences:**
- Bolt.new — StackBlitz's own AI app-builder; shares the electric blue and supplies the flagship CTA
- WebContainers — the client-side Node.js runtime that makes the live in-browser editor possible
- Inter — the neutral UI/body typeface
- Manrope — the rounded-geometric grotesque used for display headlines
- Vercel — dark-mode marketing discipline, single saturated brand accent
- Replit — sibling cloud-IDE, shared editor-as-marketing visual heritage
## 14. Do's and Don'ts
### Do
- Use the electric blue `#1574ef` for every action — CTA, link, focus ring. It owns the action layer.
- Put white text on the blue CTA and give it a 10px radius — that's the live `Try Bolt.new` shape.
- Keep the canvas at graphite `#1c1f25` — a cool blue-grey near-black, not pure black, not navy.
- Use Manrope for headlines and Inter for body — the two-family split is the system.
- Go big and tight on the hero — Manrope ~94px / 600 / `-0.03em`, line-height 1.0.
- Show a live or live-looking editor + preview in the hero — running the product is the whole pitch.
- Use the tinted-slate fill (`rgba(49,61,94,0.24)`) for the secondary `Sign in` button — keep the top bar one cool temperature.
- Build depth from the surface ladder (`#15181d` / `#1c1f25` / `#24272e` / `#2c3038`) plus faint white hairlines.
- Reserve real shadows for lifting the editor frame off the page; keep cards flat.
- Apply the blue glow only to the primary CTA hover — its scarcity is what makes it land.
- Let body copy breathe at 16px / 1.6 even within a product-dense layout.
### Don't
- Don't put the AI accents (violet / cyan) on the main CTA — the blue is the only action colour.
- Don't drift to pure black `#000000` or to navy ink — StackBlitz's graphite is intentionally neutral blue-grey.
- Don't use a serif anywhere — Manrope + Inter is the entire type system.
- Don't pill-shape the primary CTA — it's a 10px rounded rectangle, like real software.
- Don't lift cards with shadows; depth is the surface ladder plus a hairline.
- Don't apply gradients to backgrounds — flat graphite is the canvas.
- Don't shrink the hero — the towering 94px Manrope is the brand's confidence.
- Don't spread the blue glow across every hover; reserve it for the primary CTA.
- Don't use a heavy display weight (800) for the hero — 600 is confident, not shouty.
- Don't substitute a generic mid-blue — the exact `#1574ef` (rgb 21,116,239) ties the marketing to Bolt.new.
- Don't show a static screenshot when a live editor is the point — demonstrate the boot.
## 15. Agent Prompt Guide
### Quick Color Reference
- Canvas: Graphite `#1c1f25`
- Surface: `#24272e` (card), `#2c3038` (hover), `#15181d` (deeper / editor interior)
- Text: `#ffffff` strong, `#e4e7ec` body, `#9ba3b4` muted
- Brand: Electric Blue `#1574ef` (rgb 21,116,239) — white text on it, 10px radius
- Brand Hover: `#2b80f0`
- Secondary fill (Sign in): `rgba(49,61,94,0.24)` with `rgba(255,255,255,0.8)` text
- Accent Purple (AI): `#8b5cf6`
- Accent Cyan (AI/Beta): `#22d3ee`
- Border: `rgba(255,255,255,0.08)` (8% white), `rgba(255,255,255,0.14)` (14% white)
- Success: `#34d399`
### Example Component Prompts
- "Create a hero section on `#1c1f25` graphite background. Headline at 94px Manrope weight 600, line-height 1.0, letter-spacing -0.03em, colour `#ffffff`. Subtitle at 18px Inter weight 400, line-height 1.6, colour `#e4e7ec`. Primary CTA `Try Bolt.new`: `#1574ef` background, `#ffffff` text, 10px radius, 11px 18px padding, 15px Inter weight 600. Secondary `Sign in`: `rgba(49,61,94,0.24)` fill, `rgba(255,255,255,0.8)` text, no border, 8px radius."
- "Design a live editor frame hero: `#15181d` background, 12px radius, 1px solid `rgba(255,255,255,0.14)` border. Top chrome with three window dots top-left and a tab strip showing the file name in mono 12px. Inside, a split pane: a code editor (mono 14px) on the left and a live preview render on the right. Drop shadow `0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)` to float it off the page."
- "Build a status badge: `rgba(255,255,255,0.08)` background, `#ffffff` text, 9999px radius, 4px 10px padding, Inter 12px / 600 / 0.04em. Blue dot indicator (`#1574ef`, 6px) for NEW; purple (`#8b5cf6`) for AI; cyan (`#22d3ee`) for BETA."
- "Create navigation: `rgba(28,31,37,0.8)` graphite background with backdrop-blur on scroll, 1px bottom border `rgba(255,255,255,0.06)`. White wordmark left, links in Inter 14px / 500 / `#e4e7ec`. Right-pinned cluster: tinted-slate `Sign in` then blue `Try Bolt.new` (`#1574ef` bg, white text, 10px radius)."
- "Design a dense feature card: `#24272e` background, 1px solid `rgba(255,255,255,0.08)` border, 12px radius, 24px padding. Title in Manrope 22px / 600, colour `#ffffff`. Body in Inter 16px / 400 / 1.6, colour `#9ba3b4`. Hover: surface → `#2c3038`, border → `rgba(255,255,255,0.14)`, translate-Y(-2px)."
- "Build a focused input: `#1f2127` background, 1px solid `rgba(255,255,255,0.14)` border, 8px radius, 10px 14px padding, Inter 15px `#ffffff`, placeholder `#7d8694`. On focus: border → `#1574ef` and a 2px blue ring `rgba(21,116,239,0.35)`."
### Iteration Guide
1. If the page reads "consumer SaaS" rather than "developer tool," drop pillowy radii (CTA to 10px, cards to 12px) and add a live-looking editor frame.
2. If the blue looks dull, check the canvas — it must be graphite `#1c1f25` (cool blue-grey), not pure black or navy. The blue reads cleaner against neutral graphite.
3. The exact brand blue is `#1574ef` (rgb 21,116,239) — don't substitute a generic mid-blue; the precise value ties the marketing to Bolt.new.
4. White text on the blue CTA only clears AA at large/UI sizes (4.4:1) — keep the label at weight 600 and don't shrink it below 15px.
5. The hero should be big: Manrope ~94px / 600 / `-0.03em` at line-height 1.0. If it feels timid, the size — not the weight — is what to push.
6. Keep the secondary `Sign in` button as a tinted-slate fill (`rgba(49,61,94,0.24)`), not an outline — it keeps the top bar in one cool temperature with the canvas.
7. Resist shadows for card depth — use the surface ladder (`#15181d` → `#1c1f25` → `#24272e` → `#2c3038`) plus a `rgba(255,255,255,0.08)` hairline. Save real shadow for the editor frame.
8. The blue glow is scarce — apply only to the primary CTA hover. Spreading it across every hover dilutes the cue.
1. Visual Theme & Atmosphere
StackBlitz’s marketing site treats the editor itself as the brand. The canvas is a cool graphite #1c1f25 — a neutral, faintly blue-grey near-black that reads like the chrome of a code editor rather than a void. On top of it sits a single electric blue #1574ef (rgb 21, 116, 239) that carries every piece of action: the flagship Try Bolt.new CTA, links, focus rings, and active states. The page reads as you are looking at the product — the hero boots a real in-browser environment, not a static mock, because StackBlitz’s whole pitch is that the IDE runs in your tab.
The atmosphere is confident and software-honest. Where Vercel’s dark mode is monastic pure-black with a white type wall, and Replit pushes a near-neon saturated cyan on navy ink, StackBlitz sits between them: a neutral graphite ground with a true product blue. The blue is bright enough to be the unmistakable focal point but never reads as decorative neon — it is the colour of a “primary” button in actual software, and that honesty is the point. The cool slate tint in the secondary Sign in button (rgba(49,61,94,0.24)) keeps the whole top bar in the same blue-grey temperature family.
The type system pairs Manrope for display with Inter for body. Manrope is a rounded-geometric grotesque, and StackBlitz pushes it hard: the hero headline lands at a towering 94px at weight 600, line-height 1.0, with a tight -0.03em tracking that makes the wall of type feel architectural and assured. Body and interface text are Inter at 16px on a generous 1.6 line-height — neutral, legible, and quiet enough to let the headline and the blue do the talking. There is no serif anywhere and no custom foundry face; the identity is geometric-sans display over neutral-sans body.
Depth is achieved through a surface ladder rather than heavy shadow. The #15181d → #1c1f25 → #24272e → #2c3038 graphite ladder lets cards and panels lift via a background-step plus a faint white hairline (rgba(255,255,255,0.08), rgba(255,255,255,0.14)). Real shadows appear only beneath the floating editor frame, lifting the “app” off the page. The one chromatic depth cue is a soft blue glow on the primary CTA hover — used sparingly so it always lands.
The cadence is product-forward and brisk. The brand’s own tagline — “Click. Code. Done.” — sets the rhythm: short, imperative, no marketing throat-clearing. The site assumes the reader is a developer who wants to see the thing run, so it shows the thing running.
Key Characteristics:
- Cool graphite
#1c1f25canvas — a neutral blue-grey near-black, editor-chrome coloured, not pure void or navy ink - Single electric blue
#1574ef(rgb 21,116,239) brand — white text on it, 10px radius — owns the entire action layer - The brand blue is shared with Bolt.new — marketing colour and product colour are identical
- Manrope display + Inter body — geometric-sans headlines over neutral-sans interface text, no serif
- Towering hero headline: Manrope 94px / 600 /
-0.03emtracking, line-height 1.0 - Live in-browser editor as hero — WebContainers boot a real environment, not a static screenshot
- Tinted-slate secondary button (
rgba(49,61,94,0.24)) keeps the top bar in one cool temperature - Surface-ladder depth instead of shadow — flat-on-flat cards with faint white hairlines
- AI/Bolt accents (violet
#8b5cf6, cyan#22d3ee) appear in feature contexts but never on the main CTA - Brisk imperative voice — “Click. Code. Done.”
2. Color Palette & Roles
Primary
- Bg / Graphite (
#1c1f25): the StackBlitz canvas. Cool blue-grey near-black — editor-chrome coloured, intentionally not#000000. - Brand / Electric Blue (
#1574ef): signature product blue (rgb 21,116,239) — does all action work. Always paired with white text on it. - Text Strong (
#ffffff): display headings and primary type at full white. - Text Body (
#e4e7ec): running body copy, near-white with a cool cast for slightly softer reading.
Brand & Dark
- Bg Deep (
#15181d): deeper nested surface — editor frame interior, code blocks beneath the canvas. - Bg Darker (
#101216): the deepest layer, used rarely for inset terminal/output panels. - Surface (
#24272e): card and panel base — the workhorse elevated surface. - Surface High (
#2c3038): hover and elevated panels. - Surface Low (
#1f2127): subtle stripe, input fill, nested element. - Surface Elev (
#363b45): selected or pressed panel state.
Accent
- Bolt Blue (
#1574ef): the action colour is the accent — there is no competing primary accent on the action layer. - Purple (
#8b5cf6): AI / Bolt feature highlight — gradients and AI-context illustration. - Cyan (
#22d3ee): tertiary highlight paired with purple in AI/WebContainer moments.
Interactive
- Brand (
#1574ef): primary CTA, link, active state. - Brand Hover (
#2b80f0): lighter blue on hover. - Brand Deep (
#0f5fcc): pressed state. - Brand Soft (
rgba(21,116,239,0.16)): blue-tinted background for highlighted regions and info banners. - Sign-in Fill (
rgba(49,61,94,0.24)): cool slate wash for the secondary button — the liveSign instyle.
Neutral Scale
- Strong (
#ffffff): display text, primary headings. - Body (
#e4e7ec): primary running text. - Muted (
#9ba3b4): secondary copy and metadata. - Soft (
#7d8694): caption / placeholder. - Faint (
#565d6b): disabled labels.
Surface & Borders
- Border (
rgba(255,255,255,0.08)): 8% white hairline — the default rule. - Border Strong (
rgba(255,255,255,0.14)): 14% white for elevated panels, inputs, and outlined buttons. - Border Soft (
rgba(255,255,255,0.04)): subtle inset divider. - Border Brand (
rgba(21,116,239,0.45)): blue-tinted border for focused or selected interactive elements.
Shadow Colors
- Shadow Deep (
rgba(0,0,0,0.45)): primary depth beneath the floating editor frame. - Shadow Soft (
rgba(0,0,0,0.25)): subtle lift beneath cards and panels. - Shadow Glow Blue (
rgba(21,116,239,0.28)): on-hover glow around the primary CTA.
Semantic
- Success background
rgba(52,211,153,0.15), text#34d399, borderrgba(52,211,153,0.3). - Warning background
rgba(251,191,36,0.15), text#fbbf24, borderrgba(251,191,36,0.3). - Danger background
rgba(248,113,113,0.15), text#f87171, borderrgba(248,113,113,0.3). - Info uses the brand blue: background
rgba(21,116,239,0.16), text#1574ef, borderrgba(21,116,239,0.3).
3. Typography Rules
Font Family
- Display sans: Manrope — a rounded-geometric grotesque, used for all headings and the towering hero.
- Display fallback chain:
Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif. - Body sans: Inter — the neutral UI/body workhorse for running text, nav, labels, and buttons.
- Body fallback chain:
Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif. - Mono companion: system UI monospace —
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace. Used inside the editor frame and for code samples; StackBlitz does not ship a custom mono on the marketing surface. - OpenType features — standard ligatures and kerning; no
ss01-style discipline. The character comes from Manrope’s geometry, not from feature tuning.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Manrope | 94 | 600 | 1.0 | -0.03em | Live hero headline — the towering wall of type |
| Display Large | Manrope | 64 | 700 | 1.04 | -0.025em | Secondary flagship statement |
| H1 | Manrope | 48 | 700 | 1.08 | -0.02em | Standard page headline |
| H2 | Manrope | 36 | 600 | 1.15 | -0.015em | Section heading |
| H3 | Manrope | 28 | 600 | 1.22 | -0.01em | Sub-section |
| H4 | Manrope | 22 | 600 | 1.30 | -0.005em | Card title |
| H5 | Manrope | 18 | 600 | 1.35 | 0 | Inline emphasis heading |
| Body Large | Inter | 18 | 400 | 1.60 | 0 | Lead paragraph |
| Body | Inter | 16 | 400 | 1.60 | 0 | Standard reading text |
| Body Small | Inter | 14 | 400 | 1.50 | 0 | Captions, footer |
| Button | Inter | 15 | 600 | 1.20 | 0 | Primary button label |
| Button Small | Inter | 13 | 600 | 1.20 | 0 | Compact buttons |
| Nav | Inter | 14 | 500 | 1.20 | 0 | Top-nav links |
| Caption | Inter | 13 | 400 | 1.45 | 0 | Helper text, image captions |
| Label | Inter | 12 | 600 | 1.30 | 0.04em | Status labels, eyebrows |
| Label Uppercase | Inter | 11 | 600 | 1.30 | 0.08em | ”NEW”, “BETA”, “AI” tags |
| Code | mono | 14 | 400 | 1.55 | 0 | Code blocks, editor content |
| Code Small | mono | 12 | 400 | 1.50 | 0 | Inline code in body |
| Micro | mono | 11 | 500 | 1.40 | 0.02em | File path, metadata |
Principles
- Manrope is the display voice, Inter the body voice — a deliberate two-family split. Manrope’s rounded-geometric character carries the headlines; Inter stays neutral so it never competes.
- The hero goes big and tight — 94px at weight 600 with line-height 1.0 and
-0.03emtracking. The size is the statement; the weight stays at 600, not 800, so it reads confident rather than shouty. - Tracking tightens with size —
-0.03emat 94px,-0.02emat 48px, normal at body sizes. Display feels architectural; body feels neutral. - Body breathes — Inter at 16px on a generous 1.6 line-height. Reading comfort is prioritised over density in running copy.
- No serif anywhere — the identity is geometric-sans display + neutral-sans body. A serif would break the software-honest feel.
- Mono is editor-scoped — monospace appears only inside the editor frame and code samples, not in UI chrome.
- Weight discipline — display uses 600/700; body uses 400 (text), 500 (nav), 600 (buttons/labels). Labels and eyebrows go to 600 with positive tracking.
4. Component Stylings
Buttons
Primary — Electric Blue
- Background:
#1574ef - Text:
#ffffff - Padding:
11px 18px - Radius:
10px - Font: 15px Inter weight 600
- Hover: background →
#2b80f0; optional blue glow0 0 24px rgba(21,116,239,0.28) - Active: background →
#0f5fcc - Use: primary CTA —
Try Bolt.new,Start building,Open editor
Secondary — Tinted Slate (Sign in)
- Background:
rgba(49,61,94,0.24)— cool slate wash - Text:
rgba(255,255,255,0.8) - Border: none
- Padding:
11px 18px - Radius:
8px - Font: 15px Inter weight 600
- Hover: background →
rgba(49,61,94,0.4), text →#ffffff - Use: secondary action paired with the blue primary — the live
Sign inbutton
Outlined Ghost
- Background: transparent
- Text:
#ffffff - Border:
1px solid rgba(255,255,255,0.14) - Padding:
11px 18px - Radius:
8px - Hover: background →
rgba(255,255,255,0.06), border →rgba(255,255,255,0.24) - Use: tertiary outlined action on the graphite canvas
Text / Inline
- Background: transparent
- Text:
#1574ef - No border
- Padding:
8px 12px - Hover: colour →
#2b80f0 - Use: inline link-button, often with a trailing arrow
→
Disabled
- Background:
rgba(255,255,255,0.06) - Text:
#565d6b - Border:
1px solid rgba(255,255,255,0.08) - No hover
Cards & Containers
Feature Card
- Background:
#24272e - Border:
1px solid rgba(255,255,255,0.08) - Radius:
12px - Padding:
24px - Shadow: none (flat-on-flat)
- Hover: surface →
#2c3038, border →rgba(255,255,255,0.14), optionaltranslate-Y(-2px)
Editor Frame (live in-browser hero)
- Background:
#15181d - Border:
1px solid rgba(255,255,255,0.14) - Radius:
12px - Chrome: window dots at top-left, tab strip with the current file label
- Inside: a real editor pane (mono code) beside a live preview pane — StackBlitz boots a WebContainer rather than showing a static image
- Shadow:
0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)to lift the “app” off the page - Use: anchors the hero and feature sections
Preview / Output Pane
- Background:
#101216 - Border:
1px solid rgba(255,255,255,0.08) - Radius:
8px - Inside: live app render or terminal output; blue accents on highlighted actions
Badges, Tags, Pills
Status Badge
- Background:
rgba(255,255,255,0.08) - Text:
#ffffff - Border: none
- Radius:
9999px - Padding:
4px 10px - Font: Inter 12px / 600 /
0.04em - Indicator: 6px coloured dot before label — blue (NEW), purple (AI), cyan (Beta)
Mono Tag
- Background:
rgba(255,255,255,0.06) - Text:
#9ba3b4 - Border:
1px solid rgba(255,255,255,0.08) - Radius:
4px - Padding:
2px 8px - Font: mono 11px / 500 /
0.08emuppercase
Inputs & Forms
- Background:
#1f2127 - Border:
1px solid rgba(255,255,255,0.14) - Radius:
8px - Padding:
10px 14px - Font: Inter 15px / 400 /
#ffffff - Placeholder:
#7d8694 - Focus: border →
#1574ef, ring2px rgba(21,116,239,0.35) - Label: Inter 13px / 500 /
#9ba3b4 - Helper: Inter 12px / 400 /
#9ba3b4 - Error: border →
#f87171, helper →#f87171
Navigation
- Background:
rgba(28,31,37,0.8)— graphite withbackdrop-bluronce the page scrolls - Border-bottom:
1px solid rgba(255,255,255,0.06) - Logo: white wordmark on the left
- Links: Inter 14px / 500 /
#e4e7ec, hover →#ffffff - CTA cluster: tinted-slate
Sign inthen blueTry Bolt.new, right-pinned - Mobile: hamburger toggle, full-screen drawer on click
Decorative Elements
- Blue glow —
0 0 24px rgba(21,116,239,0.28)around the primary CTA on hover - Surface-ladder bands — alternating
#1c1f25and#15181dstrips for section rhythm - Live editor frame — the strongest visual asset; a booting environment used as illustration in the hero and key feature sections
5. Layout Principles
Spacing System
- Base unit:
4px - Scale:
0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128 - Density observation: medium-dense by marketing standards. StackBlitz packs product detail per scroll but lets running copy breathe at 1.6 line-height. The
4pxbase allows fine UI tuning while sections keep a96pxvertical rhythm.
Grid & Container
- Max content width:
1280pxwith24pxgutters - Hero bands give the live editor frame the dominant share of horizontal space
- Feature grids are typically three-column with
#24272ecards - Code/editor blocks may break out to wider widths, sometimes near full-bleed
- Vertical rhythm runs
96–128pxbetween sections
Whitespace Philosophy
- Product-forward, not airy — the editor frame and feature grids earn their space; whitespace frames the product rather than dominating.
- Editor-pane proportions — section widths echo IDE pane geometry (editor + preview split) rather than golden-ratio editorial.
- Reading comfort preserved — despite the product density, body copy stays at 16px / 1.6 and caps reading width around 720px.
Section Cadence
- Hero (live editor on
#1c1f25) → feature grid (3-column on#1c1f25) → product-demo band (often#15181dfor contrast) → logo wall / testimonial → pricing → CTA → footer - No light-section breaks — the canvas stays graphite-dark throughout
- Surface-ladder swaps (
#1c1f25↔#15181d) provide rhythm without breaking the dark discipline
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Inline highlights, fine corners |
| Standard | 4px | Mono tags, status dots, small chips |
| Comfortable | 8px | Inputs, ghost/secondary buttons, preview panes |
| Relaxed | 10px | Primary CTA — the live Try Bolt.new radius |
| Large | 12px | Cards, editor frames |
| Featured | 16px | Hero cards, modal frames |
| Pill | 9999px | Status badges, avatars only |
The radii ladder is 4 / 8 / 10 / 12 / 16. The notable token is the 10px primary button — slightly softer than the 8px used on secondary and ghost buttons, giving the blue CTA a touch more presence. Cards and the editor frame land at 12px. There are no fully-rounded CTAs; the shape vocabulary stays rectangular-with-soft-corners, like real software. Pills (9999) appear on tags and badges only.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow, surface ladder | Page canvas, body cards |
| 1 — Hairline | 1px solid rgba(255,255,255,0.08) | Default card and panel separation |
| 2 — Surface Lift | Surface bg → next ladder rung + 1px solid rgba(255,255,255,0.14) | Hover and elevated panels |
| 3 — Soft Shadow | 0 4px 12px rgba(0,0,0,0.25) plus hairline | Cards and panels lifted off canvas |
| 4 — Elevated | 0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25) | The live editor frame, modals |
| 5 — Blue Glow | 0 0 24px rgba(21,116,239,0.28) | Primary CTA hover state |
| 6 — Ring | 2px solid #1574ef at 2px offset | Keyboard focus |
Shadow Philosophy — depth comes from the surface ladder (#101216 → #15181d → #1c1f25 → #24272e → #2c3038) and faint white hairlines (rgba(255,255,255,0.08), rgba(255,255,255,0.14)). Real shadows are reserved for one job: lifting the live editor frame off the page so the “app” feels like it is floating in front of the marketing. Cards themselves are flat-on-flat. The blue glow is the single chromatic depth cue and appears only on the primary CTA hover.
8. Interaction & Motion
Easing Curves
- Standard
cubic-bezier(0.4, 0, 0.2, 1)— default for hover and state changes - Emphasized
cubic-bezier(0.2, 0, 0, 1)— hero entrance, glow expansion - Snappy
cubic-bezier(0.16, 1, 0.3, 1)— quick, slight overshoot for software-like state changes
Duration Buckets
- Fast:
150ms— colour swaps, ring fades - Standard:
240ms— button hover, card lift, dropdown open - Slow:
320ms— hero reveals, editor-frame boot reveal
Per-Component Micro-States
- Button hover (primary) — background
#1574ef→#2b80f0over 150ms; blue glow expands to0 0 24px rgba(21,116,239,0.28)over 240ms. - Button hover (secondary) — slate fill
rgba(49,61,94,0.24)→rgba(49,61,94,0.4), textrgba(255,255,255,0.8)→#ffffffover 150ms. - Card hover — background → next surface-ladder rung, border →
rgba(255,255,255,0.14), optionaltranslate-Y(-2px)over 240ms standard ease. - Link hover — colour
#e4e7ec→#ffffff(nav) or#1574ef→#2b80f0(inline) over 150ms. - Input focus — border →
#1574efplus 2px blue ringrgba(21,116,239,0.35)over 150ms. - Editor frame entrance — opacity 0→1 plus
translate-Y(16px)over 320ms emphasized, triggered by Intersection Observer; the live boot animates the preview pane filling in.
Page Transitions
- No client-side page transitions on marketing. Standard browser navigation. Hero and feature modules animate in over 320ms once in viewport.
Reduced Motion Strategy
@media (prefers-reduced-motion: reduce)— opacity-only fades at 150ms linear. Translate, glow pulse, and the editor boot-loop are removed entirely; a static editor + preview render is shown instead.
9. Accessibility & A11y
Contrast Pairs
#fffffftext on#1c1f25bg — 16.5:1 (AAA)#e4e7ecbody on#1c1f25bg — 14.3:1 (AAA)#9ba3b4muted on#1c1f25bg — 6.5:1 (AA at body sizes)#7d8694soft on#1c1f25bg — 4.5:1 (AA at body sizes)#fffffftext on#24272esurface — 15.0:1 (AAA)#fffffftext on#1574efbrand — 4.4:1 (AA for large text / UI; bold the label at small sizes)#1574efbrand on#1c1f25bg — 3.75:1 (passes 3:1 for UI components and large text)#34d399success on#1c1f25bg — 8.6:1 (AAA)#fbbf24warning on#1c1f25bg — 9.9:1 (AAA)#f87171danger on#1c1f25bg — 6.0:1 (AA)
Focus Indicators
- Default focus ring:
2px solid #1574efat2pxoffset - On the blue CTA: ring becomes
2px solid #fffffffor contrast against the blue - Form inputs use a 2px blue ring inset
ARIA Patterns
- Dialog —
role="dialog"aria-modal="true"with focus trap andaria-labelledbypointing to the title - Tablist —
role="tablist"for the editor frame’s tab strip and any file tabs - Menu —
role="menu"/menuitemfor nav dropdowns with arrow-key navigation - Region — code/editor blocks marked
<pre><code>insiderole="region"witharia-label="Code example" - Status —
aria-live="polite"on the live boot/preview so screen readers are told when the environment is ready
Keyboard Navigation
- Tab order follows DOM source order
- Skip-to-content link in header (visible on focus only)
- All interactive elements reachable via Tab
Esccloses dropdowns and modals- Arrow keys move between tabs in the editor-frame tablist
Screen Reader Hints
- Decorative blue glow and dots
aria-hidden="true" - The live editor frame labelled with
aria-label="Live in-browser editor preview"plus a visible caption - “NEW” / “BETA” / “AI” badges read aloud as “New feature”, “Beta feature”, “AI feature”
- The boot/preview state announces “Environment ready” via the polite live region
Reduced Motion
- Honoured — the editor boot loop and glow pulse are stripped to static. The blue focus ring still appears on focus but does not animate in.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, editor frame stacks editor-over-preview, hero 94→44px |
| Tablet | 640–1024px | 2-column grids, editor frame full-width, hero 94→64px |
| Desktop | 1024–1280px | 3-column feature grids, editor + preview split side by side |
| Wide | ≥1280px | Centred 1280px container with generous margins |
Touch Targets
- Buttons at
11px 18pxgive a comfortable44px+tap height - Nav links and the
Sign in/Try Bolt.newcluster use44×44pxminimum tap area on mobile - Status badges grow from
4px 10pxto6px 12pxon touch devices
Collapsing Strategy
- Hero:
94px→64px→44pxacross desktop → tablet → mobile - Body:
16pxholds; lead drops18px→16pxon mobile - Editor frame: side-by-side editor + preview → stacked editor-over-preview, each pane may scroll internally
- Feature cards: 3-column → 2-column → single column stacked
- Section spacing:
96–128px→64pxon mobile - Nav: horizontal links + CTA cluster → hamburger drawer
Image Behavior
- Live editor frame maintains
12pxradius and chrome at all sizes - Blue glow simplifies on mobile (single layer instead of layered glow)
- Logo grids reduce to 2 columns on mobile
Container Queries
- The editor frame uses container queries to switch from a horizontal split-pane (editor | preview) to a stacked tab layout when its container drops below
560px.
11. Content & Voice
Tone
Builder-direct, brisk, and product-confident. The brand’s own line — “Click. Code. Done.” — is the whole tone in three words: imperative, no throat-clearing, assumes the reader codes. StackBlitz never explains what an IDE is; it shows one booting. Body copy is technical but plain, naming real frameworks (Next.js, Vite, Node.js) and real capabilities (instant boot, no install) rather than abstractions.
Microcopy Patterns
- Button verbs —
Try Bolt.new,Start building,Open editor,Sign in. NeverGet started today, neverClick here. - Error message recipe — direct and technical:
Install failed: missing dependency. Check your package.json. - Success confirmations — terse:
Deployed.,Saved.,Environment ready. - Status labels — short caps:
NEW,BETA,AI.
Empty States
- Direct and instructive:
No projects yet. Start from a template. - Always paired with a primary CTA
Browse templatesand a secondaryNew blank project. - No mascots, no apologetic copy.
CTA Verb Conventions
- Primary:
Try Bolt.new,Start building,Open editor,Sign up - Secondary:
Sign in,See how it works,Read the docs - Tertiary:
Learn more →,View pricing →
12. Dark Mode & Theming
StackBlitz’s marketing is dark-first. The canvas is the graphite #1c1f25 from header to footer; there is no light-mode marketing surface. (The editor product has its own theming, independent of the marketing site.)
If a downstream implementation needs a light variant, the recommended swap is:
bg#1c1f25→#ffffffbg-deep#15181d→#f8fafcsurface#24272e→#f1f5f9text#ffffff→#15181dtext-muted#9ba3b4→#64748bborderrgba(255,255,255,0.08)→rgba(21,25,29,0.1)(10% graphite)brand#1574efstays — the colour is brand-locked. On a light canvas the blue still reads strongly; keep white text on the blue CTA.
The colour-locked brand blue means the Try Bolt.new CTA looks identical in light and dark — a deliberate continuity signal that ties the marketing to the product (and to Bolt.new).
13. Lineage & Influences
StackBlitz’s marketing aesthetic is the in-browser IDE turned into a landing page. The canvas is a cool graphite #1c1f25 — a neutral, slightly blue-grey near-black that reads as editor chrome rather than Vercel’s pure void or Replit’s navy ink — and the single brand colour is an electric, software-honest blue #1574ef (rgb 21, 116, 239) that does every piece of action work, from the flagship Try Bolt.new CTA to links and focus rings. That same blue is the through-line to Bolt.new, the AI app-builder StackBlitz shipped on top of its WebContainer technology, so the marketing colour and the product colour are one and the same.
The type system pairs Manrope — a rounded-geometric grotesque — for display, hitting a towering 94px at weight 600 on the hero, with Inter for body and UI at a comfortable 16px / 1.6. There is no custom foundry typeface and no serif; the identity is geometric-sans display over neutral-sans body. The defining visual move is the live editor: StackBlitz pioneered the in-browser dev environment, and WebContainers run Node.js entirely client-side, so the hero shows a real, booting editor + preview rather than a static screenshot. The lineage runs through Vercel’s dark-mode marketing discipline and the sibling cloud-IDE Replit’s “editor-as-marketing” heritage — but StackBlitz’s distinguishing claim is that the editor is actually running in your tab, which the marketing demonstrates rather than illustrates.
The brand explicitly rejects: gradient-heavy backgrounds, illustrated mascots, soft pastel palettes, pill-shaped CTAs, serif type anywhere, neon-decorative accents that compete with the action blue, and any visual move that would read as “consumer SaaS” rather than “developer tool.” Secondary chromatic energy (violet #8b5cf6, cyan #22d3ee) appears in AI/Bolt feature contexts but never on the main CTA — the blue owns the action layer, always.
Named influences:
- Bolt.new — StackBlitz’s own AI app-builder; shares the electric blue and supplies the flagship CTA
- WebContainers — the client-side Node.js runtime that makes the live in-browser editor possible
- Inter — the neutral UI/body typeface
- Manrope — the rounded-geometric grotesque used for display headlines
- Vercel — dark-mode marketing discipline, single saturated brand accent
- Replit — sibling cloud-IDE, shared editor-as-marketing visual heritage
14. Do’s and Don’ts
Do
- Use the electric blue
#1574effor every action — CTA, link, focus ring. It owns the action layer. - Put white text on the blue CTA and give it a 10px radius — that’s the live
Try Bolt.newshape. - Keep the canvas at graphite
#1c1f25— a cool blue-grey near-black, not pure black, not navy. - Use Manrope for headlines and Inter for body — the two-family split is the system.
- Go big and tight on the hero — Manrope ~94px / 600 /
-0.03em, line-height 1.0. - Show a live or live-looking editor + preview in the hero — running the product is the whole pitch.
- Use the tinted-slate fill (
rgba(49,61,94,0.24)) for the secondarySign inbutton — keep the top bar one cool temperature. - Build depth from the surface ladder (
#15181d/#1c1f25/#24272e/#2c3038) plus faint white hairlines. - Reserve real shadows for lifting the editor frame off the page; keep cards flat.
- Apply the blue glow only to the primary CTA hover — its scarcity is what makes it land.
- Let body copy breathe at 16px / 1.6 even within a product-dense layout.
Don’t
- Don’t put the AI accents (violet / cyan) on the main CTA — the blue is the only action colour.
- Don’t drift to pure black
#000000or to navy ink — StackBlitz’s graphite is intentionally neutral blue-grey. - Don’t use a serif anywhere — Manrope + Inter is the entire type system.
- Don’t pill-shape the primary CTA — it’s a 10px rounded rectangle, like real software.
- Don’t lift cards with shadows; depth is the surface ladder plus a hairline.
- Don’t apply gradients to backgrounds — flat graphite is the canvas.
- Don’t shrink the hero — the towering 94px Manrope is the brand’s confidence.
- Don’t spread the blue glow across every hover; reserve it for the primary CTA.
- Don’t use a heavy display weight (800) for the hero — 600 is confident, not shouty.
- Don’t substitute a generic mid-blue — the exact
#1574ef(rgb 21,116,239) ties the marketing to Bolt.new. - Don’t show a static screenshot when a live editor is the point — demonstrate the boot.
15. Agent Prompt Guide
Quick Color Reference
- Canvas: Graphite
#1c1f25 - Surface:
#24272e(card),#2c3038(hover),#15181d(deeper / editor interior) - Text:
#ffffffstrong,#e4e7ecbody,#9ba3b4muted - Brand: Electric Blue
#1574ef(rgb 21,116,239) — white text on it, 10px radius - Brand Hover:
#2b80f0 - Secondary fill (Sign in):
rgba(49,61,94,0.24)withrgba(255,255,255,0.8)text - Accent Purple (AI):
#8b5cf6 - Accent Cyan (AI/Beta):
#22d3ee - Border:
rgba(255,255,255,0.08)(8% white),rgba(255,255,255,0.14)(14% white) - Success:
#34d399
Example Component Prompts
- “Create a hero section on
#1c1f25graphite background. Headline at 94px Manrope weight 600, line-height 1.0, letter-spacing -0.03em, colour#ffffff. Subtitle at 18px Inter weight 400, line-height 1.6, colour#e4e7ec. Primary CTATry Bolt.new:#1574efbackground,#fffffftext, 10px radius, 11px 18px padding, 15px Inter weight 600. SecondarySign in:rgba(49,61,94,0.24)fill,rgba(255,255,255,0.8)text, no border, 8px radius.” - “Design a live editor frame hero:
#15181dbackground, 12px radius, 1px solidrgba(255,255,255,0.14)border. Top chrome with three window dots top-left and a tab strip showing the file name in mono 12px. Inside, a split pane: a code editor (mono 14px) on the left and a live preview render on the right. Drop shadow0 20px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25)to float it off the page.” - “Build a status badge:
rgba(255,255,255,0.08)background,#fffffftext, 9999px radius, 4px 10px padding, Inter 12px / 600 / 0.04em. Blue dot indicator (#1574ef, 6px) for NEW; purple (#8b5cf6) for AI; cyan (#22d3ee) for BETA.” - “Create navigation:
rgba(28,31,37,0.8)graphite background with backdrop-blur on scroll, 1px bottom borderrgba(255,255,255,0.06). White wordmark left, links in Inter 14px / 500 /#e4e7ec. Right-pinned cluster: tinted-slateSign inthen blueTry Bolt.new(#1574efbg, white text, 10px radius).” - “Design a dense feature card:
#24272ebackground, 1px solidrgba(255,255,255,0.08)border, 12px radius, 24px padding. Title in Manrope 22px / 600, colour#ffffff. Body in Inter 16px / 400 / 1.6, colour#9ba3b4. Hover: surface →#2c3038, border →rgba(255,255,255,0.14), translate-Y(-2px).” - “Build a focused input:
#1f2127background, 1px solidrgba(255,255,255,0.14)border, 8px radius, 10px 14px padding, Inter 15px#ffffff, placeholder#7d8694. On focus: border →#1574efand a 2px blue ringrgba(21,116,239,0.35).”
Iteration Guide
- If the page reads “consumer SaaS” rather than “developer tool,” drop pillowy radii (CTA to 10px, cards to 12px) and add a live-looking editor frame.
- If the blue looks dull, check the canvas — it must be graphite
#1c1f25(cool blue-grey), not pure black or navy. The blue reads cleaner against neutral graphite. - The exact brand blue is
#1574ef(rgb 21,116,239) — don’t substitute a generic mid-blue; the precise value ties the marketing to Bolt.new. - White text on the blue CTA only clears AA at large/UI sizes (4.4:1) — keep the label at weight 600 and don’t shrink it below 15px.
- The hero should be big: Manrope ~94px / 600 /
-0.03emat line-height 1.0. If it feels timid, the size — not the weight — is what to push. - Keep the secondary
Sign inbutton as a tinted-slate fill (rgba(49,61,94,0.24)), not an outline — it keeps the top bar in one cool temperature with the canvas. - Resist shadows for card depth — use the surface ladder (
#15181d→#1c1f25→#24272e→#2c3038) plus argba(255,255,255,0.08)hairline. Save real shadow for the editor frame. - The blue glow is scarce — apply only to the primary CTA hover. Spreading it across every hover dilutes the cue.
Drop stackblitz into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add stackblitz 2 · ship landing page
npx agentkit init --design stackblitz