bright · sans · playful · dense · warm
Discord
Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs.
By webdesignhot · discord.com
$ npx design-md add discord
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#5865f2 - bg-deep
#1a2081 - bg-pink
#ed7395 - bg-aubergine
#1a1b3a - surface
#ffffff - surface-soft
#f6f6f6 - surface-card
#fafafa - surface-elev
#23272a - text AA · 4.6
#ffffff - text-strong
#ffffff - text-on-light
#23272a - text-on-light-muted
#4f5660 - text-soft
rgba(255,255,255,0.72) - text-faint — · 2.0
rgba(255,255,255,0.40) - text-disabled
rgba(255,255,255,0.24) - brand — · 1.0
#5865f2 - brand-100
#e7e9fd - brand-200
#c8ccfa - brand-300
#a4abf7 - brand-400
#7983f5 - brand-500
#5865f2 - brand-600
#404eed - brand-700
#3641cc - brand-800
#28339e - brand-900
#1a2081 - on-brand
#ffffff - focus
#00b0f4 - link
#00b0f4 - link-hover
#33c2f7 - green-bright
#23a55a - yellow-bright
#f0b232 - red-bright
#f23f43 - border — · 1.2
rgba(255,255,255,0.10) - border-soft
rgba(255,255,255,0.06) - border-light
rgba(0,0,0,0.08) - border-strong — · 1.4
rgba(255,255,255,0.18) - shadow-card
rgba(0,0,0,0.15) - shadow-modal
rgba(0,0,0,0.40) - semantic-success
#23a55a - semantic-warning
#f0b232 - semantic-danger
#f23f43 - semantic-info
#00b0f4
Ship faster than ever.
display-hero "ABC Ginto Nord Discord" 88px w800 -0.02em
Ship faster than ever.
display-large "ABC Ginto Nord Discord" 64px w800 -0.015em
Ship faster than ever.
h1 "ABC Ginto Nord Discord" 44px w700 -0.01em
Built for teams that ship.
h2 "ABC Ginto Nord Discord" 32px w700 -0.005em
A complete kit
h3 "ABC Ginto Nord Discord" 28px w700 -0.005em
The quick brown fox jumps over the lazy dog.
h4 "gg sans" 22px w700 0
The quick brown fox jumps over the lazy dog.
body-large "gg sans" 20px w400 0
The quick brown fox jumps over the lazy dog.
button-large "gg sans" 18px w500 0
The quick brown fox jumps over the lazy dog.
body "gg sans" 16px w400 0
The quick brown fox jumps over the lazy dog.
button "gg sans" 16px w500 0
The quick brown fox jumps over the lazy dog.
nav-link "gg sans" 16px w500 0
The quick brown fox jumps over the lazy dog.
body-small "gg sans" 14px w400 0
OUR DESIGN SYSTEM
caption "gg sans" 13px w400 0
OUR DESIGN SYSTEM
label "gg sans" 12px w600 0.04em
OUR DESIGN SYSTEM
label-mono ui-monospace 11px w600 0.04em
The quick brown fox jumps over the lazy dog.
micro "gg sans" 11px w500 0.02em
- step-0 2px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 48px
- step-10 64px
- step-11 80px
- step-12 96px
- step-13 128px
- step-14 160px
- step-15 200px
- none
0px - micro
2px - xs
4px - sm
8px - md
12px - lg
16px - xl
24px - xxl
32px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Discord's marketing site ships the same blurple `#5865f2` that runs the in-product brand sidebar — `--brand: #5865f2` is exposed as a CSS variable directly on the document root, alongside `--brand-100` through `--brand-900` for tonal stops. Where Slack chose the introverted aubergine `#4a154b` for "Slack as a deep-work environment," Discord chose blurple — the same hue Microsoft uses for Xbox achievement banners — for "Discord as a hangout." Typography is custom: **gg sans** for body (Noto Sans-derived, licensed) and **ABC Ginto Nord Discord** (a custom stencil-energy cut by Dinamo Foundry) for the all-caps marketing headlines — e.g., "GROUP CHAT THAT'S ALL FUN & GAMES." The capital-only display sets it apart from every other SaaS marketing system, which use sentence case for warmth. The button system has seven discrete radii (4, 8, 12, 16, 24, 32, round) — denser than Linear's six, looser than Apple's two — and the primary CTA is white-on-blurple, the *inverse* of the dev-tools convention. The secondary register, **Fraunces** (`--font-clan-body`), appears only on clan/server profile pages where a more editorial voice is wanted.
- Custom display cut for the all-caps marketing headlines — stencil-energy condensed sans designed for poster scale
- Adjacent gamer-platform purple lineage; both prove blurple-spectrum brand for play-not-work registers
- Saturated indigo as a "hangout / play" register, not a "work" register — same blurple at marketing scale
- Permission to paint full panels in a saturated brand color in a SaaS-adjacent landing page
- Saturday morning cartoon postersAll-caps display + saturated chromatic field is the visual register being borrowed — playful, not corporate
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: Discord
tagline: Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs.
author: webdesignhot
source_url: https://discord.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [social, saas]
tags: [bright, sans, playful, dense, warm]
preview_swatch: ['#5865f2', '#ffffff', '#23272a']
related: [notion, raycast, github]
description: 'Discord paints its marketing site the same blurple `#5865f2` as the in-product accent and ships its proprietary type stack — gg sans for body, ABC Ginto Nord Discord for stencil-energy headlines. Seven discrete radii (4 / 8 / 12 / 16 / 24 / 32 / round), white-on-blurple primary CTAs, and full-bleed brand-canvas panels make the marketing site feel like the in-product entry hall rather than a pitch.'
colors:
bg: '#5865f2' # --brand — page canvas, the brand-canvas register
bg-deep: '#1a2081' # --bg-animated-gradient-background-indigo-1 hsl(241.5,57%,27%) — gradient toner
bg-pink: '#ed7395' # --bg-animated-gradient-background-pink-1 — secondary panel toner
bg-aubergine: '#1a1b3a' # deep panel under hero
surface: '#ffffff' # primary CTA fill, white-panel sections
surface-soft: '#f6f6f6' # nested panel on white sections
surface-card: '#fafafa' # feature card body on white panels
surface-elev: '#23272a' # dark panel sections, ink-not-paper
text: '#ffffff' # body and headlines on brand canvas
text-strong: '#ffffff' # display emphasis on dark
text-on-light: '#23272a' # text on white panels and CTA pill
text-on-light-muted: '#4f5660' # secondary copy on white panels
text-soft: 'rgba(255,255,255,0.72)' # captions on dark
text-faint: 'rgba(255,255,255,0.40)' # micro-copy on dark
text-disabled: 'rgba(255,255,255,0.24)' # disabled labels
brand: '#5865f2' # --brand — Discord blurple, --brand-500 hsl(234.94,85.56%,64.71%)
brand-100: '#e7e9fd' # --brand-100
brand-200: '#c8ccfa' # --brand-200
brand-300: '#a4abf7' # --brand-300
brand-400: '#7983f5' # --brand-400
brand-500: '#5865f2' # --brand-500 — primary blurple
brand-600: '#404eed' # --brand-600 — hover state
brand-700: '#3641cc' # --brand-700 — pressed
brand-800: '#28339e' # --brand-800 — deepest tonal stop
brand-900: '#1a2081' # --brand-900 — gradient toner
on-brand: '#ffffff' # ink on blurple
focus: '#00b0f4' # --focus-border — cyan ring on form fields
link: '#00b0f4' # --text-link — cyan, same as focus ring
link-hover: '#33c2f7' # lighter cyan on hover
green-bright: '#23a55a' # --status-online — Discord online green
yellow-bright: '#f0b232' # --status-idle
red-bright: '#f23f43' # --status-dnd / error
border: 'rgba(255,255,255,0.10)' # translucent hairline on brand canvas
border-soft: 'rgba(255,255,255,0.06)' # softer divider on dark
border-light: 'rgba(0,0,0,0.08)' # hairline on white panels
border-strong: 'rgba(255,255,255,0.18)' # stronger outline on hover
shadow-card: 'rgba(0,0,0,0.15)' # 0 4px 4px — card shadow on white panels
shadow-modal: 'rgba(0,0,0,0.40)' # 0 16px 32px — modal lift
semantic-success: '#23a55a'
semantic-warning: '#f0b232'
semantic-danger: '#f23f43'
semantic-info: '#00b0f4'
typography:
display:
family: '"ABC Ginto Nord Discord", "ABC Ginto Nord", "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
weights: [700, 800]
opentype: ['kern', 'liga']
body:
family: '"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
weights: [400, 500, 600, 700]
opentype: ['kern', 'liga', 'calt']
ui:
family: '"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif'
weights: [500, 600]
editorial:
family: 'Fraunces, Georgia, "Times New Roman", serif'
weights: [400, 500]
mono:
family: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace'
weights: [400, 500]
scale:
display-hero: { size: 88, weight: 800, lineHeight: 0.85, tracking: '-0.02em', family: display, opentype: 'kern', transform: 'uppercase' }
display-large: { size: 64, weight: 800, lineHeight: 0.88, tracking: '-0.015em', family: display, transform: 'uppercase' }
h1: { size: 44, weight: 700, lineHeight: 0.86, tracking: '-0.01em', family: display, transform: 'uppercase' }
h2: { size: 32, weight: 700, lineHeight: 0.95, tracking: '-0.005em', family: display, transform: 'uppercase' }
h3: { size: 28, weight: 700, lineHeight: 1.0, tracking: '-0.005em', family: display, transform: 'uppercase' }
h4: { size: 22, weight: 700, lineHeight: 1.15, tracking: '0', family: body }
body-large: { size: 20, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
button: { size: 16, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
button-large: { size: 18, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
nav-link: { size: 16, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
label: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.04em', family: body, transform: 'uppercase' }
label-mono: { size: 11, weight: 600, lineHeight: 1.3, tracking: '0.04em', family: mono, transform: 'uppercase' }
caption: { size: 13, weight: 400, lineHeight: 1.4, tracking: '0', family: body }
micro: { size: 11, weight: 500, lineHeight: 1.3, tracking: '0.02em', family: body }
radius:
none: 0
micro: 2
xs: 4
sm: 8
md: 12
lg: 16
xl: 24
xxl: 32
pill: 9999
spacing:
base: 4
xxs: 2
xs: 4
sm: 8
md: 12
lg: 16
xl: 24
xxl: 32
section-sm: 64
section: 96
section-lg: 128
scale: [2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 200]
layout:
page-width: 1200
prose-width: 720
header-height: 80
hero-height: 700
grid-gap: 32
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-entrance: 'cubic-bezier(0, 0, 0.2, 1)'
ease-bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
duration-fast: 100
duration-standard: 200
duration-slow: 400
duration-gradient: 12000
reduced-motion: 'respects prefers-reduced-motion: reduce — animated gradient layers freeze; CTA hovers collapse to opacity transitions only'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'rgba(0,0,0,0.04) 0 1px 2px'
standard: 'rgba(0,0,0,0.15) 0 4px 4px'
elevated: 'rgba(0,0,0,0.20) 0 8px 16px'
deep: 'rgba(0,0,0,0.40) 0 16px 32px'
ring: '0 0 0 2px #00b0f4'
brand-glow: '0 0 0 4px rgba(88,101,242,0.20)'
accessibility:
contrast-text-on-bg: 4.7 # white on blurple — AA
contrast-text-on-brand: 4.7 # white on blurple — AA
contrast-text-on-light: 13.2 # #23272a on white — AAA
contrast-soft-on-bg: 3.4 # rgba(255,255,255,0.72) on blurple — AA at large
focus-ring: '2px solid #00b0f4 with 2px offset — cyan against blurple is the system signature'
reduced-motion-honored: true
keyboard-nav: 'tab order follows visual; skip-link present; status pickers use arrow keys'
components:
button-primary-light:
background: '#ffffff'
text: '#23272a'
radius: 12
padding: '15px 24px'
height: 50
font: button-large
hover: 'background #f6f6f6; subtle lift'
active: 'background #ebebeb'
use: 'primary CTA on brand canvas — Download / Open Discord, white-on-blurple inversion'
button-primary-dark:
background: '#5865f2'
text: '#ffffff'
radius: 12
padding: '15px 24px'
height: 50
font: button-large
hover: 'background #404eed'
active: 'background #3641cc'
use: 'primary CTA on white panels — brand-on-white'
button-secondary:
background: 'rgba(255,255,255,0.10)'
text: '#ffffff'
radius: 12
padding: '15px 24px'
height: 50
font: button-large
border: '1px solid rgba(255,255,255,0.18)'
hover: 'background rgba(255,255,255,0.18)'
use: 'secondary CTA on brand canvas — Open in browser'
button-ghost:
background: 'transparent'
text: '#ffffff'
radius: 12
padding: '12px 20px'
font: button
hover: 'background rgba(255,255,255,0.06)'
use: 'tertiary nav button — Login / inline link'
button-download-pill:
background: '#ffffff'
text: '#23272a'
radius: 9999
padding: '16px 32px'
height: 56
font: button-large
hover: 'background #f6f6f6'
use: 'bottom-of-page conversion CTA — full pill marks the conversion endpoint'
card-feature:
background: '#ffffff'
text: '#23272a'
border: '1px solid rgba(0,0,0,0.08)'
radius: 16
padding: '32px'
shadow: '0 4px 4px rgba(0,0,0,0.15)'
use: 'feature card on white panel sections — drop shadow plus hairline'
card-canvas:
background: 'rgba(255,255,255,0.06)'
text: '#ffffff'
border: '1px solid rgba(255,255,255,0.10)'
radius: 16
padding: '32px'
use: 'feature card on brand canvas — translucent on blurple'
card-modal:
background: '#ffffff'
text: '#23272a'
border: 'none'
radius: 24
padding: '32px'
shadow: '0 16px 32px rgba(0,0,0,0.40)'
use: 'floating panel / modal — xl radius marks "above the page"'
input:
background: '#ffffff'
text: '#23272a'
border: '1px solid rgba(0,0,0,0.12)'
radius: 8
padding: '12px 16px'
height: 48
font: body
focus: 'border #00b0f4; ring 0 0 0 2px rgba(0,176,244,0.20)'
use: 'email / form input on white panels'
badge-pill:
background: '#5865f2'
text: '#ffffff'
radius: 9999
padding: '4px 12px'
font: micro
use: 'category tag / NEW pill on brand surfaces'
status-online:
background: '#23a55a'
text: '#ffffff'
radius: 9999
padding: '2px 8px'
font: micro
use: 'product-illustration online status indicator'
tab-pill:
background: 'rgba(255,255,255,0.10)'
text: '#ffffff'
radius: 9999
padding: '8px 16px'
font: button
use: 'comparison-section tab bar — full pill, --brand-500 fill on active'
tab-pill-active:
background: '#5865f2'
text: '#ffffff'
radius: 9999
padding: '8px 16px'
font: button
use: 'active tab — brand-500 fill'
nav-link:
background: 'transparent'
text: '#ffffff'
font: nav-link
padding: '8px 16px'
hover: 'opacity 0.8'
use: 'top nav menu — Download / Nitro / Discover / Quests / Safety / Support'
dark-mode: optional
lineage:
summary: |
Discord's marketing site ships the same blurple `#5865f2` that runs
the in-product brand sidebar — `--brand: #5865f2` is exposed as a
CSS variable directly on the document root, alongside `--brand-100`
through `--brand-900` for tonal stops. Where Slack chose the
introverted aubergine `#4a154b` for "Slack as a deep-work
environment," Discord chose blurple — the same hue Microsoft uses
for Xbox achievement banners — for "Discord as a hangout."
Typography is custom: **gg sans** for body (Noto Sans-derived,
licensed) and **ABC Ginto Nord Discord** (a custom stencil-energy
cut by Dinamo Foundry) for the all-caps marketing headlines —
e.g., "GROUP CHAT THAT'S ALL FUN & GAMES." The capital-only display
sets it apart from every other SaaS marketing system, which use
sentence case for warmth. The button system has seven discrete radii
(4, 8, 12, 16, 24, 32, round) — denser than Linear's six, looser
than Apple's two — and the primary CTA is white-on-blurple, the
*inverse* of the dev-tools convention. The secondary register,
**Fraunces** (`--font-clan-body`), appears only on clan/server
profile pages where a more editorial voice is wanted.
influences:
- name: 'Dinamo / ABC Ginto Nord'
role: 'Custom display cut for the all-caps marketing headlines — stencil-energy condensed sans designed for poster scale'
url: 'https://abcdinamo.com/typefaces/ginto'
- name: 'Twitch'
role: 'Adjacent gamer-platform purple lineage; both prove blurple-spectrum brand for play-not-work registers'
url: 'https://twitch.tv'
- name: 'Xbox / Microsoft Game Pass'
role: 'Saturated indigo as a "hangout / play" register, not a "work" register — same blurple at marketing scale'
url: 'https://xbox.com'
- name: 'Roblox'
role: 'Permission to paint full panels in a saturated brand color in a SaaS-adjacent landing page'
url: 'https://roblox.com'
- name: 'Saturday morning cartoon posters'
role: 'All-caps display + saturated chromatic field is the visual register being borrowed — playful, not corporate'
---
## 1. Visual Theme & Atmosphere
Discord's homepage is a sustained immersion in blurple. The hero panel fills the viewport with a `#5865f2` field tinted toward `#1a2081` at the edges by an animated gradient layer (`--bg-animated-gradient-background-indigo-1: hsl(241.5 57% 27%)`). The headline sits inside in 35–88px **ABC Ginto Nord Discord** — a condensed stencil-feeling all-caps cut — that reads like a Saturday morning cartoon poster. The primary CTA is a **white-on-blurple** pill with `#23272a` ink on `#ffffff` fill, the inverse of every dev-tool that paints brand-on-white.
What makes it distinctive vs. nearby alternatives: where Slack and Microsoft Teams render their marketing sites in white-with-accent, Discord renders the page itself in the brand color and inverts the primary CTA. The site feels less like a pitch and more like the in-product entry hall — same blurple, same custom type, same heavy 12px-radius card geometry. It is the rare marketing surface that does not soften its product into a "lifestyle" register; instead, it amplifies the product's own register at marketing scale.
Below the hero, light-and-dark panels alternate — full-bleed blurple bands paired with white-panel feature spreads with `#23272a` ink. The white panels carry feature cards at 16px radius with a 4px-soft drop shadow; the blurple panels carry translucent cards with a `rgba(255,255,255,0.10)` hairline border and zero shadow (depth comes from the animated gradient layers underneath). Section rhythm is bold and chunky — 96–128px between sections, not Linear's tight 64px.
The marketing voice is unapologetically playful: section headlines like "GROUP CHAT THAT'S ALL FUN & GAMES" and "WHERE HANGING OUT IS EASY" set in all-caps Ginto Nord at 44–88px, with a body deck immediately below in sentence-case gg sans. The case shift between headline and deck is the system's primary register-switch. Capital-only display + sentence-case body is the visual signature — and the reason any sentence-case Discord-style headline immediately reads "off."
Look at the page in motion and a slow gradient cycle (`indigo-1` → `indigo-2` → `pink-1`) drifts behind the brand canvas at ~12-second cadence. It's the only ambient motion on the page — buttons and cards stay calm. The animated layer is what gives the hero its "we're inside a club, not a pitch deck" feel without ever resorting to particle effects or video.
**Key Characteristics:**
- Brand-canvas register: page bg is `#5865f2` blurple, not white.
- All-caps display: ABC Ginto Nord Discord at 35–88px, weights 700–800.
- White-on-blurple primary CTA — inverse of every dev-tool convention.
- Seven radii: 0/4/8/12/16/24/32/round — denser than Linear, looser than Apple.
- Sentence-case body in gg sans (custom Noto Sans-derived family).
- Animated gradient layers (`indigo-1`, `indigo-2`, `pink-1`) at 12s cadence.
- Cyan focus/link `#00b0f4` against blurple — system's signature complementary.
- Status colors lifted from the in-product UI (`#23a55a` online, `#f0b232` idle, `#f23f43` dnd).
- Drop shadows only on white panels — brand canvas relies on animated layers for depth.
- Bottom-of-page CTA flips to full pill (9999) — marks the conversion endpoint.
## 2. Color Palette & Roles
### Primary
- **Background** (`#5865f2`): page canvas — the brand-canvas register. This is `--brand` exposed as the document body color, not just an accent.
- **Text** (`#ffffff`): primary copy on brand canvas, bright and high-contrast.
- **Text on Light** (`#23272a`): body and headlines on white panels — Discord's near-black with a cool undertone (`hsl(220, 8%, 16%)` adjacent).
- **Brand** (`#5865f2`): Discord blurple, also `--brand-500` at `hsl(234.94, 85.56%, 64.71%)` — saturated, just-blue-of-purple.
### Brand & Dark
The full `--brand-100` through `--brand-900` tonal scale:
- **brand-100** (`#e7e9fd`): faintest tint — used for tonal washes on white.
- **brand-200** (`#c8ccfa`): tint — info banners.
- **brand-300** (`#a4abf7`): tint — illustration accent.
- **brand-400** (`#7983f5`): step below brand-500 — hover ghost states.
- **brand-500** (`#5865f2`): primary blurple — the canvas value.
- **brand-600** (`#404eed`): hover state on brand-on-white CTA.
- **brand-700** (`#3641cc`): pressed.
- **brand-800** (`#28339e`): deepest tonal stop — rarely used standalone.
- **brand-900** (`#1a2081`): gradient toner — used at panel edges.
### Accent
- **Background Deep** (`#1a2081`): `--bg-animated-gradient-background-indigo-1` — gradient toner at panel edges.
- **Background Pink** (`#ed7395`): `--bg-animated-gradient-background-pink-1` — secondary panel toner for variety.
- **Background Aubergine** (`#1a1b3a`): deep panel under hero — non-brand-canvas dark register.
- **Cyan Accent** (`#00b0f4`): `--focus-border` and `--text-link`. Used as both focus ring and inline link — the system's signature complementary against blurple.
### Interactive
- **Link** (`#00b0f4`): cyan — same as focus ring, deliberate dual-duty.
- **Link Hover** (`#33c2f7`): lighter cyan.
- **Focus** (`#00b0f4`): 2px solid ring with 2px offset.
- **Disabled** (`rgba(255,255,255,0.24)`): faded labels on dark.
### Neutral Scale
On dark/brand canvas:
- **Text** (`#ffffff`): primary.
- **Text Soft** (`rgba(255,255,255,0.72)`): captions, supporting copy.
- **Text Faint** (`rgba(255,255,255,0.40)`): micro-copy.
- **Text Disabled** (`rgba(255,255,255,0.24)`).
On white panels:
- **Text on Light** (`#23272a`): primary copy and headlines.
- **Text on Light Muted** (`#4f5660`): secondary copy on white.
### Surface & Borders
- **Surface** (`#ffffff`): primary CTA fill, white-panel sections.
- **Surface Soft** (`#f6f6f6`): nested card body on white sections.
- **Surface Card** (`#fafafa`): faintly tinted feature card.
- **Surface Elev** (`#23272a`): dark panel sections — ink-not-paper alternation.
- **Border** (`rgba(255,255,255,0.10)`): translucent hairline on brand canvas.
- **Border Soft** (`rgba(255,255,255,0.06)`): softer divider on dark — nested rows.
- **Border Light** (`rgba(0,0,0,0.08)`): hairline on white panels — feature card outline.
- **Border Strong** (`rgba(255,255,255,0.18)`): hover/active outline on dark.
### Shadow Colors
- **Shadow Card** (`rgba(0,0,0,0.15)` at `0 4px 4px`): the canonical card lift on white panels.
- **Shadow Modal** (`rgba(0,0,0,0.40)` at `0 16px 32px`): floating panel / modal.
- **Brand Glow** (`0 0 0 4px rgba(88,101,242,0.20)`): rare focus halo on brand-color CTAs.
### Semantic
Lifted directly from the in-product status colors — Discord's signature green/yellow/red:
- **Success / Online** (`#23a55a`): `--status-online` — Discord online green.
- **Warning / Idle** (`#f0b232`): `--status-idle`.
- **Danger / DND** (`#f23f43`): `--status-dnd` and error.
- **Info** (`#00b0f4`): same as cyan link/focus.
## 3. Typography Rules
### Font Family
- **Display:** `"ABC Ginto Nord Discord", "ABC Ginto Nord", "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif`. Weights 700/800. **All-caps by default** — the family is designed for it.
- **Body:** `"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`. Weights 400/500/600/700. Custom Noto Sans-derived family Discord licensed for in-product use, exposed via `--font-primary`.
- **Editorial:** `Fraunces, Georgia, serif`. Weights 400/500. Used only on clan/server profile pages (`--font-clan-body`) for a more editorial register.
- **Mono:** `ui-monospace, "SF Mono", Menlo, Consolas, monospace`. System fallback only — Discord does not ship a custom mono.
- **OpenType:** standard `kern` and `liga`; no stylistic-set tricks. Ginto Nord's compressed letterforms carry the visual personality without OpenType swaps.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | ABC Ginto Nord | 88 | 800 | 0.85 | -0.02em | kern | Homepage hero — UPPERCASE only |
| display-large | ABC Ginto Nord | 64 | 800 | 0.88 | -0.015em | kern | Section hero — UPPERCASE only |
| h1 | ABC Ginto Nord | 44 | 700 | 0.86 | -0.01em | kern | Page H1 — UPPERCASE |
| h2 | ABC Ginto Nord | 32 | 700 | 0.95 | -0.005em | kern | Section heads — UPPERCASE |
| h3 | ABC Ginto Nord | 28 | 700 | 1.0 | -0.005em | kern | Sub-section heads — UPPERCASE |
| h4 | gg sans | 22 | 700 | 1.15 | 0 | kern, liga | Card titles — sentence case |
| body-large | gg sans | 20 | 400 | 1.5 | 0 | kern, liga | Hero deck under headline |
| body | gg sans | 16 | 400 | 1.5 | 0 | kern, liga | Default body |
| body-small | gg sans | 14 | 400 | 1.5 | 0 | kern, liga | Footer body |
| button | gg sans | 16 | 500 | 1.0 | 0 | kern, liga | CTA label |
| button-large | gg sans | 18 | 500 | 1.0 | 0 | kern, liga | Primary CTA on hero |
| nav-link | gg sans | 16 | 500 | 1.4 | 0 | kern, liga | Top nav menu |
| label | gg sans | 12 | 600 | 1.3 | 0.04em | kern | UPPERCASE eyebrow |
| label-mono | mono | 11 | 600 | 1.3 | 0.04em | tnum | UPPERCASE category — rare |
| caption | gg sans | 13 | 400 | 1.4 | 0 | kern | Caption |
| micro | gg sans | 11 | 500 | 1.3 | 0.02em | kern | Pill / badge text |
### Principles
- **Case is hierarchy.** Display tier is always all-caps in ABC Ginto Nord; body tier is always sentence case in gg sans. The case shift is the primary register-switch — heavier than weight or size.
- **Compressed display.** Ginto Nord's narrow letterforms allow the display to hold weight 700–800 without gobbling line width. Headlines stack two lines comfortably at line-height 0.85–0.95.
- **Weight 500 is the body voice ceiling.** gg sans body never goes above 500 except for emphasis spans; the headline voice owns the heavy weights.
- **No serif on marketing.** Fraunces lives only on clan/server profile pages — never on the marketing homepage. Mixing serif into the hero would dilute the cartoon-poster register.
- **Tracking discipline.** Display tier always negative (`-0.005em` to `-0.02em`); body always 0; uppercase eyebrows positive (`0.04em`). The three regimes are non-overlapping.
- **Custom mono is absent.** Discord trusts system mono — code in marketing screenshots renders in whatever the screenshotting machine had installed. The brand identity does not lean on mono the way Raycast or Resend do.
- **gg sans is the connective tissue.** Body, button, nav, caption, and pill all share gg sans across weight 400/500/600. The single body voice keeps the page coherent against the loud display tier.
## 4. Component Stylings
### Buttons
**Primary (Light) — White on Blurple**
- Background: `#ffffff`
- Text: `#23272a`
- Padding: `15px 24px`, height 50px
- Radius: 12 (md)
- Font: button-large (gg sans 18 / 500)
- Hover: `#f6f6f6` background
- Active: `#ebebeb`
- Use: hero CTA on brand canvas — Download / Open Discord. The signature affordance.
**Primary (Dark) — Brand on White**
- Background: `#5865f2`
- Text: `#ffffff`
- Padding: `15px 24px`, height 50px
- Radius: 12 (md)
- Hover: `#404eed` (brand-600)
- Active: `#3641cc` (brand-700)
- Use: primary CTA on white-panel sections — same geometry, inverted fill.
**Secondary**
- Background: `rgba(255,255,255,0.10)` translucent
- Text: `#ffffff`
- Border: `1px solid rgba(255,255,255,0.18)`
- Padding: `15px 24px`, height 50px
- Radius: 12
- Hover: background opacity to 0.18
- Use: "Open Discord in your browser" — paired with primary on hero.
**Ghost / Tertiary**
- Background: transparent
- Text: `#ffffff`
- Padding: `12px 20px`
- Hover: `rgba(255,255,255,0.06)` background
- Use: nav login link, inline ghost actions.
**Download Pill (Conversion Endpoint)**
- Background: `#ffffff`, Text: `#23272a`
- Padding: `16px 32px`, height 56px
- Radius: **9999 (full pill)** — geometry shift signals "this is the action"
- Use: bottom-of-page final download CTA — full pill marks the conversion endpoint.
### Cards
**Feature Card (White Panel)**
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.08)`
- Radius: 16 (lg)
- Padding: 32px
- Shadow: `0 4px 4px rgba(0,0,0,0.15)`
- Use: feature card on white-panel sections.
**Canvas Card (Brand Canvas)**
- Background: `rgba(255,255,255,0.06)` translucent
- Border: `1px solid rgba(255,255,255,0.10)`
- Radius: 16 (lg)
- Padding: 32px
- No shadow — depth comes from animated gradient under canvas.
- Use: feature card on brand canvas.
**Modal**
- Background: `#ffffff`, Text: `#23272a`
- Radius: 24 (xl) — distinct from card 16
- Padding: 32
- Shadow: `0 16px 32px rgba(0,0,0,0.40)`
- Use: floating panels, dialog overlays, gift-claim modals.
### Badges & Pills
**Brand Pill**
- Background: `#5865f2`, Text: `#ffffff`
- Radius: 9999, Padding: `4px 12px`
- Font: micro (11/500)
- Use: NEW / category tag.
**Status Indicator**
- Online: `#23a55a` background, white text
- Idle: `#f0b232`
- DND: `#f23f43`
- Radius: 9999, Padding: `2px 8px`
- Use: product-illustration status — lifted from the in-product UI.
### Tabs
**Tab Pill (Inactive)**
- Background: `rgba(255,255,255,0.10)`
- Text: `#ffffff`
- Radius: 9999 (full pill)
- Padding: `8px 16px`
**Tab Pill (Active)**
- Background: `#5865f2`
- Text: `#ffffff`
- Radius: 9999
The full-pill tab bar on the comparison sections is one of the most distinctive primitives — it's the same tab geometry the in-product channel switcher uses.
### Inputs / Forms
**Input**
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.12)`
- Radius: 8 (sm)
- Padding: `12px 16px`, height 48
- Focus: `border #00b0f4; ring 0 0 0 2px rgba(0,176,244,0.20)` — cyan against blurple is the signature focus color.
- Use: email input, contact form fields.
### Navigation
Top nav is a transparent strip 80px tall on hero, acquiring backdrop-blur and a `rgba(255,255,255,0.10)` border on scroll. Links are gg sans 16/500 white with a quick opacity hover. The Login button is a ghost variant; the Download CTA is the white pill primary.
### Decorative
- **Animated Gradient Layer:** behind the brand canvas, three colored hues (`indigo-1`, `indigo-2`, `pink-1`) drift on a ~12s cadence. The only ambient motion on the page.
- **Custom Illustrations:** Discord's marketing uses commissioned illustrations of stylized characters in saturated chromatic fields — the visual register is closer to a children's book than a dev-tool screenshot.
## 5. Layout Principles
### Spacing System
Base unit 4px. Scale: 2 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128 / 160 / 200. Section gaps run 96–128px (chunky, not tight); inside-card padding 32; nav padding `8px 16px`.
The density is loose — Discord's marketing site is *not* an information-dense product surface. It's a poster. Each section has one clear conversion or comprehension goal, and whitespace earns it room to breathe.
### Grid & Container
- **Page width:** 1200px max.
- **Prose width:** 720px (intro paragraphs).
- **Header height:** 80px.
- **Hero height:** ~700px — full viewport on desktop.
- **Grid gap:** 32px between feature cards.
The hero is edge-to-edge with content centered on the 1200px column. Below the fold, full-bleed brand-canvas panels alternate with white-panel feature spreads — each section ~700px tall with content centered.
### Whitespace Philosophy
Discord's marketing whitespace is **chunky, not tight**. There's deliberate air around the H1, around the CTA, around feature cards. The page never feels dense. Whitespace + saturated chromatic field is the brand atmosphere — the opposite of Stripe's information-dense gradient surfaces.
### Section Cadence
The page alternates light-and-dark in a deliberate rhythm:
1. Brand canvas hero (blurple) — 700px tall
2. White panel feature spread — 600px
3. Brand canvas mid-section (with `pink-1` gradient toner) — 600px
4. Aubergine deep panel — 500px
5. Brand canvas final CTA — 400px
6. Dark footer — `#23272a`
The alternation is what gives the page its long-form rhythm — like a magazine with brand-color spreads between editorial pages.
## 6. Shapes & Radius Scale
Seven discrete radii exposed as `--radius-{none,xs,sm,md,lg,xl,xxl}` plus the `--radius-round` sentinel:
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Borderless inline pills (rare) |
| XS | 4px | Status indicators, small badges |
| SM | 8px | Inputs, secondary chips |
| **MD** | **12px** | **Default button radius** — the system's most-used corner |
| **LG** | **16px** | **Default card radius** — feature cards on white panels |
| XL | 24px | Modal, floating panels, hover-surfaced elements |
| XXL | 32px | Featured banner cards (rare) |
| Pill | 9999 | Tab bars, status pills, conversion-endpoint download CTA |
**Compound radii:** none on Discord — the system is consistent corners on each component, no `0 0 12px 12px` partials. The seven discrete tiers are themselves the system; partial radii would feel like a different brand.
The semantic mapping is clear: 12 for buttons, 16 for cards, 24 for modals/floating panels, full pill (9999) for the conversion endpoint download CTA. Mixing them outside that mapping reads as off-brand.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Body copy on canvas; nav default |
| 1 | `0 4px 4px rgba(0,0,0,0.15)` | Feature card on white panel |
| 2 | `0 8px 16px rgba(0,0,0,0.20)` | Hover-elevated card |
| 3 | `0 16px 32px rgba(0,0,0,0.40)` | Modal, floating panel |
| 4 | Animated gradient layer (`indigo-1`, `pink-1`) | Brand canvas depth |
| 5 | `0 0 0 4px rgba(88,101,242,0.20)` glow | Focus halo on brand CTAs (rare) |
### Shadow Philosophy
Discord uses two depth strategies depending on canvas:
- **On brand canvas:** depth comes from the animated gradient layers (`indigo-1`/`indigo-2`/`pink-1`) drifting underneath. Cards are translucent with a hairline border; they feel like glass on a chromatic field. No drop shadows.
- **On white panels:** classic drop-shadow card lift — `0 4px 4px rgba(0,0,0,0.15)` is the canonical feature-card shadow. Modals jump to `0 16px 32px rgba(0,0,0,0.40)`.
The brand-canvas-no-shadow rule is the discipline — adding drop shadows to a translucent card on blurple immediately reads as a design accident.
## 8. Interaction & Motion ✨
### Easing Curves
- **Standard:** `cubic-bezier(0.4, 0, 0.2, 1)` — default ease-in-out for hover transitions.
- **Emphasized:** `cubic-bezier(0.2, 0, 0, 1)` — modal entrance, full reveal.
- **Entrance:** `cubic-bezier(0, 0, 0.2, 1)` — content fade-in on scroll.
- **Bounce:** `cubic-bezier(0.34, 1.56, 0.64, 1)` — used sparingly on illustration callouts.
### Duration Buckets
- **Fast (100ms):** color transitions, opacity flickers.
- **Standard (200ms):** button hover, card lift, link underline.
- **Slow (400ms):** modal entrance, section transitions.
- **Gradient (12s):** the ambient `indigo-1` → `indigo-2` → `pink-1` drift behind brand canvas.
### Per-Component Micro-States
- **Button (primary light):** background flickers `#ffffff` → `#f6f6f6` on hover, no transform. 200ms standard ease.
- **Button (primary dark):** background `#5865f2` → `#404eed` (brand-500 → brand-600). 200ms.
- **Card on brand canvas:** border opacity 0.10 → 0.18 on hover, no transform. 200ms.
- **Card on white panel:** shadow intensifies `0 4px 4px` → `0 8px 16px`, with a 2px lift via translateY. 200ms.
- **Link / nav-link:** opacity 1 → 0.8 on hover. No underline.
- **Tab pill:** background opacity 0 → 0.10 on hover; on active, background flips to `#5865f2`.
- **Status indicator (online):** continuous subtle pulse (~2s) at scale 1.0 → 1.05 — the only periodic motion outside the gradient.
### Page Transitions
- Hero appears with content fade + 8px translateY rise, ease-entrance, 400ms.
- Below-fold sections fade-in on scroll-into-viewport, 300ms each.
- Modal entrance: backdrop fade 300ms + modal scale 0.96 → 1.0 + opacity 0 → 1, ease-emphasized 400ms.
### Reduced Motion
`@media (prefers-reduced-motion: reduce)`:
- Animated gradient layers freeze at first frame (no drift).
- All transforms collapse to opacity-only transitions.
- Status indicator pulse stops.
- Hover state transitions still fire (200ms color/opacity) — they aid usability.
## 9. Accessibility & A11y ✨
### Contrast Pairs
- **Body text on brand canvas:** `#ffffff` on `#5865f2` → 4.7:1. **AA at body sizes; AAA at large text.** This is the lowest-contrast pair on the page.
- **Body text on white panel:** `#23272a` on `#ffffff` → 13.2:1. **AAA.**
- **Soft text on brand canvas:** `rgba(255,255,255,0.72)` on `#5865f2` → ~3.4:1. **AA at large only.** Use only for captions ≥18px or use `#ffffff` for body.
- **Cyan link on brand canvas:** `#00b0f4` on `#5865f2` → 2.1:1 — **fails AA.** Discord mitigates by underlining inline cyan links and never relying on color alone.
- **Cyan link on white panel:** `#00b0f4` on `#ffffff` → 2.8:1 — also fails. Discord uses cyan only with bold weight or underline on white.
- **Focus ring:** `#00b0f4` 2px on `#5865f2` → ring-on-canvas contrast ~2.1:1 — borderline; the ring's 2px offset and animated focus pulse compensate.
### Focus Indicators
Standard focus is `2px solid #00b0f4` with 2px offset. Cyan against blurple is the signature complementary — recognizable as Discord's focus across the entire product. Form fields add an inner ring of `0 0 0 2px rgba(0,176,244,0.20)`.
### ARIA Pattern Recommendations
- **Top nav:** `<nav aria-label="Primary">` with skip link at top.
- **Tab bar (comparison sections):** `role="tablist"`, individual `role="tab"`, content panels `role="tabpanel"` with `aria-labelledby`.
- **Modal:** `role="dialog"` + `aria-modal="true"` + `aria-labelledby` on title.
- **Status indicators:** `aria-label="Online"` / `"Idle"` / `"Do Not Disturb"` — color-only signaling fails for color-blind users.
- **CTA buttons:** semantic `<button>` or `<a>` with descriptive label — never icon-only without `aria-label`.
### Keyboard Navigation
- Tab order follows visual layout: nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to `#main-content` first focus stop.
- Tab pills are keyboard-navigable with arrow keys (left/right between tabs, enter to activate).
- Modal traps focus until dismissed (Esc or close button).
- Status pickers (in-product analog) use arrow keys; marketing surface inherits the pattern.
### Screen Reader Hints
- Hero headlines that read all-caps via CSS use `text-transform: uppercase` so screen readers receive the underlying lowercase text — not "G-R-O-U-P C-H-A-T."
- Brand canvas color-shift between sections is purely decorative; no announcements needed.
- Animated gradient layers carry `aria-hidden="true"` — they're decorative, never content.
### Reduced Motion
`prefers-reduced-motion: reduce` collapses gradient drift, pulse animations, and all transforms. Color transitions remain (they aid usability for hover/focus feedback).
## 10. Responsive Behavior
### Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–640px | Single column, hero height collapses to ~520px |
| Tablet | 640–1024px | Two-column feature grids, hero stays full-bleed |
| Desktop | 1024–1280px | Three-column feature grids, 1200px container caps |
| Wide | 1280–1536px+ | 1200px container holds; surrounding gutters absorb extra width |
### Touch Targets
- Buttons height ≥48px on mobile (50–56 on desktop) — exceeds WCAG 2.5.5 44×44 minimum.
- Tab pills 36px height — pad with 8px around for touch.
- Nav links pad to 48×48 on mobile via padding.
### Collapsing Strategy
- **Hero:** display-hero shrinks 88 → 56 → 44 → 36 across breakpoints. Line-height stays 0.85–0.95.
- **Feature grid:** 3-col → 2-col → 1-col. Card padding shrinks 32 → 24 → 20.
- **Nav:** desktop horizontal menu collapses to hamburger at <1024px.
- **CTAs:** primary + secondary stack vertically at <640px, full-width.
- **Animated gradient:** persists across breakpoints — it's the brand atmosphere.
### Image Behavior
- Hero illustration (commissioned, full-bleed character art) scales with viewport via aspect-ratio container.
- Product screenshots inside cards lock to 16:9 aspect, scale to fit card width.
- All decorative imagery loads with `loading="lazy"` below fold.
### Container Queries
Discord does not heavily use container queries on the marketing site — viewport breakpoints carry the responsive logic. Future-likely candidate: feature cards adapting padding based on container width rather than viewport.
## 11. Content & Voice ✨
### Tone
**Playful, casual, inclusive — the "hangout, not work" register.** Discord's marketing voice trusts that its audience knows what a chat app is and gives them a reason to choose Discord specifically: friends, communities, games, hobbies. It avoids enterprise gloss; it embraces "vibes."
### Microcopy Patterns
- **Headlines** in all-caps Ginto Nord: "GROUP CHAT THAT'S ALL FUN & GAMES", "WHERE HANGING OUT IS EASY", "IMAGINE A PLACE…"
- **Decks** in sentence-case gg sans 20: "Discord is great for playing games and chilling with friends, or even building a worldwide community."
- **CTA verbs:** "Download for Mac/Windows/Linux", "Open Discord in your browser", "Get Nitro" (subscription), "Get started" (broad).
- **Error messages** (rare on marketing, but the in-product convention): friendly + specific. "Something's not right" not "Error 500." Always with a recovery path.
### Empty States (in-product analog)
The marketing site doesn't show empty states, but the in-product convention is: friendly illustration + headline ("Nothing here yet") + suggested action ("Send a message to start the conversation") — never just "No data."
### Success Confirmations
- After download: "Download started!" — not "Success." Casual, present-tense.
- After form submit: "Thanks! We'll be in touch."
- Toast pattern (in-product): icon + short message + optional action button.
### CTA Verb Conventions
The verbs Discord uses, ranked by frequency:
1. **Download** (for app installation — primary conversion)
2. **Open Discord in your browser** (secondary, cross-platform CTA)
3. **Get Nitro** (subscription upsell)
4. **Get Started** (top-of-funnel)
5. **Login** (returning users)
What Discord *doesn't* say: "Sign up free", "Start your free trial", "Try it now" — too SaaS-y. The brand voice avoids the dev-tool conversion vocabulary.
## 12. Dark Mode & Theming ✨
Discord's marketing site is **brand-canvas-first** — the page itself is blurple, with white-panel sections alternating. There isn't a separate dark-mode token swap because the canvas already runs in saturated brand color. The in-product app *does* offer light/dark/AMOLED themes, but the marketing site does not mirror that — it's always brand-canvas.
If implementing a Discord-style brand-canvas system as a "theme":
```yaml
colors-dark:
bg: '#5865f2' # brand canvas — same in both modes
surface: '#ffffff' # white-panel sections persist
text: '#ffffff' # body on canvas
text-on-light: '#23272a' # body on white panel
brand: '#5865f2'
brand-deep: '#1a2081' # gradient toner
border: 'rgba(255,255,255,0.10)'
```
The "dark mode" of a brand-canvas system is *deeper canvas* (`#1a1b3a` aubergine for premium / Nitro pages) rather than canvas-flip. Discord's Nitro tier uses an aubergine-on-blurple layered canvas as its visual differentiator.
## 13. Lineage & Influences
Discord's design lineage is non-traditional for SaaS. Where dev-tool peers borrow from typographic publishing (Linear → Inter, Resend → Domaine), Discord borrows from **gaming-platform marketing** (Twitch, Xbox, Roblox) and **Saturday-morning-cartoon poster art**. The all-caps display + saturated chromatic field is the visual vocabulary of Cartoon Network, MTV's '90s graphics package, and Xbox achievement banners — repurposed for a chat app.
The custom type stack signals premium investment without resorting to a serif (which would feel editorial / old-media). **gg sans** (Noto Sans-derived, custom-licensed) and **ABC Ginto Nord Discord** (Dinamo Foundry custom cut) together cost more to license/commission than most SaaS brands spend on type — and the result is a marketing surface that no competitor can copy without commissioning their own family.
The **white-on-blurple primary CTA** is the most quoted move in Discord's system. It rejects the dev-tools convention of "brand fill on white" and asserts a brand-canvas register. Apple's macOS download pages do something similar (white-on-dark primary), but Discord's saturated-blurple-as-canvas takes it further.
**Influences:**
- **Dinamo / ABC Ginto Nord** — custom display cut for the all-caps marketing headlines (https://abcdinamo.com/typefaces/ginto)
- **Twitch** — adjacent gamer-platform purple lineage (https://twitch.tv)
- **Xbox / Microsoft Game Pass** — saturated indigo as a "play" register (https://xbox.com)
- **Roblox** — permission for full saturated-color canvas in a SaaS-adjacent landing page (https://roblox.com)
- **Cartoon Network / MTV '90s graphics** — all-caps display + chromatic field is the visual register being borrowed
- **Apple macOS download pages** — white-pill primary CTA on dark canvas
## 14. Do's and Don'ts
### Do's
- **Do** paint full panels in the brand color. Discord owns blurple the way Stripe owns iridescent gradients — half-painting it dilutes.
- **Do** use all-caps for the display tier. ABC Ginto Nord Discord is designed for it; sentence case loses the marketing voice entirely.
- **Do** invert primary CTAs to white-on-brand on brand-canvas sections. The dev-tools convention of brand-on-white doesn't match the immersive register.
- **Do** keep the seven discrete radii consistent: 4 for tiny chips, 8 for inputs, 12 for buttons, 16 for cards, 24 for modals, 32 for featured banners, full pill for the conversion endpoint.
- **Do** flip the bottom-of-page download CTA to full pill (9999). Geometry shift signals "this is the action."
- **Do** alternate brand-canvas and white-panel sections in long-form rhythm — the magazine pacing is the brand atmosphere.
- **Do** use cyan (`#00b0f4`) as the focus ring and link color — it's the signature complementary against blurple.
- **Do** lift status colors directly from the in-product UI (`#23a55a` online, etc.) — the consistency is the brand.
### Don'ts
- **Don't** mix the seven radii arbitrarily. The semantic mapping (12 for buttons, 16 for cards, 24 for modals, round for conversion) is the system.
- **Don't** add drop shadows on the brand canvas. Use the animated gradient layers for depth instead.
- **Don't** re-color the focus ring. Cyan against blurple is the system's signature complementary, and it carries accessibility weight as well as brand weight.
- **Don't** sentence-case the all-caps display tier. Ginto Nord Discord is designed for caps; rendering it sentence-case immediately reads off-brand.
- **Don't** use Fraunces (or any serif) on the marketing surface. Editorial register doesn't match the cartoon-poster atmosphere.
- **Don't** weight body above 500. The display tier owns 700–800; mixing heavy body weights muddies the case-as-hierarchy system.
- **Don't** introduce a third saturated chromatic accent. Blurple + cyan + status hues is the entire palette; adding "brand pink" or "brand teal" would dilute.
- **Don't** lean on Slack-style restraint. Discord's identity is loud and warm; muted treatments read as a different brand.
## 15. Agent Prompt Guide
### Quick Color Reference
```
brand: #5865f2
brand-deep: #1a2081
text-on-brand: #ffffff
text-on-light: #23272a
white-panel: #ffffff
focus / link: #00b0f4
border-canvas: rgba(255,255,255,0.10)
border-light: rgba(0,0,0,0.08)
status-online: #23a55a
status-dnd: #f23f43
```
### Example Component Prompts
- **Hero:** "Create a hero with a `#5865f2` blurple full-bleed canvas, an all-caps headline in ABC Ginto Nord 88px / weight 800 / line-height 0.85 reading 'GROUP CHAT THAT'S ALL FUN & GAMES', a 20px gg sans deck below in `rgba(255,255,255,0.72)`, and a primary CTA pill in `#ffffff` with `#23272a` text at 12px radius."
- **Feature card:** "Design a feature card on a white-panel section with `#ffffff` background, `1px solid rgba(0,0,0,0.08)` border, 16px radius, 32px padding, `0 4px 4px rgba(0,0,0,0.15)` drop shadow, h4 title in gg sans 22/700 `#23272a`, body in gg sans 16/400 `#4f5660`."
- **Tab bar:** "Build a comparison tab bar with full-pill (9999) tabs at 8px 16px padding, inactive state `rgba(255,255,255,0.10)` background and white text, active state `#5865f2` background with white text, all on a brand-canvas section."
- **Download CTA endpoint:** "Place a final-CTA download button at the bottom of the page as a full pill (9999 radius), `#ffffff` background, `#23272a` text, 16px 32px padding, 56px height — the geometry shift from 12px to full pill signals 'this is the conversion endpoint'."
- **Animated gradient canvas:** "Add an animated gradient layer behind the brand canvas with three colored hues (`indigo-1: hsl(241.5,57%,27%)`, `indigo-2: hsl(241.5,77%,17%)`, `pink-1: hsl(343,84%,69%)`) drifting on a 12-second cadence at low opacity — the only ambient motion on the page."
- **Feature panel on dark:** "Design a feature card on the brand canvas with `rgba(255,255,255,0.06)` translucent background, `1px solid rgba(255,255,255,0.10)` hairline border, 16px radius, no shadow — depth comes from the animated gradient layer underneath."
### Iteration Guide
1. **Anchor the canvas in `#5865f2`.** If you start from white, you'll never get to the Discord register; the brand-canvas register is non-negotiable.
2. **Set the headline in ABC Ginto Nord all-caps.** Sentence-case headlines immediately read off-brand. If Ginto Nord isn't licensed, use a condensed bold sans (Druk Wide, Helvetica Neue Condensed Black) at 800 weight, all-caps, line-height 0.85.
3. **Invert the primary CTA.** White pill with `#23272a` text on brand canvas; brand pill with white text on white panels. Don't blend.
4. **Use the seven-radius scale consistently.** 12 for buttons, 16 for cards, 24 for modals, full pill for the conversion endpoint. Mixing reads as accident.
5. **Add the animated gradient layer.** Even subtle drift (2–3% opacity, 12s cadence) is what makes the canvas feel "Discord" instead of "any saturated SaaS."
6. **Pair display all-caps with body sentence-case.** The case-as-hierarchy is the system's primary register-switch — bigger lever than weight or size.
7. **Use cyan (`#00b0f4`) only for focus and link.** Don't introduce a third accent; the blurple + cyan pair is the signature.
8. **Stack sections in chunky rhythm.** 96–128px between sections, not 64px tight. The whitespace is the brand atmosphere.
1. Visual Theme & Atmosphere
Discord’s homepage is a sustained immersion in blurple. The hero panel fills the viewport with a #5865f2 field tinted toward #1a2081 at the edges by an animated gradient layer (--bg-animated-gradient-background-indigo-1: hsl(241.5 57% 27%)). The headline sits inside in 35–88px ABC Ginto Nord Discord — a condensed stencil-feeling all-caps cut — that reads like a Saturday morning cartoon poster. The primary CTA is a white-on-blurple pill with #23272a ink on #ffffff fill, the inverse of every dev-tool that paints brand-on-white.
What makes it distinctive vs. nearby alternatives: where Slack and Microsoft Teams render their marketing sites in white-with-accent, Discord renders the page itself in the brand color and inverts the primary CTA. The site feels less like a pitch and more like the in-product entry hall — same blurple, same custom type, same heavy 12px-radius card geometry. It is the rare marketing surface that does not soften its product into a “lifestyle” register; instead, it amplifies the product’s own register at marketing scale.
Below the hero, light-and-dark panels alternate — full-bleed blurple bands paired with white-panel feature spreads with #23272a ink. The white panels carry feature cards at 16px radius with a 4px-soft drop shadow; the blurple panels carry translucent cards with a rgba(255,255,255,0.10) hairline border and zero shadow (depth comes from the animated gradient layers underneath). Section rhythm is bold and chunky — 96–128px between sections, not Linear’s tight 64px.
The marketing voice is unapologetically playful: section headlines like “GROUP CHAT THAT’S ALL FUN & GAMES” and “WHERE HANGING OUT IS EASY” set in all-caps Ginto Nord at 44–88px, with a body deck immediately below in sentence-case gg sans. The case shift between headline and deck is the system’s primary register-switch. Capital-only display + sentence-case body is the visual signature — and the reason any sentence-case Discord-style headline immediately reads “off.”
Look at the page in motion and a slow gradient cycle (indigo-1 → indigo-2 → pink-1) drifts behind the brand canvas at ~12-second cadence. It’s the only ambient motion on the page — buttons and cards stay calm. The animated layer is what gives the hero its “we’re inside a club, not a pitch deck” feel without ever resorting to particle effects or video.
Key Characteristics:
- Brand-canvas register: page bg is
#5865f2blurple, not white. - All-caps display: ABC Ginto Nord Discord at 35–88px, weights 700–800.
- White-on-blurple primary CTA — inverse of every dev-tool convention.
- Seven radii: 0/4/8/12/16/24/32/round — denser than Linear, looser than Apple.
- Sentence-case body in gg sans (custom Noto Sans-derived family).
- Animated gradient layers (
indigo-1,indigo-2,pink-1) at 12s cadence. - Cyan focus/link
#00b0f4against blurple — system’s signature complementary. - Status colors lifted from the in-product UI (
#23a55aonline,#f0b232idle,#f23f43dnd). - Drop shadows only on white panels — brand canvas relies on animated layers for depth.
- Bottom-of-page CTA flips to full pill (9999) — marks the conversion endpoint.
2. Color Palette & Roles
Primary
- Background (
#5865f2): page canvas — the brand-canvas register. This is--brandexposed as the document body color, not just an accent. - Text (
#ffffff): primary copy on brand canvas, bright and high-contrast. - Text on Light (
#23272a): body and headlines on white panels — Discord’s near-black with a cool undertone (hsl(220, 8%, 16%)adjacent). - Brand (
#5865f2): Discord blurple, also--brand-500athsl(234.94, 85.56%, 64.71%)— saturated, just-blue-of-purple.
Brand & Dark
The full --brand-100 through --brand-900 tonal scale:
- brand-100 (
#e7e9fd): faintest tint — used for tonal washes on white. - brand-200 (
#c8ccfa): tint — info banners. - brand-300 (
#a4abf7): tint — illustration accent. - brand-400 (
#7983f5): step below brand-500 — hover ghost states. - brand-500 (
#5865f2): primary blurple — the canvas value. - brand-600 (
#404eed): hover state on brand-on-white CTA. - brand-700 (
#3641cc): pressed. - brand-800 (
#28339e): deepest tonal stop — rarely used standalone. - brand-900 (
#1a2081): gradient toner — used at panel edges.
Accent
- Background Deep (
#1a2081):--bg-animated-gradient-background-indigo-1— gradient toner at panel edges. - Background Pink (
#ed7395):--bg-animated-gradient-background-pink-1— secondary panel toner for variety. - Background Aubergine (
#1a1b3a): deep panel under hero — non-brand-canvas dark register. - Cyan Accent (
#00b0f4):--focus-borderand--text-link. Used as both focus ring and inline link — the system’s signature complementary against blurple.
Interactive
- Link (
#00b0f4): cyan — same as focus ring, deliberate dual-duty. - Link Hover (
#33c2f7): lighter cyan. - Focus (
#00b0f4): 2px solid ring with 2px offset. - Disabled (
rgba(255,255,255,0.24)): faded labels on dark.
Neutral Scale
On dark/brand canvas:
- Text (
#ffffff): primary. - Text Soft (
rgba(255,255,255,0.72)): captions, supporting copy. - Text Faint (
rgba(255,255,255,0.40)): micro-copy. - Text Disabled (
rgba(255,255,255,0.24)).
On white panels:
- Text on Light (
#23272a): primary copy and headlines. - Text on Light Muted (
#4f5660): secondary copy on white.
Surface & Borders
- Surface (
#ffffff): primary CTA fill, white-panel sections. - Surface Soft (
#f6f6f6): nested card body on white sections. - Surface Card (
#fafafa): faintly tinted feature card. - Surface Elev (
#23272a): dark panel sections — ink-not-paper alternation. - Border (
rgba(255,255,255,0.10)): translucent hairline on brand canvas. - Border Soft (
rgba(255,255,255,0.06)): softer divider on dark — nested rows. - Border Light (
rgba(0,0,0,0.08)): hairline on white panels — feature card outline. - Border Strong (
rgba(255,255,255,0.18)): hover/active outline on dark.
Shadow Colors
- Shadow Card (
rgba(0,0,0,0.15)at0 4px 4px): the canonical card lift on white panels. - Shadow Modal (
rgba(0,0,0,0.40)at0 16px 32px): floating panel / modal. - Brand Glow (
0 0 0 4px rgba(88,101,242,0.20)): rare focus halo on brand-color CTAs.
Semantic
Lifted directly from the in-product status colors — Discord’s signature green/yellow/red:
- Success / Online (
#23a55a):--status-online— Discord online green. - Warning / Idle (
#f0b232):--status-idle. - Danger / DND (
#f23f43):--status-dndand error. - Info (
#00b0f4): same as cyan link/focus.
3. Typography Rules
Font Family
- Display:
"ABC Ginto Nord Discord", "ABC Ginto Nord", "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif. Weights 700/800. All-caps by default — the family is designed for it. - Body:
"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif. Weights 400/500/600/700. Custom Noto Sans-derived family Discord licensed for in-product use, exposed via--font-primary. - Editorial:
Fraunces, Georgia, serif. Weights 400/500. Used only on clan/server profile pages (--font-clan-body) for a more editorial register. - Mono:
ui-monospace, "SF Mono", Menlo, Consolas, monospace. System fallback only — Discord does not ship a custom mono. - OpenType: standard
kernandliga; no stylistic-set tricks. Ginto Nord’s compressed letterforms carry the visual personality without OpenType swaps.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | ABC Ginto Nord | 88 | 800 | 0.85 | -0.02em | kern | Homepage hero — UPPERCASE only |
| display-large | ABC Ginto Nord | 64 | 800 | 0.88 | -0.015em | kern | Section hero — UPPERCASE only |
| h1 | ABC Ginto Nord | 44 | 700 | 0.86 | -0.01em | kern | Page H1 — UPPERCASE |
| h2 | ABC Ginto Nord | 32 | 700 | 0.95 | -0.005em | kern | Section heads — UPPERCASE |
| h3 | ABC Ginto Nord | 28 | 700 | 1.0 | -0.005em | kern | Sub-section heads — UPPERCASE |
| h4 | gg sans | 22 | 700 | 1.15 | 0 | kern, liga | Card titles — sentence case |
| body-large | gg sans | 20 | 400 | 1.5 | 0 | kern, liga | Hero deck under headline |
| body | gg sans | 16 | 400 | 1.5 | 0 | kern, liga | Default body |
| body-small | gg sans | 14 | 400 | 1.5 | 0 | kern, liga | Footer body |
| button | gg sans | 16 | 500 | 1.0 | 0 | kern, liga | CTA label |
| button-large | gg sans | 18 | 500 | 1.0 | 0 | kern, liga | Primary CTA on hero |
| nav-link | gg sans | 16 | 500 | 1.4 | 0 | kern, liga | Top nav menu |
| label | gg sans | 12 | 600 | 1.3 | 0.04em | kern | UPPERCASE eyebrow |
| label-mono | mono | 11 | 600 | 1.3 | 0.04em | tnum | UPPERCASE category — rare |
| caption | gg sans | 13 | 400 | 1.4 | 0 | kern | Caption |
| micro | gg sans | 11 | 500 | 1.3 | 0.02em | kern | Pill / badge text |
Principles
- Case is hierarchy. Display tier is always all-caps in ABC Ginto Nord; body tier is always sentence case in gg sans. The case shift is the primary register-switch — heavier than weight or size.
- Compressed display. Ginto Nord’s narrow letterforms allow the display to hold weight 700–800 without gobbling line width. Headlines stack two lines comfortably at line-height 0.85–0.95.
- Weight 500 is the body voice ceiling. gg sans body never goes above 500 except for emphasis spans; the headline voice owns the heavy weights.
- No serif on marketing. Fraunces lives only on clan/server profile pages — never on the marketing homepage. Mixing serif into the hero would dilute the cartoon-poster register.
- Tracking discipline. Display tier always negative (
-0.005emto-0.02em); body always 0; uppercase eyebrows positive (0.04em). The three regimes are non-overlapping. - Custom mono is absent. Discord trusts system mono — code in marketing screenshots renders in whatever the screenshotting machine had installed. The brand identity does not lean on mono the way Raycast or Resend do.
- gg sans is the connective tissue. Body, button, nav, caption, and pill all share gg sans across weight 400/500/600. The single body voice keeps the page coherent against the loud display tier.
4. Component Stylings
Buttons
Primary (Light) — White on Blurple
- Background:
#ffffff - Text:
#23272a - Padding:
15px 24px, height 50px - Radius: 12 (md)
- Font: button-large (gg sans 18 / 500)
- Hover:
#f6f6f6background - Active:
#ebebeb - Use: hero CTA on brand canvas — Download / Open Discord. The signature affordance.
Primary (Dark) — Brand on White
- Background:
#5865f2 - Text:
#ffffff - Padding:
15px 24px, height 50px - Radius: 12 (md)
- Hover:
#404eed(brand-600) - Active:
#3641cc(brand-700) - Use: primary CTA on white-panel sections — same geometry, inverted fill.
Secondary
- Background:
rgba(255,255,255,0.10)translucent - Text:
#ffffff - Border:
1px solid rgba(255,255,255,0.18) - Padding:
15px 24px, height 50px - Radius: 12
- Hover: background opacity to 0.18
- Use: “Open Discord in your browser” — paired with primary on hero.
Ghost / Tertiary
- Background: transparent
- Text:
#ffffff - Padding:
12px 20px - Hover:
rgba(255,255,255,0.06)background - Use: nav login link, inline ghost actions.
Download Pill (Conversion Endpoint)
- Background:
#ffffff, Text:#23272a - Padding:
16px 32px, height 56px - Radius: 9999 (full pill) — geometry shift signals “this is the action”
- Use: bottom-of-page final download CTA — full pill marks the conversion endpoint.
Cards
Feature Card (White Panel)
- Background:
#ffffff - Border:
1px solid rgba(0,0,0,0.08) - Radius: 16 (lg)
- Padding: 32px
- Shadow:
0 4px 4px rgba(0,0,0,0.15) - Use: feature card on white-panel sections.
Canvas Card (Brand Canvas)
- Background:
rgba(255,255,255,0.06)translucent - Border:
1px solid rgba(255,255,255,0.10) - Radius: 16 (lg)
- Padding: 32px
- No shadow — depth comes from animated gradient under canvas.
- Use: feature card on brand canvas.
Modal
- Background:
#ffffff, Text:#23272a - Radius: 24 (xl) — distinct from card 16
- Padding: 32
- Shadow:
0 16px 32px rgba(0,0,0,0.40) - Use: floating panels, dialog overlays, gift-claim modals.
Badges & Pills
Brand Pill
- Background:
#5865f2, Text:#ffffff - Radius: 9999, Padding:
4px 12px - Font: micro (11/500)
- Use: NEW / category tag.
Status Indicator
- Online:
#23a55abackground, white text - Idle:
#f0b232 - DND:
#f23f43 - Radius: 9999, Padding:
2px 8px - Use: product-illustration status — lifted from the in-product UI.
Tabs
Tab Pill (Inactive)
- Background:
rgba(255,255,255,0.10) - Text:
#ffffff - Radius: 9999 (full pill)
- Padding:
8px 16px
Tab Pill (Active)
- Background:
#5865f2 - Text:
#ffffff - Radius: 9999
The full-pill tab bar on the comparison sections is one of the most distinctive primitives — it’s the same tab geometry the in-product channel switcher uses.
Inputs / Forms
Input
- Background:
#ffffff - Border:
1px solid rgba(0,0,0,0.12) - Radius: 8 (sm)
- Padding:
12px 16px, height 48 - Focus:
border #00b0f4; ring 0 0 0 2px rgba(0,176,244,0.20)— cyan against blurple is the signature focus color. - Use: email input, contact form fields.
Navigation
Top nav is a transparent strip 80px tall on hero, acquiring backdrop-blur and a rgba(255,255,255,0.10) border on scroll. Links are gg sans 16/500 white with a quick opacity hover. The Login button is a ghost variant; the Download CTA is the white pill primary.
Decorative
- Animated Gradient Layer: behind the brand canvas, three colored hues (
indigo-1,indigo-2,pink-1) drift on a ~12s cadence. The only ambient motion on the page. - Custom Illustrations: Discord’s marketing uses commissioned illustrations of stylized characters in saturated chromatic fields — the visual register is closer to a children’s book than a dev-tool screenshot.
5. Layout Principles
Spacing System
Base unit 4px. Scale: 2 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 128 / 160 / 200. Section gaps run 96–128px (chunky, not tight); inside-card padding 32; nav padding 8px 16px.
The density is loose — Discord’s marketing site is not an information-dense product surface. It’s a poster. Each section has one clear conversion or comprehension goal, and whitespace earns it room to breathe.
Grid & Container
- Page width: 1200px max.
- Prose width: 720px (intro paragraphs).
- Header height: 80px.
- Hero height: ~700px — full viewport on desktop.
- Grid gap: 32px between feature cards.
The hero is edge-to-edge with content centered on the 1200px column. Below the fold, full-bleed brand-canvas panels alternate with white-panel feature spreads — each section ~700px tall with content centered.
Whitespace Philosophy
Discord’s marketing whitespace is chunky, not tight. There’s deliberate air around the H1, around the CTA, around feature cards. The page never feels dense. Whitespace + saturated chromatic field is the brand atmosphere — the opposite of Stripe’s information-dense gradient surfaces.
Section Cadence
The page alternates light-and-dark in a deliberate rhythm:
- Brand canvas hero (blurple) — 700px tall
- White panel feature spread — 600px
- Brand canvas mid-section (with
pink-1gradient toner) — 600px - Aubergine deep panel — 500px
- Brand canvas final CTA — 400px
- Dark footer —
#23272a
The alternation is what gives the page its long-form rhythm — like a magazine with brand-color spreads between editorial pages.
6. Shapes & Radius Scale
Seven discrete radii exposed as --radius-{none,xs,sm,md,lg,xl,xxl} plus the --radius-round sentinel:
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Borderless inline pills (rare) |
| XS | 4px | Status indicators, small badges |
| SM | 8px | Inputs, secondary chips |
| MD | 12px | Default button radius — the system’s most-used corner |
| LG | 16px | Default card radius — feature cards on white panels |
| XL | 24px | Modal, floating panels, hover-surfaced elements |
| XXL | 32px | Featured banner cards (rare) |
| Pill | 9999 | Tab bars, status pills, conversion-endpoint download CTA |
Compound radii: none on Discord — the system is consistent corners on each component, no 0 0 12px 12px partials. The seven discrete tiers are themselves the system; partial radii would feel like a different brand.
The semantic mapping is clear: 12 for buttons, 16 for cards, 24 for modals/floating panels, full pill (9999) for the conversion endpoint download CTA. Mixing them outside that mapping reads as off-brand.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Body copy on canvas; nav default |
| 1 | 0 4px 4px rgba(0,0,0,0.15) | Feature card on white panel |
| 2 | 0 8px 16px rgba(0,0,0,0.20) | Hover-elevated card |
| 3 | 0 16px 32px rgba(0,0,0,0.40) | Modal, floating panel |
| 4 | Animated gradient layer (indigo-1, pink-1) | Brand canvas depth |
| 5 | 0 0 0 4px rgba(88,101,242,0.20) glow | Focus halo on brand CTAs (rare) |
Shadow Philosophy
Discord uses two depth strategies depending on canvas:
- On brand canvas: depth comes from the animated gradient layers (
indigo-1/indigo-2/pink-1) drifting underneath. Cards are translucent with a hairline border; they feel like glass on a chromatic field. No drop shadows. - On white panels: classic drop-shadow card lift —
0 4px 4px rgba(0,0,0,0.15)is the canonical feature-card shadow. Modals jump to0 16px 32px rgba(0,0,0,0.40).
The brand-canvas-no-shadow rule is the discipline — adding drop shadows to a translucent card on blurple immediately reads as a design accident.
8. Interaction & Motion ✨
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default ease-in-out for hover transitions. - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— modal entrance, full reveal. - Entrance:
cubic-bezier(0, 0, 0.2, 1)— content fade-in on scroll. - Bounce:
cubic-bezier(0.34, 1.56, 0.64, 1)— used sparingly on illustration callouts.
Duration Buckets
- Fast (100ms): color transitions, opacity flickers.
- Standard (200ms): button hover, card lift, link underline.
- Slow (400ms): modal entrance, section transitions.
- Gradient (12s): the ambient
indigo-1→indigo-2→pink-1drift behind brand canvas.
Per-Component Micro-States
- Button (primary light): background flickers
#ffffff→#f6f6f6on hover, no transform. 200ms standard ease. - Button (primary dark): background
#5865f2→#404eed(brand-500 → brand-600). 200ms. - Card on brand canvas: border opacity 0.10 → 0.18 on hover, no transform. 200ms.
- Card on white panel: shadow intensifies
0 4px 4px→0 8px 16px, with a 2px lift via translateY. 200ms. - Link / nav-link: opacity 1 → 0.8 on hover. No underline.
- Tab pill: background opacity 0 → 0.10 on hover; on active, background flips to
#5865f2. - Status indicator (online): continuous subtle pulse (~2s) at scale 1.0 → 1.05 — the only periodic motion outside the gradient.
Page Transitions
- Hero appears with content fade + 8px translateY rise, ease-entrance, 400ms.
- Below-fold sections fade-in on scroll-into-viewport, 300ms each.
- Modal entrance: backdrop fade 300ms + modal scale 0.96 → 1.0 + opacity 0 → 1, ease-emphasized 400ms.
Reduced Motion
@media (prefers-reduced-motion: reduce):
- Animated gradient layers freeze at first frame (no drift).
- All transforms collapse to opacity-only transitions.
- Status indicator pulse stops.
- Hover state transitions still fire (200ms color/opacity) — they aid usability.
9. Accessibility & A11y ✨
Contrast Pairs
- Body text on brand canvas:
#ffffffon#5865f2→ 4.7:1. AA at body sizes; AAA at large text. This is the lowest-contrast pair on the page. - Body text on white panel:
#23272aon#ffffff→ 13.2:1. AAA. - Soft text on brand canvas:
rgba(255,255,255,0.72)on#5865f2→ ~3.4:1. AA at large only. Use only for captions ≥18px or use#fffffffor body. - Cyan link on brand canvas:
#00b0f4on#5865f2→ 2.1:1 — fails AA. Discord mitigates by underlining inline cyan links and never relying on color alone. - Cyan link on white panel:
#00b0f4on#ffffff→ 2.8:1 — also fails. Discord uses cyan only with bold weight or underline on white. - Focus ring:
#00b0f42px on#5865f2→ ring-on-canvas contrast ~2.1:1 — borderline; the ring’s 2px offset and animated focus pulse compensate.
Focus Indicators
Standard focus is 2px solid #00b0f4 with 2px offset. Cyan against blurple is the signature complementary — recognizable as Discord’s focus across the entire product. Form fields add an inner ring of 0 0 0 2px rgba(0,176,244,0.20).
ARIA Pattern Recommendations
- Top nav:
<nav aria-label="Primary">with skip link at top. - Tab bar (comparison sections):
role="tablist", individualrole="tab", content panelsrole="tabpanel"witharia-labelledby. - Modal:
role="dialog"+aria-modal="true"+aria-labelledbyon title. - Status indicators:
aria-label="Online"/"Idle"/"Do Not Disturb"— color-only signaling fails for color-blind users. - CTA buttons: semantic
<button>or<a>with descriptive label — never icon-only withoutaria-label.
Keyboard Navigation
- Tab order follows visual layout: nav → primary CTA → secondary CTA → page content → footer.
- Skip-link to
#main-contentfirst focus stop. - Tab pills are keyboard-navigable with arrow keys (left/right between tabs, enter to activate).
- Modal traps focus until dismissed (Esc or close button).
- Status pickers (in-product analog) use arrow keys; marketing surface inherits the pattern.
Screen Reader Hints
- Hero headlines that read all-caps via CSS use
text-transform: uppercaseso screen readers receive the underlying lowercase text — not “G-R-O-U-P C-H-A-T.” - Brand canvas color-shift between sections is purely decorative; no announcements needed.
- Animated gradient layers carry
aria-hidden="true"— they’re decorative, never content.
Reduced Motion
prefers-reduced-motion: reduce collapses gradient drift, pulse animations, and all transforms. Color transitions remain (they aid usability for hover/focus feedback).
10. Responsive Behavior
Breakpoints
| Breakpoint | Width | Notes |
|---|---|---|
| Mobile | 0–640px | Single column, hero height collapses to ~520px |
| Tablet | 640–1024px | Two-column feature grids, hero stays full-bleed |
| Desktop | 1024–1280px | Three-column feature grids, 1200px container caps |
| Wide | 1280–1536px+ | 1200px container holds; surrounding gutters absorb extra width |
Touch Targets
- Buttons height ≥48px on mobile (50–56 on desktop) — exceeds WCAG 2.5.5 44×44 minimum.
- Tab pills 36px height — pad with 8px around for touch.
- Nav links pad to 48×48 on mobile via padding.
Collapsing Strategy
- Hero: display-hero shrinks 88 → 56 → 44 → 36 across breakpoints. Line-height stays 0.85–0.95.
- Feature grid: 3-col → 2-col → 1-col. Card padding shrinks 32 → 24 → 20.
- Nav: desktop horizontal menu collapses to hamburger at <1024px.
- CTAs: primary + secondary stack vertically at <640px, full-width.
- Animated gradient: persists across breakpoints — it’s the brand atmosphere.
Image Behavior
- Hero illustration (commissioned, full-bleed character art) scales with viewport via aspect-ratio container.
- Product screenshots inside cards lock to 16:9 aspect, scale to fit card width.
- All decorative imagery loads with
loading="lazy"below fold.
Container Queries
Discord does not heavily use container queries on the marketing site — viewport breakpoints carry the responsive logic. Future-likely candidate: feature cards adapting padding based on container width rather than viewport.
11. Content & Voice ✨
Tone
Playful, casual, inclusive — the “hangout, not work” register. Discord’s marketing voice trusts that its audience knows what a chat app is and gives them a reason to choose Discord specifically: friends, communities, games, hobbies. It avoids enterprise gloss; it embraces “vibes.”
Microcopy Patterns
- Headlines in all-caps Ginto Nord: “GROUP CHAT THAT’S ALL FUN & GAMES”, “WHERE HANGING OUT IS EASY”, “IMAGINE A PLACE…”
- Decks in sentence-case gg sans 20: “Discord is great for playing games and chilling with friends, or even building a worldwide community.”
- CTA verbs: “Download for Mac/Windows/Linux”, “Open Discord in your browser”, “Get Nitro” (subscription), “Get started” (broad).
- Error messages (rare on marketing, but the in-product convention): friendly + specific. “Something’s not right” not “Error 500.” Always with a recovery path.
Empty States (in-product analog)
The marketing site doesn’t show empty states, but the in-product convention is: friendly illustration + headline (“Nothing here yet”) + suggested action (“Send a message to start the conversation”) — never just “No data.”
Success Confirmations
- After download: “Download started!” — not “Success.” Casual, present-tense.
- After form submit: “Thanks! We’ll be in touch.”
- Toast pattern (in-product): icon + short message + optional action button.
CTA Verb Conventions
The verbs Discord uses, ranked by frequency:
- Download (for app installation — primary conversion)
- Open Discord in your browser (secondary, cross-platform CTA)
- Get Nitro (subscription upsell)
- Get Started (top-of-funnel)
- Login (returning users)
What Discord doesn’t say: “Sign up free”, “Start your free trial”, “Try it now” — too SaaS-y. The brand voice avoids the dev-tool conversion vocabulary.
12. Dark Mode & Theming ✨
Discord’s marketing site is brand-canvas-first — the page itself is blurple, with white-panel sections alternating. There isn’t a separate dark-mode token swap because the canvas already runs in saturated brand color. The in-product app does offer light/dark/AMOLED themes, but the marketing site does not mirror that — it’s always brand-canvas.
If implementing a Discord-style brand-canvas system as a “theme”:
colors-dark:
bg: '#5865f2' # brand canvas — same in both modes
surface: '#ffffff' # white-panel sections persist
text: '#ffffff' # body on canvas
text-on-light: '#23272a' # body on white panel
brand: '#5865f2'
brand-deep: '#1a2081' # gradient toner
border: 'rgba(255,255,255,0.10)'The “dark mode” of a brand-canvas system is deeper canvas (#1a1b3a aubergine for premium / Nitro pages) rather than canvas-flip. Discord’s Nitro tier uses an aubergine-on-blurple layered canvas as its visual differentiator.
13. Lineage & Influences
Discord’s design lineage is non-traditional for SaaS. Where dev-tool peers borrow from typographic publishing (Linear → Inter, Resend → Domaine), Discord borrows from gaming-platform marketing (Twitch, Xbox, Roblox) and Saturday-morning-cartoon poster art. The all-caps display + saturated chromatic field is the visual vocabulary of Cartoon Network, MTV’s ’90s graphics package, and Xbox achievement banners — repurposed for a chat app.
The custom type stack signals premium investment without resorting to a serif (which would feel editorial / old-media). gg sans (Noto Sans-derived, custom-licensed) and ABC Ginto Nord Discord (Dinamo Foundry custom cut) together cost more to license/commission than most SaaS brands spend on type — and the result is a marketing surface that no competitor can copy without commissioning their own family.
The white-on-blurple primary CTA is the most quoted move in Discord’s system. It rejects the dev-tools convention of “brand fill on white” and asserts a brand-canvas register. Apple’s macOS download pages do something similar (white-on-dark primary), but Discord’s saturated-blurple-as-canvas takes it further.
Influences:
- Dinamo / ABC Ginto Nord — custom display cut for the all-caps marketing headlines (https://abcdinamo.com/typefaces/ginto)
- Twitch — adjacent gamer-platform purple lineage (https://twitch.tv)
- Xbox / Microsoft Game Pass — saturated indigo as a “play” register (https://xbox.com)
- Roblox — permission for full saturated-color canvas in a SaaS-adjacent landing page (https://roblox.com)
- Cartoon Network / MTV ’90s graphics — all-caps display + chromatic field is the visual register being borrowed
- Apple macOS download pages — white-pill primary CTA on dark canvas
14. Do’s and Don’ts
Do’s
- Do paint full panels in the brand color. Discord owns blurple the way Stripe owns iridescent gradients — half-painting it dilutes.
- Do use all-caps for the display tier. ABC Ginto Nord Discord is designed for it; sentence case loses the marketing voice entirely.
- Do invert primary CTAs to white-on-brand on brand-canvas sections. The dev-tools convention of brand-on-white doesn’t match the immersive register.
- Do keep the seven discrete radii consistent: 4 for tiny chips, 8 for inputs, 12 for buttons, 16 for cards, 24 for modals, 32 for featured banners, full pill for the conversion endpoint.
- Do flip the bottom-of-page download CTA to full pill (9999). Geometry shift signals “this is the action.”
- Do alternate brand-canvas and white-panel sections in long-form rhythm — the magazine pacing is the brand atmosphere.
- Do use cyan (
#00b0f4) as the focus ring and link color — it’s the signature complementary against blurple. - Do lift status colors directly from the in-product UI (
#23a55aonline, etc.) — the consistency is the brand.
Don’ts
- Don’t mix the seven radii arbitrarily. The semantic mapping (12 for buttons, 16 for cards, 24 for modals, round for conversion) is the system.
- Don’t add drop shadows on the brand canvas. Use the animated gradient layers for depth instead.
- Don’t re-color the focus ring. Cyan against blurple is the system’s signature complementary, and it carries accessibility weight as well as brand weight.
- Don’t sentence-case the all-caps display tier. Ginto Nord Discord is designed for caps; rendering it sentence-case immediately reads off-brand.
- Don’t use Fraunces (or any serif) on the marketing surface. Editorial register doesn’t match the cartoon-poster atmosphere.
- Don’t weight body above 500. The display tier owns 700–800; mixing heavy body weights muddies the case-as-hierarchy system.
- Don’t introduce a third saturated chromatic accent. Blurple + cyan + status hues is the entire palette; adding “brand pink” or “brand teal” would dilute.
- Don’t lean on Slack-style restraint. Discord’s identity is loud and warm; muted treatments read as a different brand.
15. Agent Prompt Guide
Quick Color Reference
brand: #5865f2
brand-deep: #1a2081
text-on-brand: #ffffff
text-on-light: #23272a
white-panel: #ffffff
focus / link: #00b0f4
border-canvas: rgba(255,255,255,0.10)
border-light: rgba(0,0,0,0.08)
status-online: #23a55a
status-dnd: #f23f43Example Component Prompts
-
Hero: “Create a hero with a
#5865f2blurple full-bleed canvas, an all-caps headline in ABC Ginto Nord 88px / weight 800 / line-height 0.85 reading ‘GROUP CHAT THAT’S ALL FUN & GAMES’, a 20px gg sans deck below inrgba(255,255,255,0.72), and a primary CTA pill in#ffffffwith#23272atext at 12px radius.” -
Feature card: “Design a feature card on a white-panel section with
#ffffffbackground,1px solid rgba(0,0,0,0.08)border, 16px radius, 32px padding,0 4px 4px rgba(0,0,0,0.15)drop shadow, h4 title in gg sans 22/700#23272a, body in gg sans 16/400#4f5660.” -
Tab bar: “Build a comparison tab bar with full-pill (9999) tabs at 8px 16px padding, inactive state
rgba(255,255,255,0.10)background and white text, active state#5865f2background with white text, all on a brand-canvas section.” -
Download CTA endpoint: “Place a final-CTA download button at the bottom of the page as a full pill (9999 radius),
#ffffffbackground,#23272atext, 16px 32px padding, 56px height — the geometry shift from 12px to full pill signals ‘this is the conversion endpoint’.” -
Animated gradient canvas: “Add an animated gradient layer behind the brand canvas with three colored hues (
indigo-1: hsl(241.5,57%,27%),indigo-2: hsl(241.5,77%,17%),pink-1: hsl(343,84%,69%)) drifting on a 12-second cadence at low opacity — the only ambient motion on the page.” -
Feature panel on dark: “Design a feature card on the brand canvas with
rgba(255,255,255,0.06)translucent background,1px solid rgba(255,255,255,0.10)hairline border, 16px radius, no shadow — depth comes from the animated gradient layer underneath.”
Iteration Guide
- Anchor the canvas in
#5865f2. If you start from white, you’ll never get to the Discord register; the brand-canvas register is non-negotiable. - Set the headline in ABC Ginto Nord all-caps. Sentence-case headlines immediately read off-brand. If Ginto Nord isn’t licensed, use a condensed bold sans (Druk Wide, Helvetica Neue Condensed Black) at 800 weight, all-caps, line-height 0.85.
- Invert the primary CTA. White pill with
#23272atext on brand canvas; brand pill with white text on white panels. Don’t blend. - Use the seven-radius scale consistently. 12 for buttons, 16 for cards, 24 for modals, full pill for the conversion endpoint. Mixing reads as accident.
- Add the animated gradient layer. Even subtle drift (2–3% opacity, 12s cadence) is what makes the canvas feel “Discord” instead of “any saturated SaaS.”
- Pair display all-caps with body sentence-case. The case-as-hierarchy is the system’s primary register-switch — bigger lever than weight or size.
- Use cyan (
#00b0f4) only for focus and link. Don’t introduce a third accent; the blurple + cyan pair is the signature. - Stack sections in chunky rhythm. 96–128px between sections, not 64px tight. The whitespace is the brand atmosphere.
Drop discord into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add discord 2 · ship landing page
npx agentkit init --design discord light editorial
Notion
Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed…
Docs
Install
Notion
webdesignhot
dark minimal
Raycast
Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that th…
Docs
Install
Raycast
webdesignhot
dark sans
GitHub
Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accen…
Docs
Install
GitHub
webdesignhot