light · dark · sans · developer · deploy · modern
DESIGN.md inspired by Netlify
White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links.
By webdesignhot · www.netlify.com ↗
$ npx @webdesignhot/design-md add netlify
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. Aesop Monochrome-warm apothecary — ivory canvas, charcoal type, Suisse Int'l set small, 0px corners. 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. Amplitude Light-canvas digital-analytics surface — IBM Plex Sans, grey #565656 body, black full-pill CTAs and a signature #1e61f0 blue. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Anytype Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. 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. Black Forest Labs Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout. 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. Captions Near-white studio canvas, an Exposure display, and a violet brand keyed off a full crayon-box of CSS color vars. Caraway Wholesome non-toxic-cookware DTC — Suisse Works serif on warm off-white, deep teal-green pill CTAs, pastel colorway palette. 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. Cloudflare Infrastructure-grade calm — white canvas, dark hero band, FT Kunst Grotesk, signature Cloudflare orange, full-pill CTAs. 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. Coda White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. 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. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. 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. Craft Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. 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. dbt Labs dbt orange 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. Drizzle ORM Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM. 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. Glean White enterprise canvas, near-black indigo headlines, and one electric 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. Graza Squeeze-bottle olive-oil DTC — quirky GT Alpina Typewriter on peachy-cream, olive type, chartreuse-lime CTAs at 32px. 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. Harvey Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. 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. HeyGen Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright. 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. Inngest Durable workflows on a near-black canvas — Whyte display, muted gold CTAs, sharp 0px edges. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Intercom Cream canvas, near-black Saans display, and electric-cobalt 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. Lambda Near-black 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. Liquid Death Black canvas, condensed all-caps Acumin Pro, stark black-and-white — heavy-metal brutalism for canned water. 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. Loom White canvas, Charlie Display sans, and a confident Atlassian blue pill — async video that feels like a calm, friendly workspace. LottieFiles White-canvas animation studio — DM Sans display at 96px, Inter body, near-black text, one signature teal #019d91. 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 Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent. 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. Mejuri Monochrome luxury — white canvas, near-black ink, Syndicat Grotesk small caps and a Simon Mono accent. The jewelry photography does all the color work. 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. Our Place Warm-heritage cookware DTC — Cheltenham serif at light 300 on a cream canvas, terracotta SHOP NOW CTAs, Plaid body. 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. Penpot Open-source design-and-code platform — dark hero, Work Sans display, mint-green action surface on a white canvas. 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. Prisma White-paper canvas, navy ink, a single confident teal — the type-safe data layer dressed as documentation. 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 Relume Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder. 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. Scale AI White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → 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. Sierra Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SKIMS Nude-neutral minimal luxury — cream canvas, dark photographic hero, warm near-black #2d2a26, sharp 0px. 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. Spline Pure-black 3D-design canvas with electric-blue CTAs and a playful multi-color accent set — the browser becomes the viewport. 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. Stability AI A near-black studio floor where Archivo headlines run light and a single lavender pill carries the only colour. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. 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. Synthesia A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action. 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 — Temporal Near-black engineering canvas, Aeonik at hairline-light 300, signature indigo CTA — durable-execution gravity for distributed-systems people. 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. Tinybird Near-black developer canvas lit by one bright mint-green — managed ClickHouse with sharp, zero-radius CTAs. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Todoist Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. 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. Trigger.dev Background jobs in the dark — Satoshi on near-black, one electric lime for action. 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. Upstash Serverless data, daylight calm — a pale-grey canvas, deep green-black type, and one electric Upstash green. 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". Vapi Near-black developer canvas lit by a signature lime and a playful multi-color set — Avantt display at 80px over Season Sans body, cream text, r12 CTAs. 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. Vuori Coastal-California performance calm — Aktiv Grotesk on pure white, warm near-black `#333333` ink, restrained small type (28px h1), photography-led, sharp 0px corners. Premium-athletic that never raises its voice. 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. Windsurf Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD. 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. Wispr Flow Pale lemon-cream paper, EB Garamond at 120px, and a lavender download pill — voice dictation that dresses like a literary journal. 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. xAI White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism. 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
theme: light
- bg
#ffffff - bg-hero
#181a1c - bg-ink
#0a0a0c - surface
#e8e6f0 - surface-accent
#c6bfd9 - text AAA · 17.5
#181a1c - text-strong
#000000 - text-secondary
#45455f - text-tertiary
#757575 - text-faint — · 2.8
#9a9ab0 - text-on-hero
#e6ecf2 - text-on-hero-soft
#cfd9de - brand — · 1.5
#32e6e2 - brand-deep
#014847 - brand-hover
#23d4d0 - brand-soft
rgba(50, 230, 226, 0.12) - on-brand
#181a1c - link
#5653ed - link-hover
#403fc9 - link-soft
rgba(86, 83, 237, 0.10) - border — · 1.4
#cfd9de - border-soft
#e3e9ec - border-strong — · 2.1
#aab6bd - shadow-ambient
rgba(24, 26, 28, 0.04) - shadow-card
rgba(24, 26, 28, 0.06) - shadow-elev
rgba(24, 26, 28, 0.10) - shadow-deep
rgba(24, 26, 28, 0.16) - scrim
rgba(10, 10, 12, 0.50) - gradient-teal
linear-gradient(135deg, #32e6e2 0%, #5653ed 100%) - success
#1aa179 - success-soft
rgba(26, 161, 121, 0.12) - warning
#d98b00 - warning-soft
rgba(217, 139, 0, 0.12) - danger
#e5484d - danger-soft
rgba(229, 72, 77, 0.12) - info
#5653ed - info-soft
rgba(86, 83, 237, 0.10)
Ship faster than ever.
display-hero Figtree 80px w800 -0.03em
Ship faster than ever.
display-xl Figtree 64px w800 -0.025em
Ship faster than ever.
h1 Figtree 64px w800 -0.025em
Ship faster than ever.
display-lg Figtree 56px w800 -0.02em
Built for teams that ship.
h2 Figtree 48px w800 -0.018em
A complete kit
h3 Figtree 32px w700 -0.012em
The quick brown fox jumps over the lazy dog.
h4 Figtree 24px w700 -0.006em
The quick brown fox jumps over the lazy dog.
quote Figtree 24px w500 -0.01em
The quick brown fox jumps over the lazy dog.
h5 Figtree 20px w600 0
The quick brown fox jumps over the lazy dog.
body-lg "Instrument Sans" 18px w400 0
The quick brown fox jumps over the lazy dog.
body-md "Instrument Sans" 16px w400 0
The quick brown fox jumps over the lazy dog.
button-md "Instrument Sans" 16px w600 0
The quick brown fox jumps over the lazy dog.
nav-link "Instrument Sans" 15px w500 0
OUR DESIGN SYSTEM
section-label "Instrument Sans" 14px w600 0.04em
The quick brown fox jumps over the lazy dog.
body-sm "Instrument Sans" 14px w400 0
The quick brown fox jumps over the lazy dog.
button-sm "Instrument Sans" 14px w600 0
npx @webdesignhot/design-md add stripe
code-block ui-monospace 14px w400 0
npx @webdesignhot/design-md add stripe
code-inline ui-monospace 14px w500 0
The quick brown fox jumps over the lazy dog.
eyebrow "Instrument Sans" 13px w600 0.06em
OUR DESIGN SYSTEM
caption "Instrument Sans" 13px w400 0
OUR DESIGN SYSTEM
label "Instrument Sans" 13px w500 0
OUR DESIGN SYSTEM
label-strong "Instrument Sans" 13px w600 0.01em
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 24px
- step-5 32px
- step-6 48px
- step-7 64px
- step-8 96px
- step-9 128px
- micro
2px - sm
4px - md
8px - lg
12px - xl
16px - pill
360px
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 7/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 → —
- muted → text-secondary
- border → border
- ring → brand
Netlify's design system runs a brightness flip — pure-white `#ffffff` marketing canvas alternating with near-black `#181a1c` hero and feature bands — paired with a two-axis colour discipline that distinguishes it from monochrome-blue dev-tool peers. The display face is **Figtree** set heavy (weight 800 at 64px H1), a geometric-humanist sans that reads as friendly-engineered; body copy is **Instrument Sans**, a more open grotesque, in the brand's signature near-black ink `#181a1c` (not pure black). The chromatic signature is electric **teal `#32e6e2`** (rgb 50, 230, 226) — it fills the primary `Sign up` CTA as a 360px full-pill with near-black text, and accents dark grounds. Links take a separate direction: **indigo `#5653ed`**, a cool blue-violet that anchors navigation and inline links over lavender surface tints (`#e8e6f0`) and slate-grey hairlines (`#cfd9de`). Where Vercel reserves a single blue for links-and-focus-only and inverts CTAs to near-black, Netlify *fills* its primary action with the electric teal and reserves indigo for links — a louder, friendlier action language over the same white/near-black brightness alternation. The lineage traces to the Jamstack-era developer-platform aesthetic Netlify itself helped define, plus the broader humanist-geometric-display trend (Figtree, Instrument Sans) that softened dev-tool branding away from pure terminal-brutalism.
- The display identity — heavy geometric-humanist sans at weight 800; the friendly-engineered headline silhouette.
- Open-grotesque body face; more aperture and warmth than a neutral grotesque, paired with Figtree for the calm-precise reading register.
- Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it.
- The developer-platform-as-editorial register — deploy logs, build status, and framework grids treated as marketing content.
- Developer-product-as-magazine layout heritage; dense feature bands and gradient accents that the modern deploy-platform marketing surface descends from.
- Systematic semantic ramp thinking — paired light/dark token sets (--*--light / --*--dark) with accessible step contrast.
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: Netlify
tagline: 'White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links.'
updated_at: 2026-05-29T21:44:05.216Z
published_at: 2026-05-29T21:44:05.216Z
author: webdesignhot
source_url: https://www.netlify.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools, saas]
tags: [light, dark, sans, developer, deploy, modern]
preview_swatch: ['#ffffff', '#32e6e2', '#5653ed']
related: [vercel, supabase, render]
description: 'Netlify builds its identity on a brightness flip: a pure-white `#ffffff` marketing canvas that drops into near-black hero and feature bands where the H1 renders in near-white `#e6ecf2`. The display face is **Figtree** set heavy — weight 800 at 64px for the H1, a confident geometric-humanist sans that reads as friendly-engineered rather than brutalist. Body copy switches to **Instrument Sans**, a slightly more open grotesque, at near-black `#181a1c` (the brand''s signature ink — not pure black). The chromatic signature is electric **teal `#32e6e2`** (rgb 50, 230, 226): it fills the primary `Sign up` CTA as a full-pill (360px radius) with near-black text on top, and shows up as the accent on dark grounds. Links lean a different direction entirely — indigo `#5653ed`, a cool blue-violet that anchors the secondary palette alongside lavender surface tints (`#e8e6f0`) and slate-grey hairline borders (`#cfd9de`). The result is a developer-platform register that feels modern and approachable: white-then-dark editorial bands, heavyweight humanist display, a single electric accent for action, and a calm indigo for navigation. Where Vercel commits to a single monochrome-blue discipline, Netlify runs a two-axis system — teal for action, indigo for links — over a white/near-black brightness alternation.'
# 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
muted: text-secondary
border: border
ring: brand
themes:
default: light
available: [light, dark]
switch-via: 'data-theme attribute on <html> (--light / --dark token suffixes); persisted in localStorage; respects prefers-color-scheme on first paint'
colors:
light:
bg: '#ffffff' # page canvas — pure white, --background-color--light
bg-hero: '#181a1c' # near-black hero / feature inversion band
bg-ink: '#0a0a0c' # deepest band — footer, peak-contrast section
surface: '#e8e6f0' # lavender-grey card / inset surface, --background-color-surface--light
surface-accent: '#c6bfd9' # second-tier accent surface, --background-color-accent--light
text: '#181a1c' # primary text — the brand's signature near-black ink
text-strong: '#000000' # peak display / pure black, --color-primary--light
text-secondary: '#45455f' # supporting copy — cool slate-violet, --color-secondary--light
text-tertiary: '#757575' # captions, meta, search heading (--color-text-weak)
text-faint: '#9a9ab0' # placeholder, disabled, faintest meta
text-on-hero: '#e6ecf2' # near-white H1/body on the dark hero band
text-on-hero-soft: '#cfd9de' # secondary text on dark band, mirrors --color--dark
brand: '#32e6e2' # the signature electric teal — primary CTA fill (rgb 50,230,226)
brand-deep: '#014847' # deep-teal text on bright-teal fills (e.g. cookie CTA)
brand-hover: '#23d4d0' # darker teal, primary CTA hover
brand-soft: 'rgba(50, 230, 226, 0.12)' # soft teal wash on dark grounds, status pills
on-brand: '#181a1c' # near-black text on the teal pill
link: '#5653ed' # inline + nav link colour — indigo, --color-link--light
link-hover: '#403fc9' # darker indigo on hover
link-soft: 'rgba(86, 83, 237, 0.10)' # indigo wash for selected nav / active TOC
border: '#cfd9de' # default hairline — cool slate grey, --border-color--light
border-soft: '#e3e9ec' # quietest separation
border-strong: '#aab6bd' # focused inputs, outlined buttons
shadow-ambient: 'rgba(24, 26, 28, 0.04)'
shadow-card: 'rgba(24, 26, 28, 0.06)'
shadow-elev: 'rgba(24, 26, 28, 0.10)'
shadow-deep: 'rgba(24, 26, 28, 0.16)'
scrim: 'rgba(10, 10, 12, 0.50)'
gradient-teal: 'linear-gradient(135deg, #32e6e2 0%, #5653ed 100%)' # teal→indigo brand sweep
success: '#1aa179'
success-soft: 'rgba(26, 161, 121, 0.12)'
warning: '#d98b00'
warning-soft: 'rgba(217, 139, 0, 0.12)'
danger: '#e5484d'
danger-soft: 'rgba(229, 72, 77, 0.12)'
info: '#5653ed'
info-soft: 'rgba(86, 83, 237, 0.10)'
dark:
bg: '#181821' # near-black indigo-tinted canvas, --background-color--dark
bg-elev: '#20202c' # subtle elevation — section bands
bg-deeper: '#101019' # deepest tier — footer, code fills
surface: 'rgba(98, 71, 230, 0.10)' # indigo-tinted card surface, --background-color-surface--dark
surface-accent: 'rgba(200, 205, 254, 0.08)' # second-tier accent, --background-color-accent--dark
text: '#cfd9de' # primary text — cool near-white, --color--dark
text-strong: '#f0f1ff' # peak display — indigo-white, --color-primary--dark
text-secondary: '#8b8dac' # supporting copy — muted lavender, --color-secondary--dark
text-tertiary: '#6c6e88' # captions, meta
text-faint: '#4d4f66' # placeholder, disabled
brand: '#32e6e2' # teal unchanged — reads vividly on dark
brand-deep: '#014847'
brand-hover: '#5cf0ec' # lifted teal on dark
brand-soft: 'rgba(50, 230, 226, 0.16)'
on-brand: '#181a1c' # near-black text on teal pill (held across themes)
link: '#8886ff' # lifted indigo for legibility on dark, --color-link--dark
link-hover: '#a4a2ff'
link-soft: 'rgba(136, 134, 255, 0.14)'
border: 'rgba(200, 205, 254, 0.18)' # translucent indigo hairline, --border-color--dark
border-soft: 'rgba(200, 205, 254, 0.10)'
border-strong: 'rgba(200, 205, 254, 0.30)'
shadow-ambient: 'rgba(0, 0, 0, 0.40)'
shadow-card: 'rgba(0, 0, 0, 0.50)'
shadow-elev: 'rgba(0, 0, 0, 0.60)'
shadow-deep: 'rgba(0, 0, 0, 0.72)'
scrim: 'rgba(0, 0, 0, 0.70)'
gradient-teal: 'linear-gradient(135deg, #32e6e2 0%, #8886ff 100%)'
success: '#3dd9a3'
success-soft: 'rgba(61, 217, 163, 0.16)'
warning: '#f0b429'
warning-soft: 'rgba(240, 180, 41, 0.16)'
danger: '#ff6369'
danger-soft: 'rgba(255, 99, 105, 0.18)'
info: '#8886ff'
info-soft: 'rgba(136, 134, 255, 0.14)'
typography:
display:
family: 'Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
weights: [500, 600, 700, 800]
opentype-features: ['kern', 'liga']
body:
family: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern', 'liga']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
weights: [400, 500]
opentype-features: ['liga', 'calt', 'tnum']
scale:
display-hero: { size: 80, weight: 800, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-xl: { size: 64, weight: 800, lineHeight: 1.04, tracking: '-0.025em', family: display }
display-lg: { size: 56, weight: 800, lineHeight: 1.05, tracking: '-0.02em', family: display }
h1: { size: 64, weight: 800, lineHeight: 1.05, tracking: '-0.025em', family: display }
h2: { size: 48, weight: 800, lineHeight: 1.10, tracking: '-0.018em', family: display }
h3: { size: 32, weight: 700, lineHeight: 1.18, tracking: '-0.012em', family: display }
h4: { size: 24, weight: 700, lineHeight: 1.25, tracking: '-0.006em', family: display }
h5: { size: 20, weight: 600, lineHeight: 1.30, tracking: '0', family: display }
eyebrow: { size: 13, weight: 600, lineHeight: 1.40, tracking: '0.06em', family: body, transform: uppercase }
section-label: { size: 14, weight: 600, lineHeight: 1.40, tracking: '0.04em', family: body, transform: uppercase }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-md: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
caption: { size: 13, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0', family: body }
label-strong: { size: 13, weight: 600, lineHeight: 1.40, tracking: '0.01em', family: body }
button-md: { size: 16, weight: 600, lineHeight: 1.20, tracking: '0', family: body }
button-sm: { size: 14, weight: 600, lineHeight: 1.20, tracking: '0', family: body }
nav-link: { size: 15, weight: 500, lineHeight: 1.20, tracking: '0', family: body }
code-block: { size: 14, weight: 400, lineHeight: 1.60, tracking: '0', family: mono, opentype: ['liga', 'calt'] }
code-inline: { size: 14, weight: 500, lineHeight: 1.40, tracking: '0', family: mono }
quote: { size: 24, weight: 500, lineHeight: 1.35, tracking: '-0.01em', family: display }
radius:
micro: 2
sm: 4 # status badges, cookie-banner buttons, dense chips
md: 8 # inputs, secondary buttons, code chips
lg: 12 # cards, dashboard tiles, modals
xl: 16 # large feature cards, hero panels
pill: 360 # the signature CTA pill — full-round at 360px (effectively 9999)
spacing:
base: 4
scale: [4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
layout:
page-width: 1280
dense-width: 1440
prose-width: 720
header-height: 64
components:
button-primary:
bg: '#32e6e2'
color: '#181a1c'
radius: 360
padding: '0 24px'
height: 48
font: 'Instrument Sans 16px / 600'
hover-bg: '#23d4d0'
use: 'Primary CTA — electric-teal full-pill with near-black text. Sign up, Get started. The signature action shape.'
button-secondary-on-dark:
bg: 'rgba(255, 255, 255, 0.10)'
color: '#32e6e2'
radius: 360
padding: '0 24px'
height: 48
border: '1px solid rgba(255, 255, 255, 0.14)'
font: 'Instrument Sans 16px / 600'
use: 'Secondary CTA on dark hero — translucent white glass pill with teal label. Talk to sales.'
button-secondary:
bg: '#ffffff'
color: '#181a1c'
border: '1px solid #cfd9de'
radius: 360
padding: '0 22px'
height: 48
font: 'Instrument Sans 16px / 600'
hover-border: '#aab6bd'
use: 'Outlined twin on white — slate-grey hairline, near-black label. Learn more, Contact us.'
button-ghost:
bg: 'transparent'
color: '#181a1c'
radius: 8
padding: '0 12px'
height: 40
font: 'Instrument Sans 15px / 500'
hover-bg: '#e8e6f0'
use: 'Quiet third action — nav links, footer secondaries, in-card actions.'
button-link:
bg: 'transparent'
color: '#5653ed'
underline: 'none at rest, 1px on hover'
font: 'Instrument Sans 15px / 500'
use: 'Text-link CTA — indigo, hover reveals underline. See docs, View pricing.'
card:
bg: '#ffffff'
border: '1px solid #cfd9de'
radius: 12
padding: '24px 28px'
shadow: 'rgba(24, 26, 28, 0.06) 0 4px 16px -4px'
use: 'Default feature card — white fill, slate hairline border, soft single-layer shadow.'
card-surface:
bg: '#e8e6f0'
border: 'none'
radius: 12
padding: '28px'
shadow: 'none'
use: 'Lavender-grey inset card — quiet grouping on white sections, no border, no shadow.'
card-dark:
bg: '#181a1c'
color: '#e6ecf2'
border: '1px solid rgba(255, 255, 255, 0.08)'
radius: 16
padding: '32px'
use: 'Inverted feature / testimonial card on dark band — near-white text, teal accents.'
input:
bg: '#ffffff'
color: '#181a1c'
radius: 8
height: 44
padding: '0 14px'
border: '1px solid #cfd9de'
font: 'Instrument Sans 16px / 400'
placeholder-color: '#9a9ab0'
focus-border: '#5653ed'
focus-ring: '0 0 0 3px rgba(86, 83, 237, 0.18)'
use: 'Form fields, search bar — 44px height, 8px radius, indigo focus ring.'
badge-brand:
bg: 'rgba(50, 230, 226, 0.16)'
color: '#014847'
radius: 4
padding: '3px 10px'
font: 'Instrument Sans 12px / 600 / uppercase / 0.04em'
use: 'Status pill on light — NEW, BETA, LIVE. Teal wash with deep-teal caps.'
badge-tag:
bg: '#e8e6f0'
color: '#45455f'
radius: 4
padding: '3px 10px'
font: 'Instrument Sans 12px / 500'
use: 'Tag chip — framework, region, version labels in lavender-grey.'
nav-top:
bg: 'rgba(255, 255, 255, 0.85)'
backdrop-filter: 'blur(12px) saturate(160%)'
height: 64
border-bottom: '1px solid #e3e9ec'
use: 'Sticky top nav — translucent white fill with blur (dark inversion on dark hero pages).'
code-block:
bg: '#181a1c'
color: '#e6ecf2'
radius: 12
padding: '20px 24px'
border: 'none'
font: 'ui-monospace 14px / 400 / 1.60 line-height'
use: 'Code-tour block — near-black fill with near-white mono, teal-tinted syntax highlights.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-out-soft: 'cubic-bezier(0.0, 0, 0.2, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
duration-page: 400
button-hover: 'teal bg deepens 240ms standard; pill scales 1.0→1.02 on hover'
link-hover: 'underline grows 150ms; indigo holds'
card-hover: 'shadow tier intensifies + 2px lift over 240ms standard'
scroll-reveal: 'sections fade + 16px rise over 320ms ease-out-soft entering viewport'
reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppress, opacity-only fades, durations halve'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(24, 26, 28, 0.04) 0 1px 3px'
card: 'rgba(24, 26, 28, 0.06) 0 4px 16px -4px'
elevated: 'rgba(24, 26, 28, 0.10) 0 8px 28px -8px'
popover: 'rgba(24, 26, 28, 0.16) 0 16px 40px -12px'
modal: 'rgba(24, 26, 28, 0.24) 0 28px 72px -16px'
ring: '0 0 0 3px rgba(86, 83, 237, 0.18)'
accessibility:
contrast-text-on-bg: 15.3 # #181a1c on #ffffff — AAA at all sizes
contrast-text-secondary-on-bg: 8.4 # #45455f on #ffffff — AAA at body sizes
contrast-text-tertiary-on-bg: 4.6 # #757575 on #ffffff — AA at body sizes
contrast-link-on-bg: 6.0 # #5653ed indigo on #ffffff — AA at body / AAA at large
contrast-on-brand-on-teal: 12.3 # #181a1c on #32e6e2 teal pill — AAA at all sizes
contrast-text-on-hero: 14.6 # #e6ecf2 on #181a1c hero — AAA at all sizes
contrast-teal-on-hero: 9.7 # #32e6e2 teal on #181a1c hero — AAA at large / AA small
focus-ring: '3px solid rgba(86, 83, 237, 0.18) indigo + 2px offset'
reduced-motion-honored: true
touch-target-min: 44
dark-mode: optional # Netlify ships a system-aware dark token set (--*--dark vars)
colors-dark:
bg: '#181821' # near-black indigo-tinted canvas
bg-elev: '#20202c' # subtle elevation
bg-deeper: '#101019' # deepest tier
text: '#cfd9de' # cool near-white body
text-strong: '#f0f1ff' # peak display indigo-white
text-secondary: '#8b8dac' # supporting lavender
brand: '#32e6e2' # teal unchanged
on-brand: '#181a1c' # near-black text on teal pill
link: '#8886ff' # lifted indigo
border: 'rgba(200, 205, 254, 0.18)'
lineage:
summary: 'Netlify''s design system runs a brightness flip — pure-white `#ffffff` marketing canvas alternating with near-black `#181a1c` hero and feature bands — paired with a two-axis colour discipline that distinguishes it from monochrome-blue dev-tool peers. The display face is **Figtree** set heavy (weight 800 at 64px H1), a geometric-humanist sans that reads as friendly-engineered; body copy is **Instrument Sans**, a more open grotesque, in the brand''s signature near-black ink `#181a1c` (not pure black). The chromatic signature is electric **teal `#32e6e2`** (rgb 50, 230, 226) — it fills the primary `Sign up` CTA as a 360px full-pill with near-black text, and accents dark grounds. Links take a separate direction: **indigo `#5653ed`**, a cool blue-violet that anchors navigation and inline links over lavender surface tints (`#e8e6f0`) and slate-grey hairlines (`#cfd9de`). Where Vercel reserves a single blue for links-and-focus-only and inverts CTAs to near-black, Netlify *fills* its primary action with the electric teal and reserves indigo for links — a louder, friendlier action language over the same white/near-black brightness alternation. The lineage traces to the Jamstack-era developer-platform aesthetic Netlify itself helped define, plus the broader humanist-geometric-display trend (Figtree, Instrument Sans) that softened dev-tool branding away from pure terminal-brutalism.'
influences:
- name: 'Figtree (Erik Kennedy, open-source)'
role: 'The display identity — heavy geometric-humanist sans at weight 800; the friendly-engineered headline silhouette.'
url: 'https://fonts.google.com/specimen/Figtree'
- name: 'Instrument Sans (Rajputana Custom Type)'
role: 'Open-grotesque body face; more aperture and warmth than a neutral grotesque, paired with Figtree for the calm-precise reading register.'
url: 'https://fonts.google.com/specimen/Instrument+Sans'
- name: 'Vercel'
role: 'Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it.'
url: 'https://vercel.com'
- name: 'Jamstack (the architecture Netlify coined)'
role: 'The developer-platform-as-editorial register — deploy logs, build status, and framework grids treated as marketing content.'
url: 'https://jamstack.org'
- name: 'Stripe'
role: 'Developer-product-as-magazine layout heritage; dense feature bands and gradient accents that the modern deploy-platform marketing surface descends from.'
url: 'https://stripe.com'
- name: 'Radix Colors'
role: 'Systematic semantic ramp thinking — paired light/dark token sets (--*--light / --*--dark) with accessible step contrast.'
url: 'https://www.radix-ui.com/colors'
---
## 1. Visual Theme & Atmosphere
Netlify's marketing site is built on a single structural move: a **brightness flip**. The canvas is pure white `#ffffff` — not the near-white `#fafafa` that Vercel commits to, but full `#ffffff` — and it alternates with near-black `#181a1c` hero and feature bands. The hero lands dark, the H1 renders in near-white `#e6ecf2`, and as you scroll the page breathes between white editorial sections and dark high-contrast bands. The alternation is *brightness-based*, not colour-based: the page never shifts hue between sections, only luminance. This is the deploy-platform register — a site that wants to feel like a control surface, switching between the bright dashboard and the dark terminal.
What carries the brand is the **type weight**. The display face is **Figtree**, set heavy at weight 800 — the H1 is 64px / 800 with tight `-0.025em` tracking. Figtree is a geometric-humanist sans (open-source, by Erik Kennedy) with rounded terminals and generous lowercase apertures; at 800 it reads as confident and friendly rather than brutalist. This is the key differentiator from Vercel's restrained 600-weight Geist: Netlify *wants* the headline to feel warm and emphatic. Body copy switches to **Instrument Sans**, a more open grotesque, at near-black `#181a1c` — the brand's signature ink, deliberately not pure black, which softens long-form reading. The Figtree-display / Instrument-body pairing is the typographic identity: heavy humanist display, calm open-grotesque body.
The chromatic signature is **electric teal `#32e6e2`** (rgb 50, 230, 226). This is the single loudest colour in the system, and Netlify uses it where it counts most: the primary `Sign up` CTA is a full **360px pill** filled with teal, near-black `#181a1c` text on top. The teal is the action colour — it fills buttons, accents the dark hero, and signals "deploy / go." This is the opposite of Vercel's discipline: where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify *fills* its primary action with the brand colour. The teal-on-near-black pill is the brand's most recognisable single component.
The second chromatic axis is **indigo `#5653ed`** — a cool blue-violet reserved for links and navigation. The two-axis system (teal for action, indigo for links) is what makes Netlify distinctive: most dev-tool brands run a single accent hue, but Netlify separates "action" from "navigation" chromatically. The indigo carries through to lavender surface tints (`#e8e6f0` for inset cards), a slate-grey hairline border (`#cfd9de`), and the cool slate-violet of secondary text (`#45455f`). The supporting palette is cool and lavender-shaded; the action accent is hot teal. That tension — cool support, hot action — is the brand's chromatic engine.
The atmospheric vocabulary that captures Netlify's feeling: *white-then-dark, brightness-flipped, Figtree-heavy, electric-teal-action, indigo-link, lavender-surface, slate-hairline, full-pill-CTA, deploy-register, friendly-engineered, near-black-ink, humanist-confident, two-axis-chroma.* Every surface lands like it was designed by a team who wanted their developer platform to feel approachable and modern — terminal-comfortable on the dark bands, dashboard-bright on the white ones, with a single electric accent that says *ship it*.
**Key Characteristics**
- Pure white `#ffffff` canvas alternating with near-black `#181a1c` hero / feature bands — brightness-based section rhythm
- Near-black `#181a1c` body ink — the brand's signature, deliberately not pure black, for softer long-form reading
- **Figtree** display set heavy at weight 800 — geometric-humanist, friendly-confident, 64px H1 with `-0.025em` tracking
- **Instrument Sans** body — open grotesque, calm and precise, paired with the heavy Figtree display
- Electric **teal `#32e6e2`** (rgb 50, 230, 226) as the action colour — fills the primary CTA pill
- Primary CTA is a **360px full-pill** — teal fill, near-black `#181a1c` text, the signature action shape
- Indigo `#5653ed` reserved for links and navigation — a separate chromatic axis from the teal action colour
- Lavender-grey surface tint `#e8e6f0` for inset cards; cool slate-grey hairline `#cfd9de` for borders
- Two-axis chroma: hot teal for action, cool indigo for links — over a cool lavender-shaded support palette
- 1280px page width, 720px reading column; 64px sticky translucent-white top nav
- Near-white `#e6ecf2` text and teal accents on the dark hero bands
- System-aware dark mode (`--*--dark` token set) — indigo-tinted near-black canvas, lifted indigo links
## 2. Color Palette & Roles
### Primary
- **Canvas** (`#ffffff` → `--background-color--light`): the page background — pure white, full `#ffffff`. The bright half of the brightness flip; never cream, never near-white.
- **Hero Band** (`#181a1c` → derived from `--color` ink): the near-black inversion band behind the hero H1 and dark feature sections. The dark half of the flip.
- **Body Text** (`#181a1c` → `--color--light`): primary text and headlines — the brand's signature near-black ink at ~10% lightness. Slightly warm grain vs pure black; 15.3:1 against the canvas.
- **Display Pure-Black** (`#000000` → `--color-primary--light`): rare absolute black for peak emphasis, logo wordmark, contrast-critical UI.
### Brand & Sub-Brand
- **Electric Teal** (`#32e6e2` → CTA fill, rgb 50, 230, 226): the canonical brand colour and action accent. Fills the primary CTA pill, accents dark grounds. The system's single loudest colour.
- **Deep Teal** (`#014847`): the near-black-teal used as *text* on bright-teal fills (e.g. the cookie-consent "Accept All" button) — a darker, more saturated teal that holds AAA contrast on the bright teal ground.
- **Brand Hover** (`#23d4d0`): darker teal for primary-CTA hover on light grounds.
- **Brand Soft** (`rgba(50, 230, 226, 0.12)`): soft teal wash for status pills and dark-ground accents.
### Accent
- **Indigo** (`#5653ed` → `--color-link--light`): the link/navigation axis — a cool blue-violet. This is the *second* brand colour, distinct from the teal action colour. Anchors inline links, nav links, and the focus ring.
- **Lavender Surface** (`#e8e6f0` → `--background-color-surface--light`): the indigo-shaded surface tint for inset cards and quiet groupings.
- **Lavender Accent** (`#c6bfd9` → `--background-color-accent--light`): the second-tier accent surface, a deeper lavender for nested or emphasised inset blocks.
### Interactive
- **Link** (`#5653ed` → `--color-link--light`): inline and nav links — indigo, no underline at rest, 1px underline on hover.
- **Link Hover** (`#403fc9`): darker indigo on hover (paired with the growing underline).
- **Selected** (`#5653ed` text on `rgba(86, 83, 237, 0.10)` background): active nav, current TOC entry, selected pricing tier.
- **Focus** (`rgba(86, 83, 237, 0.18)` 3px ring): keyboard focus indicator — indigo, matching the link axis.
- **Disabled** (`#9a9ab0` text): disabled controls drop to the faint neutral, no colour cue.
### Neutral Scale
The neutral ramp is cool and lavender-shaded — it leans toward the indigo axis rather than pure grey:
- **Pure White** (`#ffffff`) — canvas, card surface
- **Border Soft** (`#e3e9ec`) — quietest separation
- **Lavender Surface** (`#e8e6f0`) — inset card / surface tint
- **Border** (`#cfd9de` → `--border-color--light`) — default hairline, cool slate grey
- **Border Strong** (`#aab6bd`) — focused inputs, outlined buttons
- **Text Faint** (`#9a9ab0`) — placeholder, disabled
- **Text Tertiary** (`#757575` → `--color-text-weak`) — captions, meta, search heading
- **Text Secondary** (`#45455f` → `--color-secondary--light`) — supporting copy, cool slate-violet
- **Text** (`#181a1c` → `--color--light`) — primary text, headlines, near-black ink
- **Text Strong** (`#000000`) — peak display
### Surface & Borders
- **Canvas** (`#ffffff`) — the bright background
- **Hero Band** (`#181a1c`) — the dark inversion band
- **Bg Ink** (`#0a0a0c`) — deepest band; footer, peak-contrast section
- **Lavender Surface** (`#e8e6f0`) — inset card surface on white sections
- **Lavender Accent** (`#c6bfd9`) — second-tier accent surface
- **Border Default** (`#cfd9de`) — cool slate-grey hairline at ~84% lightness
- **Border Soft** (`#e3e9ec`) — quietest separation
- **Border Strong** (`#aab6bd`) — outlined buttons, focused inputs
### Shadow Colors
Netlify shadows are tinted with the body-ink colour (`rgba(24, 26, 28, …)`) rather than pure black, keeping them soft and warm on the white canvas. Cards lift via a single soft diffusion layer plus the slate hairline border.
- `rgba(24, 26, 28, 0.04) 0 1px 3px` — ambient
- `rgba(24, 26, 28, 0.06) 0 4px 16px -4px` — card (the signature soft lift)
- `rgba(24, 26, 28, 0.10) 0 8px 28px -8px` — elevated dropdown
- `rgba(24, 26, 28, 0.16) 0 16px 40px -12px` — popover
- `rgba(24, 26, 28, 0.24) 0 28px 72px -16px` — modal
### Semantic
- **Success** (`#1aa179` on `rgba(26, 161, 121, 0.12)`): build-success green — distinct from the brand teal so "deployed successfully" reads as a state, not a brand event.
- **Warning** (`#d98b00` on `rgba(217, 139, 0, 0.12)`): advisory amber — rate limits, build warnings.
- **Danger** (`#e5484d` on `rgba(229, 72, 77, 0.12)`): error red — build failures, destructive actions.
- **Info** (`#5653ed` on `rgba(86, 83, 237, 0.10)`): info reads as the indigo link axis — informational banners and tips.
## 3. Typography Rules
### Font Family
**Display**: `Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Figtree** is an open-source geometric-humanist sans by Erik Kennedy, covering weights 300–900 in a variable file. Netlify sets it *heavy* — weight 800 is the display weight, used for the 64px H1 and section headers. The silhouette is friendly-engineered: rounded terminals, generous lowercase apertures, a single-storey `g`, a slightly geometric `a`. At 800 it reads as confident and warm rather than brutalist — the deliberate counter to terminal-grade display faces. This heavy-humanist display is the brand's primary typographic tell.
**Body**: `"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Instrument Sans** is an open-grotesque sans (by Rajputana Custom Type) with more aperture and warmth than a neutral grotesque like Helvetica. Set at weight 400 for body copy in near-black `#181a1c`, it gives the reading register a calm, precise feel that balances the heavy Figtree display. The display/body contrast — heavy geometric-humanist over open grotesque — is what makes the type system feel modern-friendly rather than either brutalist or corporate.
**Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. The system mono stack — Netlify doesn't ship a proprietary mono. Used for code blocks (rendered on the dark `#181a1c` ground with teal-tinted syntax), CLI commands, deploy-log output, and environment-variable names.
**OpenType features**: Figtree and Instrument Sans both render with `kern` and `liga` always on. The mono stack adds `liga` and `calt` for code ligatures and `tnum` for tabular numerals in build-stat tables.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | Figtree | 80px | 800 | 1.0 | -0.03em | Top-of-page hero on dark band |
| display-xl | Figtree | 64px | 800 | 1.04 | -0.025em | Major section opener |
| display-lg | Figtree | 56px | 800 | 1.05 | -0.02em | Sub-section opener |
| h1 | Figtree | 64px | 800 | 1.05 | -0.025em | Hero H1 — the canonical headline (near-white on dark) |
| h2 | Figtree | 48px | 800 | 1.10 | -0.018em | Marketing section H2 |
| h3 | Figtree | 32px | 700 | 1.18 | -0.012em | Card heading, article H3 |
| h4 | Figtree | 24px | 700 | 1.25 | -0.006em | Sub-card heading |
| h5 | Figtree | 20px | 600 | 1.30 | 0 | Inline emphasis heading |
| eyebrow | Instrument Sans | 13px | 600 | 1.40 | 0.06em | Section pre-label, uppercase |
| section-label | Instrument Sans | 14px | 600 | 1.40 | 0.04em | Marketing eyebrow, uppercase |
| body-lg | Instrument Sans | 18px | 400 | 1.55 | 0 | Hero deck, lede paragraph |
| body-md | Instrument Sans | 16px | 400 | 1.55 | 0 | Default body copy |
| body-sm | Instrument Sans | 14px | 400 | 1.50 | 0 | Card body, dense-row body |
| caption | Instrument Sans | 13px | 400 | 1.45 | 0 | Image caption, footer micro |
| label | Instrument Sans | 13px | 500 | 1.40 | 0 | Form field label |
| label-strong | Instrument Sans | 13px | 600 | 1.40 | 0.01em | Emphasised label |
| button-md | Instrument Sans | 16px | 600 | 1.20 | 0 | Default button / CTA copy |
| button-sm | Instrument Sans | 14px | 600 | 1.20 | 0 | Compact button |
| nav-link | Instrument Sans | 15px | 500 | 1.20 | 0 | Top-nav links |
| code-block | Mono | 14px | 400 | 1.60 | 0 | Code block content |
| code-inline | Mono | 14px | 500 | 1.40 | 0 | Inline `code` references |
| quote | Figtree | 24px | 500 | 1.35 | -0.01em | Pull-quote, testimonial |
### Principles
- **Two-family discipline.** Figtree for display, Instrument Sans for body. The heavy-humanist-over-open-grotesque pairing is the system's identity; there is no third face beyond the system mono for code.
- **Weight 800 is the display weight.** Where Vercel caps Geist at 600, Netlify pushes Figtree to 800 for the H1. The rationale is opposite: Netlify *wants* the heavy, friendly, emphatic headline; the geometric-humanist silhouette carries the weight without reading as shouty.
- **Body holds at weight 400.** Instrument Sans at 400 keeps the reading register calm against the heavy display — the contrast between 800 display and 400 body is the typographic engine.
- **Near-black ink, not pure black.** Body and headline copy is `#181a1c`, not `#000000`. The slight grain softens long-form reading; pure black is reserved for the logo and peak emphasis.
- **Negative tracking compresses with size.** `-0.03em` at 80px, `-0.025em` at 64px, `-0.02em` at 56px, `-0.018em` at 48px, near-zero below 20px.
- **16px body, 1.55 line-height.** Default reading size, capped at a 720px column for ~70-character lines.
- **Uppercase eyebrows in body face.** Section eyebrows use Instrument Sans at 13–14px / 0.04–0.06em uppercase — Netlify keeps eyebrows in the body grotesque rather than a mono, a softer signal than terminal-mono labels.
- **Headlines invert on dark bands.** On the dark hero, the Figtree H1 renders in near-white `#e6ecf2`; on white sections it's near-black `#181a1c`. The headline colour follows the band brightness.
## 4. Component Stylings
### Buttons
**Primary Pill** — `#32e6e2` electric-teal fill, near-black `#181a1c` text at 16px / 600 Instrument Sans, **360px full-pill radius**, 0×24px padding, 48px height. Hover deepens to `#23d4d0` over 240ms standard and scales the pill 1.0→1.02. Use case: *Sign up*, *Get started*, *Deploy now* — the dominant CTA. The teal-on-near-black pill is the brand's signature action component. (Note: this is the inverse of Vercel — Netlify *fills* the brand colour into the primary action.)
**Secondary on Dark (Glass)** — `rgba(255, 255, 255, 0.10)` translucent white fill, teal `#32e6e2` label at 16px / 600, 1px border at `rgba(255, 255, 255, 0.14)`, **360px pill**, 48px height. Use case: the dark-hero secondary CTA — *Talk to sales* — a glass pill that pairs with the solid teal primary on the dark band.
**Secondary Outlined (Light)** — `#ffffff` fill, near-black `#181a1c` label at 16px / 600, 1px border at `#cfd9de` (slate hairline), **360px pill**, 0×22px padding, 48px height. Hover deepens border to `#aab6bd`. Use case: *Learn more*, *Contact us* — paired adjacently with the primary teal pill on white sections.
**Ghost (Quiet)** — Transparent background, near-black text at 15px / 500, 8px radius, 0×12px padding, 40px height. Hover fills with `#e8e6f0` lavender-surface. Use case: nav links, footer secondaries, in-card actions.
**Link** — Transparent background, indigo `#5653ed` text at 15px / 500. No underline at rest; 1px underline appears on hover. Use case: text-link CTA — *See docs*, *View pricing*, *Read the changelog*.
### Cards
**Default Card** — `#ffffff` fill, 1px slate hairline at `#cfd9de`, **12px radius**, 24×28px padding, single-layer soft shadow `rgba(24, 26, 28, 0.06) 0 4px 16px -4px`. The standard feature card on white sections. Hover lifts 2px and intensifies the shadow.
**Surface Card** — `#e8e6f0` lavender-grey fill, no border, 12px radius, 28px padding, no shadow. Used for quiet groupings and inset blocks on white sections — the border-and-shadow-free alternative that leans on the lavender tint for separation.
**Dark Card** — `#181a1c` near-black fill, `#e6ecf2` near-white text, 1px border at `rgba(255, 255, 255, 0.08)`, **16px radius**, 32px padding. Used for feature and testimonial cards on dark bands, with teal `#32e6e2` accents for icons and emphasis.
### Code Blocks
**Code Block** — `#181a1c` near-black fill, near-white `#e6ecf2` mono text, **12px radius**, 20×24px padding, no border. Mono 14px / 400 / 1.60 line-height. Used for CLI commands, deploy-log output, and config snippets. Unlike Vercel's plain-grey marketing code blocks, Netlify renders code on the dark ground with teal-tinted syntax highlighting — the dark band makes the code feel terminal-native.
**Inline Code** — `#e8e6f0` lavender-surface fill on light, near-black text at 14px / 500 mono, 4px radius, 2×6px padding. On dark bands, fills with `rgba(255, 255, 255, 0.08)`.
### Badges, Tags, Pills
**Status Badge (Brand)** — `rgba(50, 230, 226, 0.16)` teal-soft fill, deep-teal `#014847` text at 12px / 600 Instrument Sans uppercase with `0.04em` tracking, 4px radius, 3×10px padding. Use case: `NEW`, `BETA`, `LIVE`, `PRO`.
**Tag Chip** — `#e8e6f0` lavender fill, secondary `#45455f` text at 12px / 500, 4px radius, 3×10px padding. Use case: framework labels, region tags, version chips.
**Deploy-Status Pill** — Used for live build/deploy state. Includes a 6px circle status dot at `success` green (deployed), `warning` amber (building), or `danger` red (failed) on the left, with a 13px / 500 Instrument Sans label.
### Inputs / Forms
**Text Input** — `#ffffff` fill, near-black text at 16px / 400 Instrument Sans, 1px border at `#cfd9de`, **8px radius**, 44px height, 0×14px padding. Placeholder at `#9a9ab0` faint. On focus: border shifts to indigo `#5653ed` and a 3px translucent indigo ring appears (`rgba(86, 83, 237, 0.18) 0 0 0 3px`) — focus follows the *link* axis, not the teal action axis.
**Select** — Same shape as text-input with a chevron icon at right (16px) at tertiary-text colour.
**Search** — Same as text-input with a leading search glyph; the search-results heading uses `--color-text-weak` (`#757575`).
### Navigation
**Top Nav** — `rgba(255, 255, 255, 0.85)` translucent white fill with `backdrop-filter: blur(12px) saturate(160%)`, **64px height**, 1px bottom hairline at `#e3e9ec`. On dark-hero pages the nav inverts to a translucent dark fill. Wordmark left in Figtree. Center: nav links (Platform, Solutions, Developers, Resources, Pricing) at 15px / 500 ghost-button style. Right: ghost `Log in` + primary teal `Sign up` pill.
**Footer** — `#0a0a0c` near-black ink band (the deepest tier), multi-column link grid (Platform, Resources, Company, Legal) in Instrument Sans 14px / 400 at `#cfd9de` near-white. Wordmark + system-status indicator + theme switcher at the bottom.
### Optional / Decorative
**Deploy-Log Block** — A terminal-style block on the dark band: `#181a1c` fill, mono output with teal `#32e6e2` success lines, amber warnings, red errors. Used to dramatise the deploy experience as marketing content.
**Framework Grid** — Logos in a 4-up grid on white, each cell `#ffffff` with a slate hairline, 12px radius, logos at `#45455f` secondary. Hover tints the cell border to indigo.
**Pricing Card** — Default card with hairline border. Tier name in Figtree 20px / 600, price in Figtree 48px / 800, feature list with teal checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom.
**Modal** — `#ffffff` fill, 12px radius, 32px padding, modal shadow stack. Backdrop scrim at `rgba(10, 10, 12, 0.50)`. Max-width 480px for confirmations, 640px for dialogs.
## 5. Layout Principles
### Spacing System
- Base unit: **4px**
- Scale: `4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128`
- Section padding (vertical): 96–128px for major marketing bands; 48–64px between dense sections; 24–32px between paragraphs and content blocks
- Card internal padding: 24×28px on default cards; 28px on surface cards; 32px on dark cards; 20×24px on code blocks
- Inter-card gutters: 24px between cards in 2-up; 16px in 3-up dense grids
### Grid & Container
- Canonical max width: **1280px** for marketing sections; **1440px** for dense data layouts (framework grids, pricing comparisons)
- 12-column grid with 24px gutters
- Reading column caps at **720px** inside the wider container — ~70-character line length
- Hero treatment: full-bleed dark `#181a1c` band, headline left-aligned (sometimes centered), near-white H1 with teal-and-glass CTA pair below
### Whitespace Philosophy
The page balances dense developer-platform content (framework grids, deploy logs, pricing tables) with generous editorial breathing room (dark hero bands with 128px+ vertical padding). The brightness flip does the structural work: the eye reads white sections as editorial and dark sections as high-contrast feature showcases, so spacing reinforces band identity rather than fighting it.
### Section Cadence
A typical Netlify page runs:
1. **Hero** — dark `#181a1c` band, 64px / 800 Figtree H1 in near-white `#e6ecf2`, 18px / 400 Instrument Sans body deck, dual CTA (teal primary pill + glass secondary pill)
2. **Feature Grid** — white `#ffffff` background, cards in 3-up with slate hairlines and soft shadows, Figtree 32px / 700 card titles + Instrument Sans body
3. **Deploy-Tour Band** — dark `#181a1c` background with a terminal-style code block and teal success accents, prose introducing the example
4. **Framework Grid** — white background, 4-up logo grid at `#45455f` secondary
5. **Surface-Card Section** — white background with lavender `#e8e6f0` inset cards grouping related features
6. **Pricing Cards** — white background, cards in 3-up, featured tier ringed in teal
7. **Dark Testimonial Band** — `#181a1c` inversion with near-white text and teal-accented dark cards
8. **Closing CTA** — dark band with centered teal primary pill, single dominant action
9. **Footer** — deepest `#0a0a0c` ink band, multi-column link grid in 14px / 400 near-white
The alternation is *brightness-based* (dark → white → dark → white → near-black footer) rather than colour-based.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Decorative dividers, focus indicators inside chips |
| Small | 4px | Status badges, tag chips, cookie-banner buttons |
| Comfortable | 8px | Inputs, secondary buttons, code chips |
| Large | 12px | Cards, dashboard tiles, modals, code blocks |
| Featured | 16px | Large feature cards, dark cards, hero panels |
| Pill | 360px | The signature CTA pill — full-round on all primary/secondary buttons |
Netlify's signature shape is the **360px full-pill** on every CTA. Unlike Vercel — which reserves the pill for hero contexts and uses 6px rectangles in compact chrome — Netlify pills *everything* in the action role: primary, secondary, and glass buttons are all full-round. The 360px value is effectively `9999px`; it's what the production CSS ships. Cards and code blocks use 12px, large feature surfaces use 16px, and dense chips use 4px. The contrast between fully-rounded buttons and gently-rounded cards is part of the friendly-but-structured feel.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow, canvas bg | Page canvas, dark bands, body sections |
| 1 — Hairline | 1px `#cfd9de` slate border | Surface cards, framework cells, pricing cards |
| 2 — Card | 1px border + `rgba(24, 26, 28, 0.06) 0 4px 16px -4px` | Default feature cards |
| 3 — Elevated | `rgba(24, 26, 28, 0.10) 0 8px 28px -8px` | Dropdowns, hover-lifted cards |
| 4 — Popover | `rgba(24, 26, 28, 0.16) 0 16px 40px -12px` | Menus, popovers, command surfaces |
| 5 — Modal | scrim `rgba(10, 10, 12, 0.50)` + `rgba(24, 26, 28, 0.24) 0 28px 72px -16px` | Dialogs, sign-up modals |
### Shadow Philosophy
Netlify shadows are **ink-tinted, soft, single-layer**. Rather than pure-black shadows, the stack uses the body-ink colour (`rgba(24, 26, 28, …)`) at low opacity, keeping the lift warm and quiet against the white canvas. Cards get a single soft 16px diffusion at 6% opacity plus the slate hairline border — the border does as much elevation work as the shadow. On dark bands, shadows give way to border-and-brightness contrast entirely (a `#181a1c` card on a `#181a1c` band separates via its `rgba(255,255,255,0.08)` border, not a shadow). Heavy shadows (popover, modal) are reserved for true overlay UI. The discipline keeps the white sections feeling bright and the dark sections feeling flat-and-terminal — shadows are a light-mode device.
## 8. Interaction & Motion
### Easing Curves
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal entry, toast slide-in
- **Out-Soft**: `cubic-bezier(0.0, 0, 0.2, 1)` — gentle settle; dropdown reveal, scroll-reveal
### Duration Buckets
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Link underline grow, focus ring fade-in |
| Standard | 240ms | Button hover, card lift, colour transitions |
| Slow | 320ms | Scroll-reveal fade, dropdown reveal |
| Page | 400ms | Route transitions |
### Per-Component Recipes
- **Primary CTA hover**: teal bg deepens `#32e6e2` → `#23d4d0` over 240ms standard; pill scales 1.0→1.02. The teal-deepen plus subtle grow is the brand's most characteristic micro-interaction.
- **Glass CTA hover**: white-translucent fill lifts `0.10` → `0.16` opacity over 240ms; teal label holds.
- **Indigo link hover**: colour holds at `#5653ed`, 1px underline grows from 0 to full width over 150ms ease-standard.
- **Card hover**: 2px translate-up + shadow intensifies (6% → 10%) over 240ms standard.
- **Scroll-reveal**: sections fade in with a 16px rise over 320ms ease-out-soft when entering the viewport at 80% threshold. One-shot per section.
- **Toast slide-in**: from top-right with 12px translate-down + opacity 0→1 over 240ms ease-emphasized. Auto-dismisses after 4s.
- **Modal entry**: backdrop scrim fades over 240ms; modal content fades + scales from 0.96 to 1.0 over 320ms ease-emphasized.
### Page Transitions
Page-to-page navigation uses a 400ms cross-fade with the sticky header staying static. Anchor links smooth-scroll over ~500ms ease-emphasized. The brightness flip between sections means scroll feels like moving through alternating bright/dark rooms.
### Reduced Motion
Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress — the CTA pill no longer scales on hover, cards no longer lift. Transitions degrade to opacity-only or instant render; durations halve. Scroll-reveal becomes static on-mount. Link hover underline appears instantly rather than growing. Nothing breaks; the brightness alternation and colour states are preserved.
## 9. Accessibility & A11y
### Contrast Pairs
| Pair | Ratio | Level |
|------|-------|-------|
| `#181a1c` text on `#ffffff` canvas | 15.3 | AAA at all sizes |
| `#45455f` secondary on `#ffffff` | 8.4 | AAA at body sizes |
| `#757575` tertiary on `#ffffff` | 4.6 | AA at body sizes |
| `#9a9ab0` faint on `#ffffff` | 2.6 | Fails AA — used only for placeholder/disabled |
| `#5653ed` indigo link on `#ffffff` | 6.0 | AA at body / AAA at large; reinforced with hover-underline |
| `#181a1c` text on `#32e6e2` teal pill | 12.3 | AAA at all sizes |
| `#014847` deep-teal on `#32e6e2` teal fill | 6.8 | AA at body / AAA at large |
| `#e6ecf2` near-white on `#181a1c` hero | 14.6 | AAA at all sizes |
| `#32e6e2` teal on `#181a1c` hero | 9.7 | AAA at large / AA at small |
| `#cfd9de` near-white on `#181a1c` hero | 11.8 | AAA at all sizes |
The teal pill's near-black `#181a1c` label is the brand's strongest contrast choice — 12.3:1 — which is precisely why Netlify fills the CTA with the bright teal and sets *dark* text on top rather than white. The indigo link at 6.0:1 passes AA at body sizes; it's reinforced with a hover-underline so colour-blind users can identify links by behaviour.
### Focus Indicators
Focus ring is `3px solid rgba(86, 83, 237, 0.18)` translucent indigo with 2px outline-offset. Focus follows the *link* axis (indigo), not the teal action axis — keeping the keyboard-focus signal chromatically distinct from the teal CTA fill so a focused-but-not-the-CTA element never reads as the primary action.
### ARIA Patterns
- **Top nav**: `<nav aria-label="Primary">` landmark with skip-link to `<main>`. Mega-menu dropdowns use `aria-haspopup="true" aria-expanded`.
- **Deploy-status pills**: `aria-live="polite"` with descriptive text ("Deploy succeeded", "Building", "Deploy failed").
- **Pricing tables**: proper `<table>` semantics with `<th scope="col">` for tiers and `<th scope="row">` for features.
- **Code / deploy-log blocks**: `<pre><code role="region" aria-label="Deploy log" tabindex="0">` — focusable, labelled.
- **Modal**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Toast notifications**: `aria-live="polite"` for non-critical, `aria-live="assertive"` for build failures.
- **System-status indicator** in footer: `aria-live="polite"` ("All systems operational").
### Keyboard Navigation
- Tab order: skip-link → wordmark → primary nav → search → auth CTAs → main content → footer
- Arrow keys navigate inside mega-menu dropdowns
- `Esc` closes modals and dropdown menus
- Code / deploy-log blocks are focusable (`tabindex="0"`)
- Pricing tier toggles use radio-button keyboard semantics
### Screen Reader Hints
- Uppercase eyebrows use `text-transform: uppercase` (CSS) so screen readers announce natural-case
- Decorative hero illustrations carry `aria-hidden="true"`
- Brand wordmark uses `aria-label="Netlify"`
- Deploy-status pills announce state changes via `aria-live`
- Pricing values announce with currency unit for screen readers
### Reduced Motion
All transitions degrade to opacity-only or instant. CTA pill scale and card lift suppress. Modal scale-in becomes instant. Scroll-reveal becomes static on-mount. The brand experience preserves visual consistency under reduced-motion — nothing breaks.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Top nav collapses to logo + hamburger; hero H1 drops 64→36px; cards 1-up; CTA pair stacks vertically; framework grid 2-up |
| Tablet | 640–1024px | Top nav keeps inline links (no mega-menu); hero H1 at 48px; cards 2-up; framework grid 3-up |
| Desktop | 1024–1280px | Full nav with mega-menu; hero H1 at 64px; cards 3-up; framework grid 4-up |
| Wide | 1280–1536px | Content caps at 1280; dense layouts expand to 1440 |
### Touch Targets
- Buttons / CTA pills: 48px height (comfortably above the 44px minimum)
- Nav links: 44×44px minimum tap area even at 15px text
- Tag chips: 24px visual height with vertical padding for 44px effective tap area
- Inputs: 44px height — finger-friendly by default
### Collapsing Strategy
- **Top nav** at <1024px: primary links collapse into a hamburger sheet; mega-menus become accordion sections
- **Hero CTA pair** at <640px: stacks vertically (teal primary above, glass/outlined secondary below)
- **Card grids**: 4 → 3 → 2 → 1 columns
- **Framework grid**: 4 → 3 → 2 columns; logos maintain aspect ratio
- **Pricing cards** at <1024px: swipe-able horizontal scroll with snap points; otherwise 3-up at desktop
- **Dark bands**: full-bleed at all sizes — the brightness flip holds on mobile
### Image Behavior
Framework and customer logos use SVG with `currentColor` so they inherit the secondary-text colour and invert on dark bands. Product screenshots use `aspect-ratio` to prevent layout shift. Below-fold images are lazy-loaded; the hero is eager.
### Container Queries
Used inside feature cards: when a card crosses ~360px width, an icon-above-title layout switches to icon-beside-title, letting the same component render compactly in 4-up grids and expansively in hero contexts.
## 11. Content & Voice
### Tone
**Friendly, capable, deploy-forward.** Netlify writes like a developer-relations engineer who's genuinely excited to get you shipping — warmer and more enthusiastic than Vercel's clipped engineering register, but still technically precise. Headlines are inviting statements ("Push your ideas to the web"); subheads explain the platform capability; product copy uses developer vocabulary (build, deploy, edge, function) without over-translating. The voice sits between consumer-product warmth and engineering-peer precision — approachable but credible.
### Microcopy Patterns
- **Button verbs**: *Sign up*, *Get started*, *Deploy now*, *Talk to sales*, *Read the docs*, *View pricing*. Action-forward, deploy-flavoured.
- **Error messages**: *"Build failed — check your build command in `netlify.toml` and redeploy."* — specific, accountable, includes the exact file.
- **Success confirmations**: *"Deploy succeeded."* / *"Site is live."* — brief, declarative, deploy-celebratory without being saccharine.
- **Empty states**: *"No sites yet. Connect a Git repository or drag-and-drop a folder to deploy."* — instruction-led, includes both paths.
- **Field labels**: *Email*, *Site name*, *Build command*, *Publish directory*. Single concept where possible.
- **Loading states**: *"Building…"*, *"Deploying…"*, *"Going live…"* — context-specific, deploy-themed, never just "Loading…"
### Empty States
The dashboard empty state ("No sites yet — connect a repository or drag-and-drop to deploy") is the tonal anchor: name the state, offer the next step, lead with the deploy verb. Marketing-site empty states follow the same convention.
### CTA Verb Conventions
- Primary on hero: *Sign up*, *Get started*, *Deploy now*
- Secondary: *Talk to sales*, *Read the docs*, *Contact us*
- Tertiary text: *See pricing*, *Browse integrations*, *View the changelog*
- Avoided: *Click here*, *Submit*, *Buy now*. Netlify uses deploy-flavoured outcome verbs.
## 12. Dark Mode & Theming
**System-aware dark mode.** Netlify ships a complete paired token set — every light token has a `--*--dark` companion — that respects `prefers-color-scheme: dark` and offers a manual theme switcher in the footer. The dark mode is a full token swap, not the same as the dark *bands* that appear inside light mode (those are intentional inversions within the light theme; dark mode re-themes the entire canvas).
Dark-mode token swap:
- **canvas**: `#ffffff` → `#181821` (indigo-tinted near-black, not pure black)
- **bg-elev**: `#e8e6f0` → `rgba(98, 71, 230, 0.10)` (indigo-tinted surface)
- **text**: `#181a1c` → `#cfd9de` (cool near-white)
- **text-strong**: `#000000` → `#f0f1ff` (indigo-white peak)
- **text-secondary**: `#45455f` → `#8b8dac` (muted lavender)
- **brand**: `#32e6e2` (unchanged — teal reads vividly on both grounds)
- **on-brand**: `#181a1c` (unchanged — near-black text stays on the teal pill)
- **link**: `#5653ed` → `#8886ff` (lifted indigo for legibility on dark)
- **border**: `#cfd9de` → `rgba(200, 205, 254, 0.18)` (translucent indigo hairline)
- **shadow opacities**: increase substantially in dark mode (to 40–72%) to remain visible
The signatures hold across themes: the teal CTA pill is identical (teal fill, near-black text), and the two-axis discipline (teal action / indigo link) persists with the indigo lifted to `#8886ff`. The dark canvas is deliberately indigo-tinted (`#181821`) rather than neutral black — the lavender/indigo axis bleeds into the background, the way Vercel commits to true black but Netlify warms its dark toward the brand.
## 13. Lineage & Influences
Netlify's design DNA traces three lineages: **the deploy-platform brightness flip** (white marketing canvas alternating with near-black hero and feature bands, the visual language of a control surface that switches between bright dashboard and dark terminal), **the humanist-geometric-display turn** (Figtree set heavy at 800 over Instrument Sans body — the open-source type pairing that softened dev-tool branding away from terminal-brutalism), and **the two-axis chromatic discipline** (electric teal for action, cool indigo for links — separating "deploy" from "navigate" chromatically where most peers run a single accent).
The choice of pure `#ffffff` for the canvas — rather than Vercel's considered near-white `#fafafa` — is a deliberate brightness commitment: Netlify wants maximum contrast between its white sections and its near-black bands, so the brightness flip reads as dramatic. The dark bands aren't a dark mode; they're an intentional inversion *within* light mode, dramatising the deploy/terminal moment against the bright dashboard.
The teal-filled CTA is the brand's most pointed divergence from the Vercel school. Where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify *fills* its electric teal into the primary action and sets near-black text on top — a louder, friendlier action language. The teal at 12.3:1 with near-black text is also a contrast win: it lets the brightest brand colour carry the most important action while staying AAA-accessible.
The two-axis colour system (teal action, indigo link) is unusual among dev-tool brands. The indigo `#5653ed` and its lavender derivatives (`#e8e6f0` surface, `#c6bfd9` accent, `#45455f` secondary text) give the support palette a cool, calm cast that lets the hot teal action colour pop. The systematic paired light/dark token sets (`--*--light` / `--*--dark`) reflect the Radix-Colors-era discipline of designing semantic ramps with accessible step contrast.
What Netlify rejects: a single monochrome accent (it runs two axes), CTAs inverted to neutral (it fills with brand colour), terminal-mono eyebrows (it keeps eyebrows in the body grotesque), pure-black ink (`#181a1c`, not `#000`), and restrained display weight (Figtree at 800, not 600).
**Influences:**
- **Figtree (Erik Kennedy, open-source)** — The display identity; heavy geometric-humanist sans at weight 800, the friendly-engineered headline silhouette. *https://fonts.google.com/specimen/Figtree*
- **Instrument Sans (Rajputana Custom Type)** — Open-grotesque body face; more aperture than a neutral grotesque, paired with Figtree for the calm-precise reading register. *https://fonts.google.com/specimen/Instrument+Sans*
- **Vercel** — Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it. *https://vercel.com*
- **Jamstack (the architecture Netlify coined)** — The developer-platform-as-editorial register; deploy logs, build status, and framework grids treated as marketing content. *https://jamstack.org*
- **Stripe** — Developer-product-as-magazine layout heritage; dense feature bands the modern deploy-platform surface descends from. *https://stripe.com*
- **Radix Colors** — Systematic semantic ramp thinking; paired light/dark token sets with accessible step contrast. *https://www.radix-ui.com/colors*
## 14. Do's and Don'ts
### Do
- **Do** use pure white `#ffffff` for the marketing canvas — full white, not near-white. The brightness flip needs maximum contrast.
- **Do** alternate white sections with near-black `#181a1c` hero / feature bands. The brightness rhythm is the structure.
- **Do** set **Figtree** heavy at weight 800 for the H1 and section headers. The heavy humanist display is the brand's tell.
- **Do** pair Figtree display with **Instrument Sans** body at weight 400. The heavy-over-open-grotesque contrast is the typographic engine.
- **Do** fill the primary CTA with electric teal `#32e6e2` as a 360px full-pill, near-black `#181a1c` text on top.
- **Do** reserve indigo `#5653ed` for links and navigation — the second chromatic axis, distinct from the teal action colour.
- **Do** use near-black `#181a1c` ink for body and headlines — not pure black. The slight grain softens reading.
- **Do** use lavender-grey `#e8e6f0` for quiet inset surface cards and slate `#cfd9de` for hairline borders.
- **Do** pill every button (primary, secondary, glass) at 360px — full-round is the action shape.
- **Do** use the indigo focus ring `rgba(86, 83, 237, 0.18)` — focus follows the link axis, not the teal action axis.
- **Do** render code on the dark `#181a1c` band with teal-tinted syntax — code feels terminal-native.
- **Do** keep eyebrows in Instrument Sans uppercase (13–14px / 0.04–0.06em) — softer than terminal-mono labels.
### Don't
- **Don't** use cream or near-white for the canvas. Netlify is full `#ffffff` — the brightness flip depends on it.
- **Don't** invert the CTA to neutral. Netlify *fills* the teal — the teal-on-near-black pill is the signature, the inverse of Vercel.
- **Don't** collapse teal and indigo into one accent. The two-axis system (teal action / indigo link) is the distinctive move.
- **Don't** use pure black `#000000` for body text. The ink is `#181a1c`; pure black is for the logo and peak emphasis only.
- **Don't** set the display below weight 700. Figtree at 800 is the canonical heavy headline; restrained weight loses the friendly-confident feel.
- **Don't** put white text on the teal pill. Near-black `#181a1c` text gives 12.3:1 AAA — the teal isn't dark enough for white.
- **Don't** apply the teal to links. Links are indigo `#5653ed`; teal is action-only.
- **Don't** square the buttons. The 360px full-pill is the action shape; rectangular buttons break the brand.
- **Don't** use heavy pure-black shadows. Ink-tinted `rgba(24, 26, 28, …)` soft shadows keep the white sections bright.
- **Don't** treat the dark bands as dark mode. They're intentional inversions within light mode; dark mode re-themes the whole canvas.
- **Don't** widen the reading column beyond 720px. Line length is calibrated for ~70 characters.
- **Don't** use terminal-mono for eyebrows. Netlify keeps eyebrows in the Instrument Sans body grotesque.
## 15. Agent Prompt Guide
### Quick Color Reference
```
Canvas: #ffffff
Hero Band: #181a1c
Body Ink: #181a1c (not pure black)
Text Secondary: #45455f
Text Tertiary: #757575
Brand Teal: #32e6e2 (rgb 50, 230, 226 — fills the CTA pill)
On-Teal Text: #181a1c (near-black, NEVER white)
Indigo Link: #5653ed (links + nav only, NOT action)
Lavender Surface: #e8e6f0
Slate Border: #cfd9de
Focus Ring: rgba(86, 83, 237, 0.18) 0 0 0 3px (indigo)
Text on Hero: #e6ecf2 (near-white on dark band)
```
### Example Component Prompts
1. **"Create a Netlify-style hero on a near-black `#181a1c` band: 64px / 800 Figtree H1 in near-white `#e6ecf2` with `-0.025em` tracking, 18px / 400 Instrument Sans body deck in `#cfd9de` at 1.55 line-height, dual CTA pair below — primary teal full-pill (`#32e6e2` fill, near-black `#181a1c` text 16px / 600, 360px radius, 48px height) and secondary glass pill (`rgba(255,255,255,0.10)` fill, teal `#32e6e2` label, 1px `rgba(255,255,255,0.14)` border, 360px radius)."**
2. **"Design a Netlify feature card on white: `#ffffff` background, 12px radius, 1px `#cfd9de` slate hairline border, 24×28 padding, soft single-layer shadow `rgba(24, 26, 28, 0.06) 0 4px 16px -4px`. Inside: 28×28 icon at top in `#5653ed` indigo, 32px / 700 Figtree heading in `#181a1c`, 16px / 400 Instrument Sans body in `#45455f` secondary. Hover: lift 2px + intensify shadow."**
3. **"Build a Netlify primary CTA: electric-teal `#32e6e2` full-pill, 360px radius, 48px height, 0×24 padding, near-black `#181a1c` text at 16px / 600 Instrument Sans. Hover: deepen teal to `#23d4d0` and scale 1.02. Never put white text on it — the teal needs dark text for AAA contrast (12.3:1)."**
4. **"Compose a Netlify deploy-tour band: near-black `#181a1c` full-bleed section, 64px vertical padding. Centered terminal-style code block (`#181a1c` fill, 12px radius, mono 14px / 1.60) with teal `#32e6e2` success lines, amber warnings, red errors. Eyebrow above in Instrument Sans 13px / 600 uppercase `0.06em` in teal. Section heading in 48px / 800 Figtree near-white."**
5. **"Render a Netlify pricing card with featured tier: white `#ffffff` card, 12px radius, 1px `#cfd9de` border, 28px padding. Tier name in Figtree 20px / 600, price in Figtree 48px / 800 `#181a1c`, feature list with teal `#32e6e2` checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom (`#32e6e2` fill, near-black text, 360px radius)."**
6. **"Render a Netlify top nav: 64px height, `rgba(255, 255, 255, 0.85)` translucent white fill with `backdrop-filter: blur(12px) saturate(160%)`, 1px bottom hairline `#e3e9ec`. Wordmark left in Figtree. Center nav links (Platform, Solutions, Developers, Resources, Pricing) in Instrument Sans 15px / 500 indigo `#5653ed`. Right: ghost `Log in` + primary teal `Sign up` pill (`#32e6e2` fill, near-black text, 360px radius)."**
### Iteration Guide
1. **Check the canvas value.** If it's cream or near-white, you've drifted. Netlify is full `#ffffff` — the brightness flip needs the brightest possible white against the near-black bands.
2. **Add the dark bands.** A page that's white all the way down isn't Netlify. Alternate white editorial sections with near-black `#181a1c` hero and feature bands — the brightness rhythm is the structure.
3. **Switch to Figtree at 800.** If your headline is a restrained 600-weight sans, you've ported Vercel logic. Netlify's H1 is heavy Figtree at 800 — friendly, confident, emphatic.
4. **Fill the CTA with teal.** If your primary button is neutral or inverted, you've drifted toward Vercel. Netlify fills the electric teal `#32e6e2` into the pill, near-black text on top. This is the single most brand-defining move.
5. **Pill everything.** Buttons are 360px full-round, not rectangles. If your CTAs have 8px corners, they read as a different brand.
6. **Split the two axes.** Teal `#32e6e2` is action-only; indigo `#5653ed` is links-and-nav-only. Don't let them blur — the chromatic separation is the distinctive system.
7. **Keep dark text on the teal.** Near-black `#181a1c` on the teal pill, never white. The teal isn't dark enough for white text; dark text gives 12.3:1 AAA.
8. **Cool the support palette.** Lavender surface `#e8e6f0`, slate hairline `#cfd9de`, slate-violet secondary `#45455f`. The cool, indigo-shaded support is what lets the hot teal action colour pop.
---
*Theme-toggle audit: score=5, signals=[data-theme-attr, localStorage-theme]*
1. Visual Theme & Atmosphere
Netlify’s marketing site is built on a single structural move: a brightness flip. The canvas is pure white #ffffff — not the near-white #fafafa that Vercel commits to, but full #ffffff — and it alternates with near-black #181a1c hero and feature bands. The hero lands dark, the H1 renders in near-white #e6ecf2, and as you scroll the page breathes between white editorial sections and dark high-contrast bands. The alternation is brightness-based, not colour-based: the page never shifts hue between sections, only luminance. This is the deploy-platform register — a site that wants to feel like a control surface, switching between the bright dashboard and the dark terminal.
What carries the brand is the type weight. The display face is Figtree, set heavy at weight 800 — the H1 is 64px / 800 with tight -0.025em tracking. Figtree is a geometric-humanist sans (open-source, by Erik Kennedy) with rounded terminals and generous lowercase apertures; at 800 it reads as confident and friendly rather than brutalist. This is the key differentiator from Vercel’s restrained 600-weight Geist: Netlify wants the headline to feel warm and emphatic. Body copy switches to Instrument Sans, a more open grotesque, at near-black #181a1c — the brand’s signature ink, deliberately not pure black, which softens long-form reading. The Figtree-display / Instrument-body pairing is the typographic identity: heavy humanist display, calm open-grotesque body.
The chromatic signature is electric teal #32e6e2 (rgb 50, 230, 226). This is the single loudest colour in the system, and Netlify uses it where it counts most: the primary Sign up CTA is a full 360px pill filled with teal, near-black #181a1c text on top. The teal is the action colour — it fills buttons, accents the dark hero, and signals “deploy / go.” This is the opposite of Vercel’s discipline: where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify fills its primary action with the brand colour. The teal-on-near-black pill is the brand’s most recognisable single component.
The second chromatic axis is indigo #5653ed — a cool blue-violet reserved for links and navigation. The two-axis system (teal for action, indigo for links) is what makes Netlify distinctive: most dev-tool brands run a single accent hue, but Netlify separates “action” from “navigation” chromatically. The indigo carries through to lavender surface tints (#e8e6f0 for inset cards), a slate-grey hairline border (#cfd9de), and the cool slate-violet of secondary text (#45455f). The supporting palette is cool and lavender-shaded; the action accent is hot teal. That tension — cool support, hot action — is the brand’s chromatic engine.
The atmospheric vocabulary that captures Netlify’s feeling: white-then-dark, brightness-flipped, Figtree-heavy, electric-teal-action, indigo-link, lavender-surface, slate-hairline, full-pill-CTA, deploy-register, friendly-engineered, near-black-ink, humanist-confident, two-axis-chroma. Every surface lands like it was designed by a team who wanted their developer platform to feel approachable and modern — terminal-comfortable on the dark bands, dashboard-bright on the white ones, with a single electric accent that says ship it.
Key Characteristics
- Pure white
#ffffffcanvas alternating with near-black#181a1chero / feature bands — brightness-based section rhythm - Near-black
#181a1cbody ink — the brand’s signature, deliberately not pure black, for softer long-form reading - Figtree display set heavy at weight 800 — geometric-humanist, friendly-confident, 64px H1 with
-0.025emtracking - Instrument Sans body — open grotesque, calm and precise, paired with the heavy Figtree display
- Electric teal
#32e6e2(rgb 50, 230, 226) as the action colour — fills the primary CTA pill - Primary CTA is a 360px full-pill — teal fill, near-black
#181a1ctext, the signature action shape - Indigo
#5653edreserved for links and navigation — a separate chromatic axis from the teal action colour - Lavender-grey surface tint
#e8e6f0for inset cards; cool slate-grey hairline#cfd9defor borders - Two-axis chroma: hot teal for action, cool indigo for links — over a cool lavender-shaded support palette
- 1280px page width, 720px reading column; 64px sticky translucent-white top nav
- Near-white
#e6ecf2text and teal accents on the dark hero bands - System-aware dark mode (
--*--darktoken set) — indigo-tinted near-black canvas, lifted indigo links
2. Color Palette & Roles
Primary
- Canvas (
#ffffff→--background-color--light): the page background — pure white, full#ffffff. The bright half of the brightness flip; never cream, never near-white. - Hero Band (
#181a1c→ derived from--colorink): the near-black inversion band behind the hero H1 and dark feature sections. The dark half of the flip. - Body Text (
#181a1c→--color--light): primary text and headlines — the brand’s signature near-black ink at ~10% lightness. Slightly warm grain vs pure black; 15.3:1 against the canvas. - Display Pure-Black (
#000000→--color-primary--light): rare absolute black for peak emphasis, logo wordmark, contrast-critical UI.
Brand & Sub-Brand
- Electric Teal (
#32e6e2→ CTA fill, rgb 50, 230, 226): the canonical brand colour and action accent. Fills the primary CTA pill, accents dark grounds. The system’s single loudest colour. - Deep Teal (
#014847): the near-black-teal used as text on bright-teal fills (e.g. the cookie-consent “Accept All” button) — a darker, more saturated teal that holds AAA contrast on the bright teal ground. - Brand Hover (
#23d4d0): darker teal for primary-CTA hover on light grounds. - Brand Soft (
rgba(50, 230, 226, 0.12)): soft teal wash for status pills and dark-ground accents.
Accent
- Indigo (
#5653ed→--color-link--light): the link/navigation axis — a cool blue-violet. This is the second brand colour, distinct from the teal action colour. Anchors inline links, nav links, and the focus ring. - Lavender Surface (
#e8e6f0→--background-color-surface--light): the indigo-shaded surface tint for inset cards and quiet groupings. - Lavender Accent (
#c6bfd9→--background-color-accent--light): the second-tier accent surface, a deeper lavender for nested or emphasised inset blocks.
Interactive
- Link (
#5653ed→--color-link--light): inline and nav links — indigo, no underline at rest, 1px underline on hover. - Link Hover (
#403fc9): darker indigo on hover (paired with the growing underline). - Selected (
#5653edtext onrgba(86, 83, 237, 0.10)background): active nav, current TOC entry, selected pricing tier. - Focus (
rgba(86, 83, 237, 0.18)3px ring): keyboard focus indicator — indigo, matching the link axis. - Disabled (
#9a9ab0text): disabled controls drop to the faint neutral, no colour cue.
Neutral Scale
The neutral ramp is cool and lavender-shaded — it leans toward the indigo axis rather than pure grey:
- Pure White (
#ffffff) — canvas, card surface - Border Soft (
#e3e9ec) — quietest separation - Lavender Surface (
#e8e6f0) — inset card / surface tint - Border (
#cfd9de→--border-color--light) — default hairline, cool slate grey - Border Strong (
#aab6bd) — focused inputs, outlined buttons - Text Faint (
#9a9ab0) — placeholder, disabled - Text Tertiary (
#757575→--color-text-weak) — captions, meta, search heading - Text Secondary (
#45455f→--color-secondary--light) — supporting copy, cool slate-violet - Text (
#181a1c→--color--light) — primary text, headlines, near-black ink - Text Strong (
#000000) — peak display
Surface & Borders
- Canvas (
#ffffff) — the bright background - Hero Band (
#181a1c) — the dark inversion band - Bg Ink (
#0a0a0c) — deepest band; footer, peak-contrast section - Lavender Surface (
#e8e6f0) — inset card surface on white sections - Lavender Accent (
#c6bfd9) — second-tier accent surface - Border Default (
#cfd9de) — cool slate-grey hairline at ~84% lightness - Border Soft (
#e3e9ec) — quietest separation - Border Strong (
#aab6bd) — outlined buttons, focused inputs
Shadow Colors
Netlify shadows are tinted with the body-ink colour (rgba(24, 26, 28, …)) rather than pure black, keeping them soft and warm on the white canvas. Cards lift via a single soft diffusion layer plus the slate hairline border.
rgba(24, 26, 28, 0.04) 0 1px 3px— ambientrgba(24, 26, 28, 0.06) 0 4px 16px -4px— card (the signature soft lift)rgba(24, 26, 28, 0.10) 0 8px 28px -8px— elevated dropdownrgba(24, 26, 28, 0.16) 0 16px 40px -12px— popoverrgba(24, 26, 28, 0.24) 0 28px 72px -16px— modal
Semantic
- Success (
#1aa179onrgba(26, 161, 121, 0.12)): build-success green — distinct from the brand teal so “deployed successfully” reads as a state, not a brand event. - Warning (
#d98b00onrgba(217, 139, 0, 0.12)): advisory amber — rate limits, build warnings. - Danger (
#e5484donrgba(229, 72, 77, 0.12)): error red — build failures, destructive actions. - Info (
#5653edonrgba(86, 83, 237, 0.10)): info reads as the indigo link axis — informational banners and tips.
3. Typography Rules
Font Family
Display: Figtree, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Figtree is an open-source geometric-humanist sans by Erik Kennedy, covering weights 300–900 in a variable file. Netlify sets it heavy — weight 800 is the display weight, used for the 64px H1 and section headers. The silhouette is friendly-engineered: rounded terminals, generous lowercase apertures, a single-storey g, a slightly geometric a. At 800 it reads as confident and warm rather than brutalist — the deliberate counter to terminal-grade display faces. This heavy-humanist display is the brand’s primary typographic tell.
Body: "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Instrument Sans is an open-grotesque sans (by Rajputana Custom Type) with more aperture and warmth than a neutral grotesque like Helvetica. Set at weight 400 for body copy in near-black #181a1c, it gives the reading register a calm, precise feel that balances the heavy Figtree display. The display/body contrast — heavy geometric-humanist over open grotesque — is what makes the type system feel modern-friendly rather than either brutalist or corporate.
Mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace. The system mono stack — Netlify doesn’t ship a proprietary mono. Used for code blocks (rendered on the dark #181a1c ground with teal-tinted syntax), CLI commands, deploy-log output, and environment-variable names.
OpenType features: Figtree and Instrument Sans both render with kern and liga always on. The mono stack adds liga and calt for code ligatures and tnum for tabular numerals in build-stat tables.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Figtree | 80px | 800 | 1.0 | -0.03em | Top-of-page hero on dark band |
| display-xl | Figtree | 64px | 800 | 1.04 | -0.025em | Major section opener |
| display-lg | Figtree | 56px | 800 | 1.05 | -0.02em | Sub-section opener |
| h1 | Figtree | 64px | 800 | 1.05 | -0.025em | Hero H1 — the canonical headline (near-white on dark) |
| h2 | Figtree | 48px | 800 | 1.10 | -0.018em | Marketing section H2 |
| h3 | Figtree | 32px | 700 | 1.18 | -0.012em | Card heading, article H3 |
| h4 | Figtree | 24px | 700 | 1.25 | -0.006em | Sub-card heading |
| h5 | Figtree | 20px | 600 | 1.30 | 0 | Inline emphasis heading |
| eyebrow | Instrument Sans | 13px | 600 | 1.40 | 0.06em | Section pre-label, uppercase |
| section-label | Instrument Sans | 14px | 600 | 1.40 | 0.04em | Marketing eyebrow, uppercase |
| body-lg | Instrument Sans | 18px | 400 | 1.55 | 0 | Hero deck, lede paragraph |
| body-md | Instrument Sans | 16px | 400 | 1.55 | 0 | Default body copy |
| body-sm | Instrument Sans | 14px | 400 | 1.50 | 0 | Card body, dense-row body |
| caption | Instrument Sans | 13px | 400 | 1.45 | 0 | Image caption, footer micro |
| label | Instrument Sans | 13px | 500 | 1.40 | 0 | Form field label |
| label-strong | Instrument Sans | 13px | 600 | 1.40 | 0.01em | Emphasised label |
| button-md | Instrument Sans | 16px | 600 | 1.20 | 0 | Default button / CTA copy |
| button-sm | Instrument Sans | 14px | 600 | 1.20 | 0 | Compact button |
| nav-link | Instrument Sans | 15px | 500 | 1.20 | 0 | Top-nav links |
| code-block | Mono | 14px | 400 | 1.60 | 0 | Code block content |
| code-inline | Mono | 14px | 500 | 1.40 | 0 | Inline code references |
| quote | Figtree | 24px | 500 | 1.35 | -0.01em | Pull-quote, testimonial |
Principles
- Two-family discipline. Figtree for display, Instrument Sans for body. The heavy-humanist-over-open-grotesque pairing is the system’s identity; there is no third face beyond the system mono for code.
- Weight 800 is the display weight. Where Vercel caps Geist at 600, Netlify pushes Figtree to 800 for the H1. The rationale is opposite: Netlify wants the heavy, friendly, emphatic headline; the geometric-humanist silhouette carries the weight without reading as shouty.
- Body holds at weight 400. Instrument Sans at 400 keeps the reading register calm against the heavy display — the contrast between 800 display and 400 body is the typographic engine.
- Near-black ink, not pure black. Body and headline copy is
#181a1c, not#000000. The slight grain softens long-form reading; pure black is reserved for the logo and peak emphasis. - Negative tracking compresses with size.
-0.03emat 80px,-0.025emat 64px,-0.02emat 56px,-0.018emat 48px, near-zero below 20px. - 16px body, 1.55 line-height. Default reading size, capped at a 720px column for ~70-character lines.
- Uppercase eyebrows in body face. Section eyebrows use Instrument Sans at 13–14px / 0.04–0.06em uppercase — Netlify keeps eyebrows in the body grotesque rather than a mono, a softer signal than terminal-mono labels.
- Headlines invert on dark bands. On the dark hero, the Figtree H1 renders in near-white
#e6ecf2; on white sections it’s near-black#181a1c. The headline colour follows the band brightness.
4. Component Stylings
Buttons
Primary Pill — #32e6e2 electric-teal fill, near-black #181a1c text at 16px / 600 Instrument Sans, 360px full-pill radius, 0×24px padding, 48px height. Hover deepens to #23d4d0 over 240ms standard and scales the pill 1.0→1.02. Use case: Sign up, Get started, Deploy now — the dominant CTA. The teal-on-near-black pill is the brand’s signature action component. (Note: this is the inverse of Vercel — Netlify fills the brand colour into the primary action.)
Secondary on Dark (Glass) — rgba(255, 255, 255, 0.10) translucent white fill, teal #32e6e2 label at 16px / 600, 1px border at rgba(255, 255, 255, 0.14), 360px pill, 48px height. Use case: the dark-hero secondary CTA — Talk to sales — a glass pill that pairs with the solid teal primary on the dark band.
Secondary Outlined (Light) — #ffffff fill, near-black #181a1c label at 16px / 600, 1px border at #cfd9de (slate hairline), 360px pill, 0×22px padding, 48px height. Hover deepens border to #aab6bd. Use case: Learn more, Contact us — paired adjacently with the primary teal pill on white sections.
Ghost (Quiet) — Transparent background, near-black text at 15px / 500, 8px radius, 0×12px padding, 40px height. Hover fills with #e8e6f0 lavender-surface. Use case: nav links, footer secondaries, in-card actions.
Link — Transparent background, indigo #5653ed text at 15px / 500. No underline at rest; 1px underline appears on hover. Use case: text-link CTA — See docs, View pricing, Read the changelog.
Cards
Default Card — #ffffff fill, 1px slate hairline at #cfd9de, 12px radius, 24×28px padding, single-layer soft shadow rgba(24, 26, 28, 0.06) 0 4px 16px -4px. The standard feature card on white sections. Hover lifts 2px and intensifies the shadow.
Surface Card — #e8e6f0 lavender-grey fill, no border, 12px radius, 28px padding, no shadow. Used for quiet groupings and inset blocks on white sections — the border-and-shadow-free alternative that leans on the lavender tint for separation.
Dark Card — #181a1c near-black fill, #e6ecf2 near-white text, 1px border at rgba(255, 255, 255, 0.08), 16px radius, 32px padding. Used for feature and testimonial cards on dark bands, with teal #32e6e2 accents for icons and emphasis.
Code Blocks
Code Block — #181a1c near-black fill, near-white #e6ecf2 mono text, 12px radius, 20×24px padding, no border. Mono 14px / 400 / 1.60 line-height. Used for CLI commands, deploy-log output, and config snippets. Unlike Vercel’s plain-grey marketing code blocks, Netlify renders code on the dark ground with teal-tinted syntax highlighting — the dark band makes the code feel terminal-native.
Inline Code — #e8e6f0 lavender-surface fill on light, near-black text at 14px / 500 mono, 4px radius, 2×6px padding. On dark bands, fills with rgba(255, 255, 255, 0.08).
Badges, Tags, Pills
Status Badge (Brand) — rgba(50, 230, 226, 0.16) teal-soft fill, deep-teal #014847 text at 12px / 600 Instrument Sans uppercase with 0.04em tracking, 4px radius, 3×10px padding. Use case: NEW, BETA, LIVE, PRO.
Tag Chip — #e8e6f0 lavender fill, secondary #45455f text at 12px / 500, 4px radius, 3×10px padding. Use case: framework labels, region tags, version chips.
Deploy-Status Pill — Used for live build/deploy state. Includes a 6px circle status dot at success green (deployed), warning amber (building), or danger red (failed) on the left, with a 13px / 500 Instrument Sans label.
Inputs / Forms
Text Input — #ffffff fill, near-black text at 16px / 400 Instrument Sans, 1px border at #cfd9de, 8px radius, 44px height, 0×14px padding. Placeholder at #9a9ab0 faint. On focus: border shifts to indigo #5653ed and a 3px translucent indigo ring appears (rgba(86, 83, 237, 0.18) 0 0 0 3px) — focus follows the link axis, not the teal action axis.
Select — Same shape as text-input with a chevron icon at right (16px) at tertiary-text colour.
Search — Same as text-input with a leading search glyph; the search-results heading uses --color-text-weak (#757575).
Navigation
Top Nav — rgba(255, 255, 255, 0.85) translucent white fill with backdrop-filter: blur(12px) saturate(160%), 64px height, 1px bottom hairline at #e3e9ec. On dark-hero pages the nav inverts to a translucent dark fill. Wordmark left in Figtree. Center: nav links (Platform, Solutions, Developers, Resources, Pricing) at 15px / 500 ghost-button style. Right: ghost Log in + primary teal Sign up pill.
Footer — #0a0a0c near-black ink band (the deepest tier), multi-column link grid (Platform, Resources, Company, Legal) in Instrument Sans 14px / 400 at #cfd9de near-white. Wordmark + system-status indicator + theme switcher at the bottom.
Optional / Decorative
Deploy-Log Block — A terminal-style block on the dark band: #181a1c fill, mono output with teal #32e6e2 success lines, amber warnings, red errors. Used to dramatise the deploy experience as marketing content.
Framework Grid — Logos in a 4-up grid on white, each cell #ffffff with a slate hairline, 12px radius, logos at #45455f secondary. Hover tints the cell border to indigo.
Pricing Card — Default card with hairline border. Tier name in Figtree 20px / 600, price in Figtree 48px / 800, feature list with teal checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom.
Modal — #ffffff fill, 12px radius, 32px padding, modal shadow stack. Backdrop scrim at rgba(10, 10, 12, 0.50). Max-width 480px for confirmations, 640px for dialogs.
5. Layout Principles
Spacing System
- Base unit: 4px
- Scale:
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 - Section padding (vertical): 96–128px for major marketing bands; 48–64px between dense sections; 24–32px between paragraphs and content blocks
- Card internal padding: 24×28px on default cards; 28px on surface cards; 32px on dark cards; 20×24px on code blocks
- Inter-card gutters: 24px between cards in 2-up; 16px in 3-up dense grids
Grid & Container
- Canonical max width: 1280px for marketing sections; 1440px for dense data layouts (framework grids, pricing comparisons)
- 12-column grid with 24px gutters
- Reading column caps at 720px inside the wider container — ~70-character line length
- Hero treatment: full-bleed dark
#181a1cband, headline left-aligned (sometimes centered), near-white H1 with teal-and-glass CTA pair below
Whitespace Philosophy
The page balances dense developer-platform content (framework grids, deploy logs, pricing tables) with generous editorial breathing room (dark hero bands with 128px+ vertical padding). The brightness flip does the structural work: the eye reads white sections as editorial and dark sections as high-contrast feature showcases, so spacing reinforces band identity rather than fighting it.
Section Cadence
A typical Netlify page runs:
- Hero — dark
#181a1cband, 64px / 800 Figtree H1 in near-white#e6ecf2, 18px / 400 Instrument Sans body deck, dual CTA (teal primary pill + glass secondary pill) - Feature Grid — white
#ffffffbackground, cards in 3-up with slate hairlines and soft shadows, Figtree 32px / 700 card titles + Instrument Sans body - Deploy-Tour Band — dark
#181a1cbackground with a terminal-style code block and teal success accents, prose introducing the example - Framework Grid — white background, 4-up logo grid at
#45455fsecondary - Surface-Card Section — white background with lavender
#e8e6f0inset cards grouping related features - Pricing Cards — white background, cards in 3-up, featured tier ringed in teal
- Dark Testimonial Band —
#181a1cinversion with near-white text and teal-accented dark cards - Closing CTA — dark band with centered teal primary pill, single dominant action
- Footer — deepest
#0a0a0cink band, multi-column link grid in 14px / 400 near-white
The alternation is brightness-based (dark → white → dark → white → near-black footer) rather than colour-based.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, focus indicators inside chips |
| Small | 4px | Status badges, tag chips, cookie-banner buttons |
| Comfortable | 8px | Inputs, secondary buttons, code chips |
| Large | 12px | Cards, dashboard tiles, modals, code blocks |
| Featured | 16px | Large feature cards, dark cards, hero panels |
| Pill | 360px | The signature CTA pill — full-round on all primary/secondary buttons |
Netlify’s signature shape is the 360px full-pill on every CTA. Unlike Vercel — which reserves the pill for hero contexts and uses 6px rectangles in compact chrome — Netlify pills everything in the action role: primary, secondary, and glass buttons are all full-round. The 360px value is effectively 9999px; it’s what the production CSS ships. Cards and code blocks use 12px, large feature surfaces use 16px, and dense chips use 4px. The contrast between fully-rounded buttons and gently-rounded cards is part of the friendly-but-structured feel.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | no shadow, canvas bg | Page canvas, dark bands, body sections |
| 1 — Hairline | 1px #cfd9de slate border | Surface cards, framework cells, pricing cards |
| 2 — Card | 1px border + rgba(24, 26, 28, 0.06) 0 4px 16px -4px | Default feature cards |
| 3 — Elevated | rgba(24, 26, 28, 0.10) 0 8px 28px -8px | Dropdowns, hover-lifted cards |
| 4 — Popover | rgba(24, 26, 28, 0.16) 0 16px 40px -12px | Menus, popovers, command surfaces |
| 5 — Modal | scrim rgba(10, 10, 12, 0.50) + rgba(24, 26, 28, 0.24) 0 28px 72px -16px | Dialogs, sign-up modals |
Shadow Philosophy
Netlify shadows are ink-tinted, soft, single-layer. Rather than pure-black shadows, the stack uses the body-ink colour (rgba(24, 26, 28, …)) at low opacity, keeping the lift warm and quiet against the white canvas. Cards get a single soft 16px diffusion at 6% opacity plus the slate hairline border — the border does as much elevation work as the shadow. On dark bands, shadows give way to border-and-brightness contrast entirely (a #181a1c card on a #181a1c band separates via its rgba(255,255,255,0.08) border, not a shadow). Heavy shadows (popover, modal) are reserved for true overlay UI. The discipline keeps the white sections feeling bright and the dark sections feeling flat-and-terminal — shadows are a light-mode device.
8. Interaction & Motion
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— Material-style; default for hover, focus, colour transitions - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— punchier exit; modal entry, toast slide-in - Out-Soft:
cubic-bezier(0.0, 0, 0.2, 1)— gentle settle; dropdown reveal, scroll-reveal
Duration Buckets
| Bucket | Value | Use |
|---|---|---|
| Fast | 150ms | Link underline grow, focus ring fade-in |
| Standard | 240ms | Button hover, card lift, colour transitions |
| Slow | 320ms | Scroll-reveal fade, dropdown reveal |
| Page | 400ms | Route transitions |
Per-Component Recipes
- Primary CTA hover: teal bg deepens
#32e6e2→#23d4d0over 240ms standard; pill scales 1.0→1.02. The teal-deepen plus subtle grow is the brand’s most characteristic micro-interaction. - Glass CTA hover: white-translucent fill lifts
0.10→0.16opacity over 240ms; teal label holds. - Indigo link hover: colour holds at
#5653ed, 1px underline grows from 0 to full width over 150ms ease-standard. - Card hover: 2px translate-up + shadow intensifies (6% → 10%) over 240ms standard.
- Scroll-reveal: sections fade in with a 16px rise over 320ms ease-out-soft when entering the viewport at 80% threshold. One-shot per section.
- Toast slide-in: from top-right with 12px translate-down + opacity 0→1 over 240ms ease-emphasized. Auto-dismisses after 4s.
- Modal entry: backdrop scrim fades over 240ms; modal content fades + scales from 0.96 to 1.0 over 320ms ease-emphasized.
Page Transitions
Page-to-page navigation uses a 400ms cross-fade with the sticky header staying static. Anchor links smooth-scroll over ~500ms ease-emphasized. The brightness flip between sections means scroll feels like moving through alternating bright/dark rooms.
Reduced Motion
Respects prefers-reduced-motion: reduce. All translate and scale transforms suppress — the CTA pill no longer scales on hover, cards no longer lift. Transitions degrade to opacity-only or instant render; durations halve. Scroll-reveal becomes static on-mount. Link hover underline appears instantly rather than growing. Nothing breaks; the brightness alternation and colour states are preserved.
9. Accessibility & A11y
Contrast Pairs
| Pair | Ratio | Level |
|---|---|---|
#181a1c text on #ffffff canvas | 15.3 | AAA at all sizes |
#45455f secondary on #ffffff | 8.4 | AAA at body sizes |
#757575 tertiary on #ffffff | 4.6 | AA at body sizes |
#9a9ab0 faint on #ffffff | 2.6 | Fails AA — used only for placeholder/disabled |
#5653ed indigo link on #ffffff | 6.0 | AA at body / AAA at large; reinforced with hover-underline |
#181a1c text on #32e6e2 teal pill | 12.3 | AAA at all sizes |
#014847 deep-teal on #32e6e2 teal fill | 6.8 | AA at body / AAA at large |
#e6ecf2 near-white on #181a1c hero | 14.6 | AAA at all sizes |
#32e6e2 teal on #181a1c hero | 9.7 | AAA at large / AA at small |
#cfd9de near-white on #181a1c hero | 11.8 | AAA at all sizes |
The teal pill’s near-black #181a1c label is the brand’s strongest contrast choice — 12.3:1 — which is precisely why Netlify fills the CTA with the bright teal and sets dark text on top rather than white. The indigo link at 6.0:1 passes AA at body sizes; it’s reinforced with a hover-underline so colour-blind users can identify links by behaviour.
Focus Indicators
Focus ring is 3px solid rgba(86, 83, 237, 0.18) translucent indigo with 2px outline-offset. Focus follows the link axis (indigo), not the teal action axis — keeping the keyboard-focus signal chromatically distinct from the teal CTA fill so a focused-but-not-the-CTA element never reads as the primary action.
ARIA Patterns
- Top nav:
<nav aria-label="Primary">landmark with skip-link to<main>. Mega-menu dropdowns usearia-haspopup="true" aria-expanded. - Deploy-status pills:
aria-live="polite"with descriptive text (“Deploy succeeded”, “Building”, “Deploy failed”). - Pricing tables: proper
<table>semantics with<th scope="col">for tiers and<th scope="row">for features. - Code / deploy-log blocks:
<pre><code role="region" aria-label="Deploy log" tabindex="0">— focusable, labelled. - Modal:
role="dialog" aria-modal="true" aria-labelledbywith focus trap and Esc-to-close. - Toast notifications:
aria-live="polite"for non-critical,aria-live="assertive"for build failures. - System-status indicator in footer:
aria-live="polite"(“All systems operational”).
Keyboard Navigation
- Tab order: skip-link → wordmark → primary nav → search → auth CTAs → main content → footer
- Arrow keys navigate inside mega-menu dropdowns
Esccloses modals and dropdown menus- Code / deploy-log blocks are focusable (
tabindex="0") - Pricing tier toggles use radio-button keyboard semantics
Screen Reader Hints
- Uppercase eyebrows use
text-transform: uppercase(CSS) so screen readers announce natural-case - Decorative hero illustrations carry
aria-hidden="true" - Brand wordmark uses
aria-label="Netlify" - Deploy-status pills announce state changes via
aria-live - Pricing values announce with currency unit for screen readers
Reduced Motion
All transitions degrade to opacity-only or instant. CTA pill scale and card lift suppress. Modal scale-in becomes instant. Scroll-reveal becomes static on-mount. The brand experience preserves visual consistency under reduced-motion — nothing breaks.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Top nav collapses to logo + hamburger; hero H1 drops 64→36px; cards 1-up; CTA pair stacks vertically; framework grid 2-up |
| Tablet | 640–1024px | Top nav keeps inline links (no mega-menu); hero H1 at 48px; cards 2-up; framework grid 3-up |
| Desktop | 1024–1280px | Full nav with mega-menu; hero H1 at 64px; cards 3-up; framework grid 4-up |
| Wide | 1280–1536px | Content caps at 1280; dense layouts expand to 1440 |
Touch Targets
- Buttons / CTA pills: 48px height (comfortably above the 44px minimum)
- Nav links: 44×44px minimum tap area even at 15px text
- Tag chips: 24px visual height with vertical padding for 44px effective tap area
- Inputs: 44px height — finger-friendly by default
Collapsing Strategy
- Top nav at <1024px: primary links collapse into a hamburger sheet; mega-menus become accordion sections
- Hero CTA pair at <640px: stacks vertically (teal primary above, glass/outlined secondary below)
- Card grids: 4 → 3 → 2 → 1 columns
- Framework grid: 4 → 3 → 2 columns; logos maintain aspect ratio
- Pricing cards at <1024px: swipe-able horizontal scroll with snap points; otherwise 3-up at desktop
- Dark bands: full-bleed at all sizes — the brightness flip holds on mobile
Image Behavior
Framework and customer logos use SVG with currentColor so they inherit the secondary-text colour and invert on dark bands. Product screenshots use aspect-ratio to prevent layout shift. Below-fold images are lazy-loaded; the hero is eager.
Container Queries
Used inside feature cards: when a card crosses ~360px width, an icon-above-title layout switches to icon-beside-title, letting the same component render compactly in 4-up grids and expansively in hero contexts.
11. Content & Voice
Tone
Friendly, capable, deploy-forward. Netlify writes like a developer-relations engineer who’s genuinely excited to get you shipping — warmer and more enthusiastic than Vercel’s clipped engineering register, but still technically precise. Headlines are inviting statements (“Push your ideas to the web”); subheads explain the platform capability; product copy uses developer vocabulary (build, deploy, edge, function) without over-translating. The voice sits between consumer-product warmth and engineering-peer precision — approachable but credible.
Microcopy Patterns
- Button verbs: Sign up, Get started, Deploy now, Talk to sales, Read the docs, View pricing. Action-forward, deploy-flavoured.
- Error messages: “Build failed — check your build command in
netlify.tomland redeploy.” — specific, accountable, includes the exact file. - Success confirmations: “Deploy succeeded.” / “Site is live.” — brief, declarative, deploy-celebratory without being saccharine.
- Empty states: “No sites yet. Connect a Git repository or drag-and-drop a folder to deploy.” — instruction-led, includes both paths.
- Field labels: Email, Site name, Build command, Publish directory. Single concept where possible.
- Loading states: “Building…”, “Deploying…”, “Going live…” — context-specific, deploy-themed, never just “Loading…”
Empty States
The dashboard empty state (“No sites yet — connect a repository or drag-and-drop to deploy”) is the tonal anchor: name the state, offer the next step, lead with the deploy verb. Marketing-site empty states follow the same convention.
CTA Verb Conventions
- Primary on hero: Sign up, Get started, Deploy now
- Secondary: Talk to sales, Read the docs, Contact us
- Tertiary text: See pricing, Browse integrations, View the changelog
- Avoided: Click here, Submit, Buy now. Netlify uses deploy-flavoured outcome verbs.
12. Dark Mode & Theming
System-aware dark mode. Netlify ships a complete paired token set — every light token has a --*--dark companion — that respects prefers-color-scheme: dark and offers a manual theme switcher in the footer. The dark mode is a full token swap, not the same as the dark bands that appear inside light mode (those are intentional inversions within the light theme; dark mode re-themes the entire canvas).
Dark-mode token swap:
- canvas:
#ffffff→#181821(indigo-tinted near-black, not pure black) - bg-elev:
#e8e6f0→rgba(98, 71, 230, 0.10)(indigo-tinted surface) - text:
#181a1c→#cfd9de(cool near-white) - text-strong:
#000000→#f0f1ff(indigo-white peak) - text-secondary:
#45455f→#8b8dac(muted lavender) - brand:
#32e6e2(unchanged — teal reads vividly on both grounds) - on-brand:
#181a1c(unchanged — near-black text stays on the teal pill) - link:
#5653ed→#8886ff(lifted indigo for legibility on dark) - border:
#cfd9de→rgba(200, 205, 254, 0.18)(translucent indigo hairline) - shadow opacities: increase substantially in dark mode (to 40–72%) to remain visible
The signatures hold across themes: the teal CTA pill is identical (teal fill, near-black text), and the two-axis discipline (teal action / indigo link) persists with the indigo lifted to #8886ff. The dark canvas is deliberately indigo-tinted (#181821) rather than neutral black — the lavender/indigo axis bleeds into the background, the way Vercel commits to true black but Netlify warms its dark toward the brand.
13. Lineage & Influences
Netlify’s design DNA traces three lineages: the deploy-platform brightness flip (white marketing canvas alternating with near-black hero and feature bands, the visual language of a control surface that switches between bright dashboard and dark terminal), the humanist-geometric-display turn (Figtree set heavy at 800 over Instrument Sans body — the open-source type pairing that softened dev-tool branding away from terminal-brutalism), and the two-axis chromatic discipline (electric teal for action, cool indigo for links — separating “deploy” from “navigate” chromatically where most peers run a single accent).
The choice of pure #ffffff for the canvas — rather than Vercel’s considered near-white #fafafa — is a deliberate brightness commitment: Netlify wants maximum contrast between its white sections and its near-black bands, so the brightness flip reads as dramatic. The dark bands aren’t a dark mode; they’re an intentional inversion within light mode, dramatising the deploy/terminal moment against the bright dashboard.
The teal-filled CTA is the brand’s most pointed divergence from the Vercel school. Where Vercel withholds its blue from buttons and inverts CTAs to near-black, Netlify fills its electric teal into the primary action and sets near-black text on top — a louder, friendlier action language. The teal at 12.3:1 with near-black text is also a contrast win: it lets the brightest brand colour carry the most important action while staying AAA-accessible.
The two-axis colour system (teal action, indigo link) is unusual among dev-tool brands. The indigo #5653ed and its lavender derivatives (#e8e6f0 surface, #c6bfd9 accent, #45455f secondary text) give the support palette a cool, calm cast that lets the hot teal action colour pop. The systematic paired light/dark token sets (--*--light / --*--dark) reflect the Radix-Colors-era discipline of designing semantic ramps with accessible step contrast.
What Netlify rejects: a single monochrome accent (it runs two axes), CTAs inverted to neutral (it fills with brand colour), terminal-mono eyebrows (it keeps eyebrows in the body grotesque), pure-black ink (#181a1c, not #000), and restrained display weight (Figtree at 800, not 600).
Influences:
- Figtree (Erik Kennedy, open-source) — The display identity; heavy geometric-humanist sans at weight 800, the friendly-engineered headline silhouette. https://fonts.google.com/specimen/Figtree
- Instrument Sans (Rajputana Custom Type) — Open-grotesque body face; more aperture than a neutral grotesque, paired with Figtree for the calm-precise reading register. https://fonts.google.com/specimen/Instrument+Sans
- Vercel — Adjacent deploy-platform peer; shares the white-canvas + near-black brightness discipline, but Netlify fills its CTA with brand colour where Vercel withholds it. https://vercel.com
- Jamstack (the architecture Netlify coined) — The developer-platform-as-editorial register; deploy logs, build status, and framework grids treated as marketing content. https://jamstack.org
- Stripe — Developer-product-as-magazine layout heritage; dense feature bands the modern deploy-platform surface descends from. https://stripe.com
- Radix Colors — Systematic semantic ramp thinking; paired light/dark token sets with accessible step contrast. https://www.radix-ui.com/colors
14. Do’s and Don’ts
Do
- Do use pure white
#fffffffor the marketing canvas — full white, not near-white. The brightness flip needs maximum contrast. - Do alternate white sections with near-black
#181a1chero / feature bands. The brightness rhythm is the structure. - Do set Figtree heavy at weight 800 for the H1 and section headers. The heavy humanist display is the brand’s tell.
- Do pair Figtree display with Instrument Sans body at weight 400. The heavy-over-open-grotesque contrast is the typographic engine.
- Do fill the primary CTA with electric teal
#32e6e2as a 360px full-pill, near-black#181a1ctext on top. - Do reserve indigo
#5653edfor links and navigation — the second chromatic axis, distinct from the teal action colour. - Do use near-black
#181a1cink for body and headlines — not pure black. The slight grain softens reading. - Do use lavender-grey
#e8e6f0for quiet inset surface cards and slate#cfd9defor hairline borders. - Do pill every button (primary, secondary, glass) at 360px — full-round is the action shape.
- Do use the indigo focus ring
rgba(86, 83, 237, 0.18)— focus follows the link axis, not the teal action axis. - Do render code on the dark
#181a1cband with teal-tinted syntax — code feels terminal-native. - Do keep eyebrows in Instrument Sans uppercase (13–14px / 0.04–0.06em) — softer than terminal-mono labels.
Don’t
- Don’t use cream or near-white for the canvas. Netlify is full
#ffffff— the brightness flip depends on it. - Don’t invert the CTA to neutral. Netlify fills the teal — the teal-on-near-black pill is the signature, the inverse of Vercel.
- Don’t collapse teal and indigo into one accent. The two-axis system (teal action / indigo link) is the distinctive move.
- Don’t use pure black
#000000for body text. The ink is#181a1c; pure black is for the logo and peak emphasis only. - Don’t set the display below weight 700. Figtree at 800 is the canonical heavy headline; restrained weight loses the friendly-confident feel.
- Don’t put white text on the teal pill. Near-black
#181a1ctext gives 12.3:1 AAA — the teal isn’t dark enough for white. - Don’t apply the teal to links. Links are indigo
#5653ed; teal is action-only. - Don’t square the buttons. The 360px full-pill is the action shape; rectangular buttons break the brand.
- Don’t use heavy pure-black shadows. Ink-tinted
rgba(24, 26, 28, …)soft shadows keep the white sections bright. - Don’t treat the dark bands as dark mode. They’re intentional inversions within light mode; dark mode re-themes the whole canvas.
- Don’t widen the reading column beyond 720px. Line length is calibrated for ~70 characters.
- Don’t use terminal-mono for eyebrows. Netlify keeps eyebrows in the Instrument Sans body grotesque.
15. Agent Prompt Guide
Quick Color Reference
Canvas: #ffffff
Hero Band: #181a1c
Body Ink: #181a1c (not pure black)
Text Secondary: #45455f
Text Tertiary: #757575
Brand Teal: #32e6e2 (rgb 50, 230, 226 — fills the CTA pill)
On-Teal Text: #181a1c (near-black, NEVER white)
Indigo Link: #5653ed (links + nav only, NOT action)
Lavender Surface: #e8e6f0
Slate Border: #cfd9de
Focus Ring: rgba(86, 83, 237, 0.18) 0 0 0 3px (indigo)
Text on Hero: #e6ecf2 (near-white on dark band)Example Component Prompts
-
“Create a Netlify-style hero on a near-black
#181a1cband: 64px / 800 Figtree H1 in near-white#e6ecf2with-0.025emtracking, 18px / 400 Instrument Sans body deck in#cfd9deat 1.55 line-height, dual CTA pair below — primary teal full-pill (#32e6e2fill, near-black#181a1ctext 16px / 600, 360px radius, 48px height) and secondary glass pill (rgba(255,255,255,0.10)fill, teal#32e6e2label, 1pxrgba(255,255,255,0.14)border, 360px radius).” -
“Design a Netlify feature card on white:
#ffffffbackground, 12px radius, 1px#cfd9deslate hairline border, 24×28 padding, soft single-layer shadowrgba(24, 26, 28, 0.06) 0 4px 16px -4px. Inside: 28×28 icon at top in#5653edindigo, 32px / 700 Figtree heading in#181a1c, 16px / 400 Instrument Sans body in#45455fsecondary. Hover: lift 2px + intensify shadow.” -
“Build a Netlify primary CTA: electric-teal
#32e6e2full-pill, 360px radius, 48px height, 0×24 padding, near-black#181a1ctext at 16px / 600 Instrument Sans. Hover: deepen teal to#23d4d0and scale 1.02. Never put white text on it — the teal needs dark text for AAA contrast (12.3:1).” -
“Compose a Netlify deploy-tour band: near-black
#181a1cfull-bleed section, 64px vertical padding. Centered terminal-style code block (#181a1cfill, 12px radius, mono 14px / 1.60) with teal#32e6e2success lines, amber warnings, red errors. Eyebrow above in Instrument Sans 13px / 600 uppercase0.06emin teal. Section heading in 48px / 800 Figtree near-white.” -
“Render a Netlify pricing card with featured tier: white
#ffffffcard, 12px radius, 1px#cfd9deborder, 28px padding. Tier name in Figtree 20px / 600, price in Figtree 48px / 800#181a1c, feature list with teal#32e6e2checkmarks. Featured tier replaces the border with a teal 2px outline + teal primary pill at the bottom (#32e6e2fill, near-black text, 360px radius).” -
“Render a Netlify top nav: 64px height,
rgba(255, 255, 255, 0.85)translucent white fill withbackdrop-filter: blur(12px) saturate(160%), 1px bottom hairline#e3e9ec. Wordmark left in Figtree. Center nav links (Platform, Solutions, Developers, Resources, Pricing) in Instrument Sans 15px / 500 indigo#5653ed. Right: ghostLog in+ primary tealSign uppill (#32e6e2fill, near-black text, 360px radius).”
Iteration Guide
- Check the canvas value. If it’s cream or near-white, you’ve drifted. Netlify is full
#ffffff— the brightness flip needs the brightest possible white against the near-black bands. - Add the dark bands. A page that’s white all the way down isn’t Netlify. Alternate white editorial sections with near-black
#181a1chero and feature bands — the brightness rhythm is the structure. - Switch to Figtree at 800. If your headline is a restrained 600-weight sans, you’ve ported Vercel logic. Netlify’s H1 is heavy Figtree at 800 — friendly, confident, emphatic.
- Fill the CTA with teal. If your primary button is neutral or inverted, you’ve drifted toward Vercel. Netlify fills the electric teal
#32e6e2into the pill, near-black text on top. This is the single most brand-defining move. - Pill everything. Buttons are 360px full-round, not rectangles. If your CTAs have 8px corners, they read as a different brand.
- Split the two axes. Teal
#32e6e2is action-only; indigo#5653edis links-and-nav-only. Don’t let them blur — the chromatic separation is the distinctive system. - Keep dark text on the teal. Near-black
#181a1con the teal pill, never white. The teal isn’t dark enough for white text; dark text gives 12.3:1 AAA. - Cool the support palette. Lavender surface
#e8e6f0, slate hairline#cfd9de, slate-violet secondary#45455f. The cool, indigo-shaded support is what lets the hot teal action colour pop.
Theme-toggle audit: score=5, signals=[data-theme-attr, localStorage-theme]
Drop netlify into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add netlify 2 · ship landing page
npx agentkit init --design netlify