light · dark · sans · structured · bright · multi-theme
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.
By webdesignhot · www.beehiiv.com
$ npx design-md add beehiiv
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. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. 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 →
theme
mobile · 390 × 844
Tokens design.md/v1.5
theme: light
- bg
#ffffff - bg-yellow
#ffd60a - bg-yellow-soft
#fff7c2 - bg-yellow-deep
#e6c000 - surface
#fafafa - surface-2
#f0f0f0 - surface-3
#e5e5e5 - text AAA · 21.0
#000000 - text-strong
#000000 - text-display
#000000 - text-muted
#666666 - text-soft
#999999 - text-faint — · 1.6
#cccccc - text-on-yellow
#000000 - text-on-yellow-muted
#000000a8 - brand — · 1.4
#ffd60a - brand-hover
#e6c000 - brand-active
#cca800 - brand-soft
#fff7c2 - accent
#000000 - accent-soft
#1a1a1a - border AAA · 21.0
#000000 - border-soft
#e5e5e5 - on-brand
#000000 - success
#15803d - success-bg
#dcfce7 - warning
#a16207 - warning-bg
#fef3c7 - danger
#b91c1c - danger-bg
#fee2e2 - info
#000000 - info-bg
#fafafa
Ship faster than ever.
display-hero "PP Neue Machina" 112px w800 -0.045em
The quick brown fox jumps over the lazy dog.
stat-mega "JetBrains Mono" 96px w800 -0.035em
Ship faster than ever.
display-large "PP Neue Machina" 88px w800 -0.04em
Ship faster than ever.
display "PP Neue Machina" 72px w800 -0.035em
The quick brown fox jumps over the lazy dog.
stat-large "JetBrains Mono" 64px w800 -0.025em
Ship faster than ever.
h1 "PP Neue Machina" 56px w800 -0.03em
Built for teams that ship.
h2 "PP Neue Machina" 40px w800 -0.025em
A complete kit
h3 "PP Neue Machina" 28px w700 -0.015em
The quick brown fox jumps over the lazy dog.
h4 "PP Neue Machina" 22px w700 -0.01em
The quick brown fox jumps over the lazy dog.
h5 "PP Neue Machina" 18px w700 -0.005em
The quick brown fox jumps over the lazy dog.
body-large "Inter" 18px w400 0
The quick brown fox jumps over the lazy dog.
body "Inter" 16px w400 0
The quick brown fox jumps over the lazy dog.
h6 "PP Neue Machina" 14px w700 0
The quick brown fox jumps over the lazy dog.
body-small "Inter" 14px w400 0
npx design-md add linear
code-inline "JetBrains Mono" 14px w400 0
npx design-md add linear
code "JetBrains Mono" 14px w400 0
OUR DESIGN SYSTEM
caption "Inter" 13px w500 0.02em
OUR DESIGN SYSTEM
label "JetBrains Mono" 12px w600 0.06em
- step-0 1px
- step-1 2px
- step-2 4px
- step-3 6px
- step-4 8px
- step-5 12px
- step-6 16px
- step-7 20px
- step-8 24px
- step-9 32px
- step-10 40px
- step-11 48px
- step-12 64px
- step-13 80px
- step-14 96px
- step-15 120px
- step-16 160px
- none
0px - micro
2px - xs
4px - sm
6px - md
8px - lg
10px - card
12px - xl
16px - xxl
20px - hero
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
beehiiv's marketing system is a tabloid in landing-page form. The hero band is saturated highway-yellow (`#ffd60a`) — a colour inherited from caution signs and old New York taxis — with pure `#000` Inter Display set at 88–112px / 800 weight, tracked tight at `-0.04em`. The supporting bands are pure white and pure black, no greys in the middle. Cards on the white canvas use a 2px solid black border at 12px radius — a hyper-flat, near-brutalist move that distinguishes beehiiv from Substack's cosier serif aesthetic and Ghost's warm-cream restraint. The voice is aggressive-masculine: revenue stats in giant numerals, "monetize" as the verb of choice, and a punchy "sign up free" black-pill CTA that contrasts hard against the yellow. Where Substack tells you to write, beehiiv tells you to make money — and the design inherits that energy. The lineage runs through Wall Street Journal/NYP front-page broadsheet energy, Off-White / Virgil Abloh's industrial graphic vocabulary, and the 2010s zine-revival love of black-on-yellow contrast.
- Tabloid + financial-news loud-headline lineage; the broadsheet front-page energy.
- Quotation-marks, bold display, black-on-yellow industrial graphic vocabulary.
- Direct rival — beehiiv is positioned as the louder, money-first alternative.
- The display family — industrial geometric sans tuned for marketing punch.
- Tabloid front-page boldness translated into landing-page form.
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: beehiiv
tagline: Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page.
author: webdesignhot
source_url: https://www.beehiiv.com
spec: design.md/v1.5
quality: curated
featured: true
categories: [media, saas]
tags: [light, dark, sans, structured, bright, multi-theme]
preview_swatch: ['#ffd60a', '#000000', '#ffffff']
related: [substack, ghost, kit-com]
description: 'beehiiv hits like a tabloid front page — a saturated `#ffd60a` highway yellow against pure black `#000`, heavy display type set tight, and pure-white feature bands that flash between the yellow hero and the black footer. The result is the loudest newsletter platform on the marketing internet, and it is intentional. Display caps at 88–112px / 800 weight tracked at `-0.04em`, cards use a 2px solid black border at 12px radius (no shadow), and the black-pill CTA is the brand''s pressure point. Where Substack frames itself around writing, beehiiv frames itself around making money — and every visual decision carries that monetisation-first energy. The lineage runs through the Wall Street Journal''s tabloid cousins, Off-White / Virgil''s industrial graphic vocabulary, and 2010s zine culture''s love of the black-on-yellow contrast pair.'
themes:
default: light
available: [light, dark]
switch-via: 'Marketing site default is white-with-yellow-bands (light); footer + hero contrast bands ship in dark. Persisted in localStorage on the product app.'
colors:
light:
bg: '#ffffff' # primary marketing canvas
bg-yellow: '#ffd60a' # signature hero band — highway yellow
bg-yellow-soft: '#fff7c2' # softest yellow tint
bg-yellow-deep: '#e6c000' # deeper press of the yellow
surface: '#fafafa' # near-white card panel
surface-2: '#f0f0f0' # second-level neutral
surface-3: '#e5e5e5' # third-level neutral
text: '#000000' # plain black body
text-strong: '#000000'
text-display: '#000000'
text-muted: '#666666' # captions
text-soft: '#999999' # tertiary
text-faint: '#cccccc' # disabled
text-on-yellow: '#000000' # always black on yellow
text-on-yellow-muted: '#000000a8'
brand: '#ffd60a' # the yellow itself is the brand
brand-hover: '#e6c000'
brand-active: '#cca800'
brand-soft: '#fff7c2'
accent: '#000000' # black is the secondary brand
accent-soft: '#1a1a1a'
border: '#000000' # 2px solid black border on cards
border-soft: '#e5e5e5' # softer divider
on-brand: '#000000' # text on yellow
success: '#15803d'
success-bg: '#dcfce7'
warning: '#a16207' # amber, not yellow (yellow is brand)
warning-bg: '#fef3c7'
danger: '#b91c1c'
danger-bg: '#fee2e2'
info: '#000000'
info-bg: '#fafafa'
dark:
bg: '#000000' # pure black canvas
bg-yellow: '#ffd60a' # yellow band stays — chromatic identity
bg-yellow-soft: 'rgba(255, 214, 10, 0.18)'
bg-yellow-deep: '#e6c000'
surface: '#0a0a0a' # near-black card
surface-2: '#1a1a1a' # second-level dark
surface-3: '#262626' # third-level dark
text: '#ffffff' # white on black
text-strong: '#ffffff'
text-display: '#ffffff'
text-muted: '#a3a3a3'
text-soft: '#737373'
text-faint: '#525252'
text-on-yellow: '#000000' # black on yellow stays inviolable
text-on-yellow-muted: '#000000a8'
brand: '#ffd60a'
brand-hover: '#ffe45c' # lifted on dark for legibility
brand-active: '#e6c000'
brand-soft: 'rgba(255, 214, 10, 0.18)'
accent: '#ffffff' # white doubles as accent on dark (mirrors light/black role)
accent-soft: '#e5e5e5'
border: '#ffffff' # 2px white border on cards (mirrors light's 2px black)
border-soft: '#1f1f1f'
on-brand: '#000000'
success: '#22c55e' # lifted green for dark
success-bg: 'rgba(34, 197, 94, 0.18)'
warning: '#fbbf24'
warning-bg: 'rgba(251, 191, 36, 0.18)'
danger: '#ef4444'
danger-bg: 'rgba(239, 68, 68, 0.18)'
info: '#ffffff'
info-bg: '#0a0a0a'
typography:
display:
family: '"PP Neue Machina", "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [700, 800, 900]
opentype-features: ['ss01', 'ss02', 'tnum']
body:
family: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
weights: [400, 500, 600, 700]
opentype-features: ['kern', 'tnum']
mono:
family: '"JetBrains Mono", "IBM Plex Mono", Menlo, monospace'
weights: [400, 500, 700]
scale:
display-hero: { size: 112, weight: 800, lineHeight: 0.9, tracking: '-0.045em', family: display, opentype: 'ss01' }
display-large: { size: 88, weight: 800, lineHeight: 0.95, tracking: '-0.04em', family: display, opentype: 'ss01' }
display: { size: 72, weight: 800, lineHeight: 0.98, tracking: '-0.035em', family: display, opentype: 'ss01' }
h1: { size: 56, weight: 800, lineHeight: 1.0, tracking: '-0.03em', family: display }
h2: { size: 40, weight: 800, lineHeight: 1.05, tracking: '-0.025em', family: display }
h3: { size: 28, weight: 700, lineHeight: 1.2, tracking: '-0.015em', family: display }
h4: { size: 22, weight: 700, lineHeight: 1.25, tracking: '-0.01em', family: display }
h5: { size: 18, weight: 700, lineHeight: 1.3, tracking: '-0.005em', family: display }
h6: { size: 14, weight: 700, lineHeight: 1.35, tracking: '0', family: display }
body-large: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
stat-mega: { size: 96, weight: 800, lineHeight: 1.0, tracking: '-0.035em', family: mono, opentype: 'tnum' }
stat-large: { size: 64, weight: 800, lineHeight: 1.0, tracking: '-0.025em', family: mono, opentype: 'tnum' }
label: { size: 12, weight: 600, lineHeight: 1.3, tracking: '0.06em', family: mono }
caption: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
code-inline: { size: 14, weight: 400, lineHeight: 1.4, tracking: '0', family: mono }
code: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
radius:
none: 0
micro: 2
xs: 4
sm: 6
md: 8
lg: 10
card: 12
xl: 16
xxl: 20
hero: 24
pill: 9999
spacing:
base: 4
scale: [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160]
layout:
page-width: 1280
prose-width: 720
header-height: 72
hero-padding-y: 120
section-padding-y: 120
card-padding: 32
components:
button-primary:
backgroundColor: bg-dark
textColor: on-dark
radius: pill
padding: '14px 28px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: '#1a1a1a', transform: 'translateY(-1px)' }
use: 'Black pill on yellow — the canonical hero CTA'
button-yellow:
backgroundColor: brand
textColor: on-brand
radius: pill
padding: '14px 28px'
font: { family: body, weight: 700, size: 16 }
hover: { backgroundColor: brand-hover }
use: 'Yellow pill on white — secondary action band'
button-ghost:
backgroundColor: transparent
textColor: text
border: border
radius: md
padding: '12px 24px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: surface }
use: 'Tight 2px border outline button'
button-ghost-on-dark:
backgroundColor: transparent
textColor: on-dark
border: on-dark
radius: md
padding: '12px 24px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: surface-dark-2 }
use: 'White-outline ghost on the black band'
card:
backgroundColor: bg
border: border
borderWidth: 2
radius: card
padding: 32
shadow: 'none'
use: 'The thick-black-border card — beehiiv''s signature elevation'
card-yellow:
backgroundColor: brand
textColor: on-brand
border: border
borderWidth: 2
radius: card
padding: 32
use: 'Yellow card on white — feature emphasis'
card-dark:
backgroundColor: surface-dark
textColor: on-dark
border: border-dark
borderWidth: 1
radius: card
padding: 32
use: 'Dark testimonial card on black band'
stat-tile:
backgroundColor: brand
textColor: on-brand
border: border
borderWidth: 2
radius: card
padding: 24
use: 'Revenue stat — mono numeral at stat-mega scale'
badge:
backgroundColor: bg-dark
textColor: on-dark
radius: pill
padding: '4px 12px'
font: { family: mono, weight: 600, size: 12 }
input:
backgroundColor: bg
border: border
borderWidth: 2
radius: md
padding: '14px 16px'
font: { family: body, weight: 500, size: 16 }
focus: { ring: '0 0 0 3px rgba(255,214,10,0.4)' }
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.34, 1.56, 0.64, 1)' # slight overshoot for the punch
ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)'
duration-instant: 80
duration-fast: 150
duration-standard: 220
duration-slow: 320
duration-emphasized: 480
hover-lift: 'translateY(-2px)'
page-transition: 'opacity-only, 200ms standard'
reduced-motion: 'respects prefers-reduced-motion: reduce — collapses transforms to opacity-only at 100ms'
breakpoints:
mobile: 480
tablet: 768
desktop: 1024
wide: 1280
ultra: 1536
shadows:
none: 'none'
ambient: 'none' # beehiiv refuses ambient shadow
raised: 'rgba(0,0,0,0.08) 0 4px 16px' # rare, only on floating elements
ring-yellow: '0 0 0 3px rgba(255,214,10,0.4)'
ring-black: '0 0 0 3px rgba(0,0,0,0.2)'
inset-dark: 'inset 0 0 0 1px #1f1f1f' # the dark-band ring
accessibility:
contrast-text-on-bg: 19.6 # AAA — plain black on white
contrast-text-on-brand: 17.4 # AAA — black on yellow (the canonical pair)
contrast-text-on-dark: 19.6 # AAA — white on black
contrast-muted-on-bg: 5.7 # AA at body sizes
focus-ring: '3px solid rgba(255,214,10,0.4) with 1px offset'
reduced-motion-honored: true
keyboard-trap-free: true
min-touch-target: 44
dark-mode: brand-band-only
colors-dark:
bg: '#000000'
bg-soft: '#0a0a0a'
surface: '#1a1a1a'
surface-hover: '#222222'
surface-strong: '#2a2a2a'
text: '#ffffff'
text-muted: '#ffffffb3'
text-soft: '#ffffff80'
brand: '#ffd60a'
brand-hover: '#e6c000'
border: '#1f1f1f'
on-brand: '#000000'
on-dark: '#ffffff'
lineage:
summary: |
beehiiv's marketing system is a tabloid in landing-page form. The hero band is
saturated highway-yellow (`#ffd60a`) — a colour inherited from caution signs
and old New York taxis — with pure `#000` Inter Display set at 88–112px / 800
weight, tracked tight at `-0.04em`. The supporting bands are pure white and
pure black, no greys in the middle. Cards on the white canvas use a 2px solid
black border at 12px radius — a hyper-flat, near-brutalist move that
distinguishes beehiiv from Substack's cosier serif aesthetic and Ghost's
warm-cream restraint. The voice is aggressive-masculine: revenue stats in
giant numerals, "monetize" as the verb of choice, and a punchy "sign up free"
black-pill CTA that contrasts hard against the yellow. Where Substack tells
you to write, beehiiv tells you to make money — and the design inherits that
energy. The lineage runs through Wall Street Journal/NYP front-page broadsheet
energy, Off-White / Virgil Abloh's industrial graphic vocabulary, and the
2010s zine-revival love of black-on-yellow contrast.
influences:
- name: Wall Street Journal
role: Tabloid + financial-news loud-headline lineage; the broadsheet front-page energy.
url: https://www.wsj.com
- name: Off-White
role: Quotation-marks, bold display, black-on-yellow industrial graphic vocabulary.
url: https://www.off---white.com
- name: Substack
role: Direct rival — beehiiv is positioned as the louder, money-first alternative.
url: https://substack.com
- name: Pangram Pangram (PP Neue Machina)
role: The display family — industrial geometric sans tuned for marketing punch.
url: https://pangrampangram.com
- name: New York Post
role: Tabloid front-page boldness translated into landing-page form.
url: https://nypost.com
---
## 1. Visual Theme & Atmosphere
beehiiv's site reads like a tabloid front page that learned how to sell SaaS. The hero band is saturated `#ffd60a` highway-yellow with pure black PP Neue Machina (or Inter Display fallback) set at 88–112px / 800 weight, tracked tight. Below the hero, the page alternates pure white feature bands and a pure black footer — there are essentially no greys in the canvas, only at the card-tier and divider tier.
The voice is aggressive-monetization. Revenue stats, subscriber counts, and "$10,000 / month" appear at heroic display sizes — the canonical stat is set in JetBrains Mono at 96px with tabular numerals so the numerals lock-step align across cards. Where Substack frames itself around writing, beehiiv frames itself around making money — and the design carries that energy at every scale. Cards on the white canvas use a 2px solid `#000` border at 12px radius, a hyper-flat near-brutalist move that no other newsletter platform uses; the same card on the dark band uses a 1px `#1f1f1f` ring instead.
The atmosphere is poster-energy. The page bands swap colour aggressively: yellow hero → white feature → black testimonial → white pricing → yellow CTA-band → black footer. The contrast cycle is what gives beehiiv its tabloid pulse — a reader scrolling never settles into a single mood; the page wants attention. Where Notion oscillates between calm-light and emotional-dark for editorial pacing, beehiiv oscillates between yellow and black for impact pacing. There is no in-between mood.
The radius ladder is moderate. Cards at 12px, buttons at 10px, the canonical CTA at full pill (`9999px`). The pill CTA reads as the action pressure-point — a black pill on yellow is the brand's defining gesture. Even the secondary CTA (yellow pill on white) inherits the pill shape.
There is essentially no shadow vocabulary. The 2px solid black border carries elevation entirely; a card with a drop shadow reads as a different product (Ghost, Mailchimp). Even the dark-band testimonial card uses an inset 1px ring rather than a drop shadow. The flatness is the discipline — and the discipline reinforces the tabloid / zine register.
**Key Characteristics**
- Saturated `#ffd60a` highway-yellow hero band — the brand's identifying note
- Pure black `#000` against pure white `#fff`; essentially no grey in the canvas
- 2px solid black card borders at 12px radius — the hyper-flat elevation strategy
- Black pill CTA on yellow (the canonical pair); yellow pill on white as secondary
- PP Neue Machina or Inter Display at 88–112px / 800 weight tracked at `-0.04em`
- JetBrains Mono with tabular numerals for revenue stats at 64–96px scale
- Aggressive band-cycling: yellow → white → black → white → yellow
- Black on yellow always; never white on yellow (heritage and contrast both demand it)
- 120px section padding for poster breathing — looser than Substack, tighter than Linear
- Heavy `-0.04em` negative tracking at hero scale gives the bulletin-loud compression
## 2. Color Palette & Roles
### Primary
- **bg** (`#ffffff`): the primary white canvas; full pure white, no warmth.
- **bg-yellow** (`#ffd60a`): the signature highway-yellow hero band — saturated, not muted.
- **bg-dark** (`#000000`): pure black footer / contrast band; full-bleed black, no warmth.
- **text** (`#000000`): plain black body, no opacity tilt.
- **brand** (`#ffd60a`): the yellow itself is the brand identity.
### Brand & Dark
- **brand-hover** (`#e6c000`): yellow a half-step darker for pressed state.
- **brand-active** (`#cca800`): deepest pressed yellow.
- **brand-soft** (`#fff7c2`): softest yellow tint, used for selection backgrounds and inline highlights.
- **accent** (`#000000`): black is the secondary brand — every black surface reads as a brand element, not a neutral.
- **bg-dark-soft** (`#0a0a0a`): near-black interior surface for the dark band.
### Accent
- The system is intentionally yellow + black + white. There is no third hue. Any apparent "accent" is the same palette in a different role.
- **brand-soft** (`#fff7c2`) is the softest yellow tint, used sparingly for inline selection states.
### Interactive
- **link**: `#000000` underlined; never the brand yellow (yellow on white fails contrast).
- **link-on-yellow**: `#000000`, underlined; black always reads as the action on yellow.
- **link-on-dark**: `#ffd60a` for inline links inside the dark band — this is the only place yellow does link-duty.
- **selected**: `brand-soft` (`#fff7c2`) as fill, `#000000` as text.
- **disabled**: `text-faint` (`#cccccc`) on `surface` (`#fafafa`).
### Neutral Scale
- **text-muted** (`#666666`): captions, meta, secondary copy.
- **text-soft** (`#999999`): tertiary text — timestamps, micro-copy.
- **text-faint** (`#cccccc`): disabled state, separator labels.
- The system avoids more than three grey tiers; mid-tone greys read as a different product (Substack, Ghost).
### Surface & Borders
- **surface** (`#fafafa`): near-white card panel for nested grids.
- **surface-2** (`#f0f0f0`): second-tier neutral, internal table rows.
- **surface-3** (`#e5e5e5`): third-tier neutral, divider areas.
- **surface-dark** (`#0a0a0a`): dark-band card surface.
- **surface-dark-2** (`#1a1a1a`): second-level dark surface.
- **border** (`#000000`): the canonical 2px solid black card border — the brand's elevation.
- **border-soft** (`#e5e5e5`): softer 1px divider for internal grids.
- **border-dark** (`#1f1f1f`): 1px black-on-black ring used inside the dark band.
### Shadow Colors
- **none**: the default — beehiiv refuses ambient shadow on the marketing surface.
- **raised** (`rgba(0,0,0,0.08) 0 4px 16px`): rare, only on floating widgets like the newsletter-signup popover.
- **inset-dark** (`inset 0 0 0 1px #1f1f1f`): the only "shadow" used on the dark band — an inset ring rather than a drop shadow.
Note: the 2px solid black border *replaces* shadow as the elevation strategy. This is the hyper-flat doctrine — and it is the brand's most recognisable visual decision.
### Semantic
- **success** (`#15803d`) on **success-bg** (`#dcfce7`): editorial green.
- **warning** (`#a16207`) on **warning-bg** (`#fef3c7`): warm amber — beehiiv reaches for amber rather than yellow because yellow is the brand and would be overloaded.
- **danger** (`#b91c1c`) on **danger-bg** (`#fee2e2`): brick red.
- **info** (`#000000`) on **info-bg** (`#fafafa`): info reuses plain black; the system refuses an info-blue.
## 3. Typography Rules
### Font Family
- **Display**: PP Neue Machina (Pangram Pangram's industrial geometric sans) → Inter Display → Inter → -apple-system → BlinkMacSystemFont → Segoe UI → Helvetica → Arial → sans-serif.
- **Body**: Inter → -apple-system → BlinkMacSystemFont → Segoe UI → Roboto → Helvetica → Arial → sans-serif.
- **Mono companion**: JetBrains Mono → IBM Plex Mono → Menlo → monospace.
- **OpenType features**: `ss01` and `ss02` on display (geometric stylistic alternates for Neue Machina); `tnum` (tabular numerals) on stats and pricing tiers.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | PP Neue Machina | 112 | 800 | 0.9 | -0.045em | ss01 | reserved for the most aggressive marketing |
| display-large | PP Neue Machina | 88 | 800 | 0.95 | -0.04em | ss01 | the canonical hero size |
| display | PP Neue Machina | 72 | 800 | 0.98 | -0.035em | ss01 | secondary heroes |
| h1 | PP Neue Machina | 56 | 800 | 1.0 | -0.03em | — | section heads |
| h2 | PP Neue Machina | 40 | 800 | 1.05 | -0.025em | — | feature-band heads |
| h3 | PP Neue Machina | 28 | 700 | 1.2 | -0.015em | — | sub-feature heads |
| h4 | PP Neue Machina | 22 | 700 | 1.25 | -0.01em | — | card heads |
| h5 | PP Neue Machina | 18 | 700 | 1.3 | -0.005em | — | inline emphasis |
| h6 | PP Neue Machina | 14 | 700 | 1.35 | 0 | — | label-grade heads |
| body-large | Inter | 18 | 400 | 1.55 | 0 | kern | hero subheads |
| body | Inter | 16 | 400 | 1.5 | 0 | kern | default reading |
| body-small | Inter | 14 | 400 | 1.45 | 0 | kern | secondary copy |
| stat-mega | JetBrains Mono | 96 | 800 | 1.0 | -0.035em | tnum | revenue numerals — the headline stat |
| stat-large | JetBrains Mono | 64 | 800 | 1.0 | -0.025em | tnum | secondary stat |
| label | JetBrains Mono | 12 | 600 | 1.3 | 0.06em | — | eyebrow, category cue |
| caption | Inter | 13 | 500 | 1.4 | 0.02em | kern | image / chart caption |
| code-inline | JetBrains Mono | 14 | 400 | 1.4 | 0 | — | inline code |
| code | JetBrains Mono | 14 | 400 | 1.5 | 0 | — | code block |
### Principles
- **Tight tracking is the marketing voice**: at hero sizes the track tightens to `-0.04em` to `-0.045em`. Without that compression, PP Neue Machina at 800 weight reads as competent but not declarative. The negative tracking is what carries the bulletin-loud register.
- **800 weight or nothing**: the display family runs at 800 weight as default; 700 appears only at H3 and below. This is a heavier weight register than Substack (700) or Notion (700) and the heaviness is the brand.
- **Revenue stats are typographic anchors**: every dashboard mockup, every pricing tier, every testimonial uses JetBrains Mono with `tnum` for numerals. The mono numerals lock-step align across cards — a typographic decision that signals "this product is about money".
- **No serif, no rounded sans, no humanist warmth**: beehiiv refuses every soft typographic register. PP Neue Machina is industrial-geometric; Inter is workhorse-neutral; JetBrains Mono is technical. Together they signal "loud, technical, monetisation-first".
- **Mono labels mark category and stats**: anywhere the page is naming a category ("Newsletter", "Sponsor", "Tier") or showing a stat, the type switches to JetBrains Mono.
- **The H1 leans on size, weight, and tracking together**: at 56–112px / 800 / `-0.03em` to `-0.045em`, the headline reads as a tabloid headline rather than a marketing banner. Soften any of those three dials and the register shifts.
## 4. Component Stylings
### Buttons
**Primary (black pill)**
- Background: `#000000`. Text: `#ffffff` at Inter 600 / 16px. Padding: `14px 28px`. Radius: 9999px. Border: none.
- Hover: background → `#1a1a1a`, transform → `translateY(-1px)`. Active: transform → `translateY(0)`, no colour shift.
- Use: every primary CTA — Sign up free, Start earning, Launch your newsletter.
**Yellow pill**
- Background: `#ffd60a`. Text: `#000000` at Inter 700 / 16px. Padding: `14px 28px`. Radius: 9999px. Border: none.
- Hover: background → `#e6c000`, no transform.
- Use: secondary action on white feature bands; substitutes for primary in "secondary" hierarchy.
**Ghost (outline)**
- Background: transparent. Text: `#000000` at Inter 600 / 16px. Padding: `12px 24px`. Radius: 8px. Border: `2px solid #000000`.
- Hover: background → `#fafafa`. Use: tertiary action paired with primary or yellow CTA.
**Ghost on dark**
- Background: transparent. Text: `#ffffff` at Inter 600 / 16px. Padding: `12px 24px`. Radius: 8px. Border: `2px solid #ffffff`.
- Hover: background → `#1a1a1a`. Use: secondary action inside the dark band.
### Cards
**Standard (thick-black-border)**
- Background: `#ffffff`. Border: `2px solid #000000`. Radius: 12px. Padding: 32px. No shadow.
- Hover: transform → `translateY(-2px)`, no shadow added.
- Use: feature cards, pricing tiers, testimonials on white bands.
**Yellow card**
- Background: `#ffd60a`. Text: `#000000` at Inter 600 / 18px. Border: `2px solid #000000`. Radius: 12px. Padding: 32px.
- Use: feature emphasis cards, callout blocks.
**Dark card** (testimonial in dark band)
- Background: `#0a0a0a`. Text: `#ffffff` at Inter 500 / 16px. Border: `1px solid #1f1f1f`. Radius: 12px. Padding: 32px. No shadow.
- Use: testimonials inside the black band.
**Stat tile**
- Background: `#ffd60a`. Text: `#000000` at JetBrains Mono 96 / 800. Border: `2px solid #000000`. Radius: 12px. Padding: 24px.
- Use: revenue / subscriber count tiles — the brand's iconic stat surface.
### Badges, Tags, Pills
**Black badge**
- Background: `#000000`. Text: `#ffffff` at JetBrains Mono 600 / 12px tracked `+0.06em` uppercase. Padding: `4px 12px`. Radius: 9999px.
- Use: "FREE", "POPULAR", "NEW" status tags.
**Yellow badge**
- Background: `#ffd60a`. Text: `#000000` at JetBrains Mono 600 / 12px. Padding: `4px 12px`. Radius: 9999px.
- Use: feature highlights, premium tier markers.
### Inputs / Forms
**Text input**
- Background: `#ffffff`. Border: `2px solid #000000`. Radius: 8px. Padding: `14px 16px`. Font: Inter 500 / 16px.
- Focus: ring `0 0 0 3px rgba(255,214,10,0.4)` (yellow ring).
- Placeholder: `#999999`.
**Newsletter signup input**
- Background: `#ffffff`. Border: `2px solid #000000`. Radius: 9999px. Padding: `14px 24px`. Font: Inter 500 / 16px.
- Pairs with a black pill submit button inside the same shape.
### Navigation
**Top bar**
- Background: `#ffffff` with `2px solid #000000` bottom border (or no border on yellow hero). Height: 72px.
- Logo: beehiiv wordmark in PP Neue Machina 800 / 22px in `#000000`.
- Nav items: Inter 600 / 14px, colour `#000000`, hover → underline appears.
- Primary CTA always visible at top right (black pill).
### Tooltips, Toasts, Modals
- **Tooltip**: background `#000000`, text `#ffffff` at Inter 500 / 12px, radius 6px, padding `6px 10px`. Shadow: `none`.
- **Toast**: background `#000000`, text `#ffffff` at Inter 500 / 14px, radius 12px, padding `16px 20px`. No shadow; the dark fill is the elevation.
- **Modal**: background `#ffffff`, border `2px solid #000000`, radius 16px, no shadow. Backdrop: `rgba(0,0,0,0.6)`. Padding: 32px.
## 5. Layout Principles
### Spacing System
Base unit: 4px. Scale: `[1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160]` × 4px. The system favours large jumps for poster energy — 32px gutters, 64–80px between feature stacks within a band, 120–160px between major bands. The largeness is what gives beehiiv its broadsheet feel.
### Grid & Container
- **Page width**: 1280px max, centred.
- **Prose width**: 720px for editorial blog and docs.
- **Hero treatment**: hero copy claims roughly 800–900px horizontal, headline at 88–112px display-large, image / illustration spans full container width below or sits as a beehiiv newsletter mockup at right.
- **Feature grid**: 3-column at 1024px+, 2-column at 768–1024px, 1-column below 768px. Card gap: 32px (tighter cards, 24px).
### Whitespace Philosophy
Whitespace here is poster breathing — generous around the hero (120px+ top/bottom padding), tight inside cards (32px). The page exhales between bands and inhales inside the band itself. Where Substack uses whitespace as a literary cue, beehiiv uses it as a publication-poster cue — there is more air around the headline than around the body text, mimicking a tabloid's front-page hierarchy.
### Section Cadence
The signature cadence is band-cycling: yellow hero → white feature → black testimonial → white pricing → yellow CTA-band → black footer. Each band is full-bleed (the bg colour reaches the viewport edges), and transitions are abrupt (no gradient between bands). The abrupt transitions are the brand — they communicate the same poster-style energy as a turning page on a tabloid.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| none | 0px | rare; only used for full-bleed bands |
| micro | 2px | inline tags, internal indicators |
| xs | 4px | tight UI primitives |
| sm | 6px | small inline pills, secondary buttons |
| md | 8px | standard buttons, ghost outlines |
| lg | 10px | large buttons (rare) |
| card | 12px | the canonical card radius |
| xl | 16px | larger feature cards, modal |
| xxl | 20px | hero shells |
| hero | 24px | feature-image rounded corners |
| pill | 9999px | the canonical CTA pill, badges |
The radius ladder is moderate-tight. Cards at 12px, primary CTA at full pill, tags at full pill — this combination of moderate radius for surface and full pill for action is the brand's signature. Buttons at 10px (rectangular) read as secondary; the pill is reserved for the primary CTA.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, on `#ffffff` or `#ffd60a` or `#000000` | body content, default surfaces |
| 1 | `2px solid #000000` border, no shadow | the canonical card; depth via thick border |
| 2 | `2px solid #000000` + `translateY(-2px)` on hover | hovered card |
| 3 | `1px solid #1f1f1f` inset on `#0a0a0a` | dark-band testimonial card |
| 4 | `rgba(0,0,0,0.08) 0 4px 16px` shadow | rare floating widget (newsletter popover) |
| 5 | full-bleed modal with `2px #000000` border + backdrop | dialog |
**Shadow Philosophy**: beehiiv refuses ambient shadow on the marketing canvas. The 2px solid black border carries elevation entirely — and the refusal of shadow is what distinguishes beehiiv from Substack's softer card chrome. On the dark band, the inset 1px ring substitutes for the border (a 2px outer border on black would read as overkill); the inset ring is the dark-band's elevation logic. The only true drop shadow appears on rare floating widgets like the newsletter-signup popover, where elevation is genuinely needed.
## 8. Interaction & Motion
### Easing
- **standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — workhorse Material-style ease.
- **emphasized**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — slight overshoot used for the punch on hero entrance and CTA hover-press.
- **decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — used for elements entering from off-canvas.
### Durations
- **instant** (80ms): hover background colour shifts on buttons.
- **fast** (150ms): card hover lift, link underline grow.
- **standard** (220ms): primary CTA press, dropdown open.
- **slow** (320ms): modal open, page band cross-fade.
- **emphasized** (480ms): hero entrance choreography with stat-numeral count-up.
### Per-component micro-states
- **Black-pill CTA hover**: background → `#1a1a1a`, `translateY(-1px)`, 150ms standard ease. Active: `translateY(0)`.
- **Card hover**: `translateY(-2px)` over 150ms; the 2px black border stays solid (no thickness change).
- **Stat tile entrance**: numeral counts up from 0 to final value over 1200ms with `decelerate` ease (animated only when the tile enters viewport).
- **Yellow-pill hover**: background → `#e6c000`, no transform.
- **Input focus**: yellow ring fades in at 100ms; border thickness stays at 2px.
### Page transitions
beehiiv uses opacity-only fades at 200ms between marketing routes; no slide, no scale. The aggressive band-cycling within a page is the visual energy, so route transitions stay quiet to let the cycling carry the impact.
### Reduced-motion strategy
`prefers-reduced-motion: reduce` is honored: card hover lifts disappear, stat count-up animation is replaced by static final value, page entrance becomes instant cut. The yellow ring on focus remains (focus indication is not animation).
## 9. Accessibility & A11y
### Contrast pairs (computed)
- **text on bg**: `#000000` on `#ffffff` → 19.6:1 (AAA at all sizes).
- **text on bg-yellow**: `#000000` on `#ffd60a` → 17.4:1 (AAA at all sizes — the canonical pair).
- **text on bg-dark**: `#ffffff` on `#000000` → 19.6:1 (AAA at all sizes).
- **text-muted on bg**: `#666666` on `#ffffff` → 5.7:1 (AA at body, AAA at large).
- **on-yellow-muted**: `#000000a8` on `#ffd60a` → 11.5:1 (AAA).
### Focus indicators
- **Default focus ring**: `3px solid rgba(255,214,10,0.4)` with 1px offset on white surfaces; the yellow ring is visible on every neutral surface.
- **On yellow surfaces**: ring shifts to `3px solid rgba(0,0,0,0.4)` (black ring on yellow band).
- **On dark surfaces**: ring shifts to `3px solid rgba(255,214,10,0.4)` (yellow ring on black band — high contrast).
Focus rings are never removed. The ring colour adapts to the surface.
### ARIA patterns
- Pricing toggles use `role="radiogroup"` rather than tabs.
- Newsletter signup uses `aria-describedby` to associate input with helper text.
- Modals use `role="dialog"`, `aria-modal="true"`, focus trap, `Esc` to close.
- Stat tiles with count-up animation use `aria-live="polite"` only on first reveal.
### Keyboard nav order
Top bar → hero CTA → feature bands in DOM order → pricing → footer. Skip-to-content link at top of DOM, visible on focus. Tab order matches visual order through band-cycling.
### Screen reader hints
- Yellow hero band carries no special semantics beyond visual styling.
- Decorative band-dividers carry `aria-hidden="true"`.
- Stat tiles use `aria-label="N thousand subscribers"` rather than relying on numeral parsing.
- Icon-only buttons carry `aria-label` describing the action.
### Reduced motion
Honored throughout — see §8.
## 10. Responsive Behavior
### Breakpoints
| Tier | Width | Behavior |
|---|---|---|
| mobile | < 480px | single column, 16px gutter, 64px section padding, hero at 48–56px display |
| tablet | 480–768px | single column, 24px gutter, 80px section padding, hero at 64–72px |
| desktop | 768–1024px | 2-column feature grids, 32px gutter, 96px section padding |
| wide | 1024–1280px | 3-column feature grids, 32px gutter, 120px section padding |
| ultra | 1280px+ | container caps at 1280px, hero at full 88–112px |
### Touch Targets
Minimum 44×44px on touch devices. The 14px / 28px button padding clears the threshold. Pill CTA on mobile expands to 16px / 32px padding for thumb-friendly tap area.
### Collapsing strategy
- **Top nav**: hamburger menu < 768px; primary CTA stays visible at top right.
- **Hero**: mockup image moves below copy < 768px; copy claims full width.
- **Feature grid**: 3 → 2 → 1 columns at 1024 / 768 / 480.
- **Pricing tiers**: stack vertically < 768px with the popular tier highlighted via order shift to top.
- **Footer**: 4-column → 2-column → 1-column at 1024 / 768 / 480.
- **Stat tiles**: 4-across → 2x2 grid → 1-column at 1024 / 768 / 480.
### Image behavior
Hero newsletter-mockups use `aspect-ratio: 4/3` lock with `object-fit: cover`. Below 768px, mockup fills container width with maintained aspect ratio.
### Container queries
Used inside the dashboard mockups — the tier component switches between condensed and expanded modes based on container width.
## 11. Content & Voice
### Tone
beehiiv's tone is **monetisation-loud**: direct, present-tense, unapologetic about money. It writes like a financial newspaper's promotional column — short bulletins, dollar figures at the headline scale, and a willingness to use phrases like "10x your revenue" or "monetize from day one" that softer brands would avoid. Headlines lean on numerals and verbs of growth ("Scale your newsletter", "Monetize without limits"); the secondary copy explains the mechanism plainly.
### Microcopy patterns
- **Button verbs**: "Start free", "Sign up free", "Launch your newsletter", "Talk to sales", "Book a demo", "Start earning". The verb is always action-forward and the modifier is always free or money-related.
- **Error messages**: pattern is "[Action] couldn't be completed. [Reason]." e.g. "Couldn't send your newsletter — your account has unpaid charges. Update your billing to resume."
- **Success confirmations**: short, declarative, often paired with a numeral. "Newsletter sent to 10,427 subscribers." rather than "Your newsletter was sent successfully!"
### Empty states
Empty states are direct and instructional, with a monetisation prompt where relevant. "No subscribers yet — share your signup link" with a copy-link button as primary action. "No revenue this month — set up your first sponsorship." Empty-state copy frames the absence as opportunity, not failure.
### CTA verb conventions
- **Primary marketing CTA**: "Start free" or "Sign up free" — the canonical phrase.
- **Money-forward CTA**: "Start earning", "Monetize now", "Launch & earn".
- **Demo / sales**: "Book a demo" or "Talk to sales".
- **Newsletter signup**: "Subscribe" — plain, with the numeral count nearby ("Join 50,000 readers").
## 12. Dark Mode & Theming
beehiiv's marketing surface uses dark mode **as a band-level treatment**, not as a default page mode. The dark band is the testimonial / footer zone; the rest of the page stays on white-and-yellow. The dark token map (see frontmatter `colors-dark`):
- **bg**: `#000000` (pure black, no warmth)
- **bg-soft**: `#0a0a0a` for testimonial card surfaces
- **surface**: `#1a1a1a`, **surface-strong**: `#2a2a2a`
- **text**: `#ffffff` (no opacity tilt)
- **text-muted**: `#ffffffb3`, **text-soft**: `#ffffff80`
- **brand**: `#ffd60a` — yellow holds at full saturation; contrast against `#000000` is 17.4:1 (AAA)
- **border**: `#1f1f1f` (the inset-ring black-on-black)
When implementing the dark band:
- Cards use `1px solid #1f1f1f` (or inset ring) instead of the 2px outer border — outer 2px on black reads as overkill.
- Yellow gains link-duty in the dark band (it is the only place yellow does links).
- Pill CTAs invert: white pill with black text on the dark band.
- No shadows are added; the dark mode preserves the flat-as-discipline doctrine.
The dark zone is opt-in only — beehiiv does not follow `prefers-color-scheme: dark` automatically. The dashboard / product side has a separate full dark theme controlled by user preference.
## 13. Lineage & Influences
beehiiv's design lineage runs through three traditions: financial-broadsheet boldness, industrial graphic vocabulary, and 2010s zine-revival aesthetics. The yellow-and-black contrast pair is heritage — caution signs, taxi liveries, hardware-store branding — and the brand reaches for that vernacular legibility deliberately. The 2px solid black card border is a near-brutalist move borrowed from sticker-art and zine-revival design (the Mast Brothers chocolate-bar typography era), translated into landing-page form.
The display family (PP Neue Machina from Pangram Pangram) is the explicit citation of the industrial-geometric tradition that runs through Mark Simonson's Proxima, Pangram's full library, and Inter Display. The voice — monetisation-forward, direct, present-tense — is positioned as the loud counter to Substack's literary register and Ghost's open-source warmth. Where Substack invites you to write, beehiiv invites you to scale.
The Off-White / Virgil Abloh reference is structural: the quotation-mark-as-decoration, the bold display, the black-on-yellow industrial vocabulary. beehiiv translates that fashion-graphic idiom into newsletter-platform marketing, and the translation is unusually direct.
**Named influences**
- **Wall Street Journal** ([wsj.com](https://www.wsj.com)) — Tabloid + financial-news loud-headline lineage; the broadsheet front-page energy.
- **Off-White** ([off---white.com](https://www.off---white.com)) — Quotation-marks, bold display, black-on-yellow industrial graphic vocabulary.
- **Substack** ([substack.com](https://substack.com)) — Direct rival; beehiiv is positioned as the louder, money-first alternative.
- **Pangram Pangram** ([pangrampangram.com](https://pangrampangram.com)) — The PP Neue Machina display family — industrial geometric sans tuned for marketing punch.
- **New York Post** ([nypost.com](https://nypost.com)) — Tabloid front-page boldness translated into landing-page form.
## 14. Do's and Don'ts
**Do**
- Keep the hero yellow saturated at exactly `#ffd60a`; lighter yellows read as cosy, darker yellows read as caution-tape industrial — neither is beehiiv.
- Always set black on yellow (and never white on yellow); the contrast ratio and the tabloid heritage demand it.
- Use a 2px solid black border on cards — the hairline-and-shadow language of Stripe / Linear is explicitly avoided here.
- Run the display family at 800 weight or heavier; 700 is the bottom of the ladder, not the default.
- Use JetBrains Mono with `tnum` for revenue stats and pricing; the mono numerals lock-step align across cards.
- Cycle bands aggressively: yellow → white → black → white → yellow. The cycle is the brand's pulse.
- Use the black pill CTA on yellow as the canonical action; the yellow pill on white is the secondary inversion.
- Honor `prefers-reduced-motion: reduce` — collapse hover lifts and stat count-ups to static states.
- Run sections at 120–160px vertical padding; the broadsheet breath is the rhythm.
- Use 12px card radius and full pill (9999px) for the CTA — the moderate-card / full-pill pair is the signature.
**Don't**
- Don't soften the display type weight below 700; beehiiv lives on the heavy side of the type ladder.
- Don't introduce a third hue; the system is yellow + black + white and any drift breaks the tabloid identity.
- Don't apply drop shadows to cards; the hyper-flat 2px border is the elevation strategy.
- Don't replace the yellow with pastel-yellow or muted gold — the saturated `#ffd60a` is non-negotiable.
- Don't set white on yellow text; the contrast fails and the heritage breaks. Black on yellow always.
- Don't add gradients, glows, or atmospheric blur — the system is poster-flat.
- Don't soften the band transitions with gradients; the abrupt swap from yellow to black is the energy.
- Don't run hero copy below 56px on desktop; the bulletin-loud register requires headline scale.
- Don't use Inter as the display family; Inter is the body. PP Neue Machina (or Inter Display fallback) carries the marketing voice.
- Don't follow `prefers-color-scheme: dark` automatically on marketing — the dark band is a designed band, not a system mode.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
bg-yellow: #ffd60a
bg-dark: #000000
text: #000000
text-on-yellow: #000000
text-on-dark: #ffffff
text-muted: #666666
brand: #ffd60a
brand-hover: #e6c000
border: #000000
border-soft: #e5e5e5
```
### Example Component Prompts
1. "Create a hero in the beehiiv style: full-bleed `#ffd60a` yellow band, PP Neue Machina (or Inter Display fallback) at 88px / 800 weight headline in `#000000` with `-0.04em` tracking, supporting body at Inter 18px / 400 in `#000000`, primary black-pill CTA (`#000000` background, `#ffffff` text at Inter 600 / 16px, `14px 28px` padding, full pill 9999px radius)."
2. "Design a feature card in the beehiiv style: `#ffffff` background, `2px solid #000000` border, 12px radius, 32px padding, NO drop shadow, PP Neue Machina 700 / 28px H3 title, body at Inter 400 / 16px in `#000000`. Hover: `translateY(-2px)`, border stays at 2px solid black."
3. "Render a revenue stat tile in the beehiiv style: `#ffd60a` yellow background, `2px solid #000000` border, 12px radius, 24px padding, JetBrains Mono 800 / 96px numeral with `tnum` enabled in `#000000`, label below at JetBrains Mono 600 / 12px tracked `+0.06em` uppercase."
4. "Create a dark testimonial band in the beehiiv style: full-bleed `#000000` background, testimonial card at `#0a0a0a` with `1px solid #1f1f1f` ring (inset), 12px radius, 32px padding, quote at Inter 500 / 18px in `#ffffff`, attribution at JetBrains Mono 600 / 12px in `#ffd60a`."
5. "Design a newsletter-signup form in the beehiiv style: pill-shaped wrapper at 9999px radius, `2px solid #000000` border, white fill, Inter 500 / 16px input with placeholder `#999999`, black pill submit button at right. Focus ring: `0 0 0 3px rgba(255,214,10,0.4)` yellow."
6. "Render a pricing tier card in the beehiiv style: `#ffffff` background, `2px solid #000000` border, 12px radius, 32px padding, tier name at PP Neue Machina 700 / 22px, price at JetBrains Mono 800 / 64px with `tnum` and `-0.025em` tracking in `#000000`, feature list below at Inter 400 / 16px with `#000000` checkmark bullets, primary CTA black pill at the bottom."
### Iteration Guide
1. **Start with the yellow**: confirm the saturated `#ffd60a` (not pastel, not gold). If your yellow reads cosy, you've drifted to a different system.
2. **Verify the type voice**: hero headlines should hit 56–112px at 800 weight with negative tracking around `-0.03em` to `-0.045em`. If the headline reads competent rather than declarative, tighten the track and bump the weight.
3. **Audit the elevation strategy**: cards must use `2px solid #000000` border, never a drop shadow. If you see any soft shadow on a card, replace it with the 2px border.
4. **Check the contrast pair**: text on yellow must be black; text on white can be black or grey; text on black must be white. White on yellow fails contrast and breaks the heritage.
5. **Verify the band cycle**: a complete page should cycle yellow → white → black → white → yellow. If your page is mostly white, you're missing the brand's pulse.
6. **Confirm the CTA shape**: primary action should be the black pill at full 9999px radius. Rectangle buttons read as secondary, not primary.
7. **Audit the stat surfaces**: every numeric stat (revenue, subscribers, growth) should use JetBrains Mono with `tnum` at 64–96px scale. If your stats are in Inter, you're missing the technical-monetisation cue.
8. **Test the reduced-motion path**: card hover lifts and stat count-ups should collapse to static states under `prefers-reduced-motion: reduce`.
1. Visual Theme & Atmosphere
beehiiv’s site reads like a tabloid front page that learned how to sell SaaS. The hero band is saturated #ffd60a highway-yellow with pure black PP Neue Machina (or Inter Display fallback) set at 88–112px / 800 weight, tracked tight. Below the hero, the page alternates pure white feature bands and a pure black footer — there are essentially no greys in the canvas, only at the card-tier and divider tier.
The voice is aggressive-monetization. Revenue stats, subscriber counts, and “$10,000 / month” appear at heroic display sizes — the canonical stat is set in JetBrains Mono at 96px with tabular numerals so the numerals lock-step align across cards. Where Substack frames itself around writing, beehiiv frames itself around making money — and the design carries that energy at every scale. Cards on the white canvas use a 2px solid #000 border at 12px radius, a hyper-flat near-brutalist move that no other newsletter platform uses; the same card on the dark band uses a 1px #1f1f1f ring instead.
The atmosphere is poster-energy. The page bands swap colour aggressively: yellow hero → white feature → black testimonial → white pricing → yellow CTA-band → black footer. The contrast cycle is what gives beehiiv its tabloid pulse — a reader scrolling never settles into a single mood; the page wants attention. Where Notion oscillates between calm-light and emotional-dark for editorial pacing, beehiiv oscillates between yellow and black for impact pacing. There is no in-between mood.
The radius ladder is moderate. Cards at 12px, buttons at 10px, the canonical CTA at full pill (9999px). The pill CTA reads as the action pressure-point — a black pill on yellow is the brand’s defining gesture. Even the secondary CTA (yellow pill on white) inherits the pill shape.
There is essentially no shadow vocabulary. The 2px solid black border carries elevation entirely; a card with a drop shadow reads as a different product (Ghost, Mailchimp). Even the dark-band testimonial card uses an inset 1px ring rather than a drop shadow. The flatness is the discipline — and the discipline reinforces the tabloid / zine register.
Key Characteristics
- Saturated
#ffd60ahighway-yellow hero band — the brand’s identifying note - Pure black
#000against pure white#fff; essentially no grey in the canvas - 2px solid black card borders at 12px radius — the hyper-flat elevation strategy
- Black pill CTA on yellow (the canonical pair); yellow pill on white as secondary
- PP Neue Machina or Inter Display at 88–112px / 800 weight tracked at
-0.04em - JetBrains Mono with tabular numerals for revenue stats at 64–96px scale
- Aggressive band-cycling: yellow → white → black → white → yellow
- Black on yellow always; never white on yellow (heritage and contrast both demand it)
- 120px section padding for poster breathing — looser than Substack, tighter than Linear
- Heavy
-0.04emnegative tracking at hero scale gives the bulletin-loud compression
2. Color Palette & Roles
Primary
- bg (
#ffffff): the primary white canvas; full pure white, no warmth. - bg-yellow (
#ffd60a): the signature highway-yellow hero band — saturated, not muted. - bg-dark (
#000000): pure black footer / contrast band; full-bleed black, no warmth. - text (
#000000): plain black body, no opacity tilt. - brand (
#ffd60a): the yellow itself is the brand identity.
Brand & Dark
- brand-hover (
#e6c000): yellow a half-step darker for pressed state. - brand-active (
#cca800): deepest pressed yellow. - brand-soft (
#fff7c2): softest yellow tint, used for selection backgrounds and inline highlights. - accent (
#000000): black is the secondary brand — every black surface reads as a brand element, not a neutral. - bg-dark-soft (
#0a0a0a): near-black interior surface for the dark band.
Accent
- The system is intentionally yellow + black + white. There is no third hue. Any apparent “accent” is the same palette in a different role.
- brand-soft (
#fff7c2) is the softest yellow tint, used sparingly for inline selection states.
Interactive
- link:
#000000underlined; never the brand yellow (yellow on white fails contrast). - link-on-yellow:
#000000, underlined; black always reads as the action on yellow. - link-on-dark:
#ffd60afor inline links inside the dark band — this is the only place yellow does link-duty. - selected:
brand-soft(#fff7c2) as fill,#000000as text. - disabled:
text-faint(#cccccc) onsurface(#fafafa).
Neutral Scale
- text-muted (
#666666): captions, meta, secondary copy. - text-soft (
#999999): tertiary text — timestamps, micro-copy. - text-faint (
#cccccc): disabled state, separator labels. - The system avoids more than three grey tiers; mid-tone greys read as a different product (Substack, Ghost).
Surface & Borders
- surface (
#fafafa): near-white card panel for nested grids. - surface-2 (
#f0f0f0): second-tier neutral, internal table rows. - surface-3 (
#e5e5e5): third-tier neutral, divider areas. - surface-dark (
#0a0a0a): dark-band card surface. - surface-dark-2 (
#1a1a1a): second-level dark surface. - border (
#000000): the canonical 2px solid black card border — the brand’s elevation. - border-soft (
#e5e5e5): softer 1px divider for internal grids. - border-dark (
#1f1f1f): 1px black-on-black ring used inside the dark band.
Shadow Colors
- none: the default — beehiiv refuses ambient shadow on the marketing surface.
- raised (
rgba(0,0,0,0.08) 0 4px 16px): rare, only on floating widgets like the newsletter-signup popover. - inset-dark (
inset 0 0 0 1px #1f1f1f): the only “shadow” used on the dark band — an inset ring rather than a drop shadow.
Note: the 2px solid black border replaces shadow as the elevation strategy. This is the hyper-flat doctrine — and it is the brand’s most recognisable visual decision.
Semantic
- success (
#15803d) on success-bg (#dcfce7): editorial green. - warning (
#a16207) on warning-bg (#fef3c7): warm amber — beehiiv reaches for amber rather than yellow because yellow is the brand and would be overloaded. - danger (
#b91c1c) on danger-bg (#fee2e2): brick red. - info (
#000000) on info-bg (#fafafa): info reuses plain black; the system refuses an info-blue.
3. Typography Rules
Font Family
- Display: PP Neue Machina (Pangram Pangram’s industrial geometric sans) → Inter Display → Inter → -apple-system → BlinkMacSystemFont → Segoe UI → Helvetica → Arial → sans-serif.
- Body: Inter → -apple-system → BlinkMacSystemFont → Segoe UI → Roboto → Helvetica → Arial → sans-serif.
- Mono companion: JetBrains Mono → IBM Plex Mono → Menlo → monospace.
- OpenType features:
ss01andss02on display (geometric stylistic alternates for Neue Machina);tnum(tabular numerals) on stats and pricing tiers.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | PP Neue Machina | 112 | 800 | 0.9 | -0.045em | ss01 | reserved for the most aggressive marketing |
| display-large | PP Neue Machina | 88 | 800 | 0.95 | -0.04em | ss01 | the canonical hero size |
| display | PP Neue Machina | 72 | 800 | 0.98 | -0.035em | ss01 | secondary heroes |
| h1 | PP Neue Machina | 56 | 800 | 1.0 | -0.03em | — | section heads |
| h2 | PP Neue Machina | 40 | 800 | 1.05 | -0.025em | — | feature-band heads |
| h3 | PP Neue Machina | 28 | 700 | 1.2 | -0.015em | — | sub-feature heads |
| h4 | PP Neue Machina | 22 | 700 | 1.25 | -0.01em | — | card heads |
| h5 | PP Neue Machina | 18 | 700 | 1.3 | -0.005em | — | inline emphasis |
| h6 | PP Neue Machina | 14 | 700 | 1.35 | 0 | — | label-grade heads |
| body-large | Inter | 18 | 400 | 1.55 | 0 | kern | hero subheads |
| body | Inter | 16 | 400 | 1.5 | 0 | kern | default reading |
| body-small | Inter | 14 | 400 | 1.45 | 0 | kern | secondary copy |
| stat-mega | JetBrains Mono | 96 | 800 | 1.0 | -0.035em | tnum | revenue numerals — the headline stat |
| stat-large | JetBrains Mono | 64 | 800 | 1.0 | -0.025em | tnum | secondary stat |
| label | JetBrains Mono | 12 | 600 | 1.3 | 0.06em | — | eyebrow, category cue |
| caption | Inter | 13 | 500 | 1.4 | 0.02em | kern | image / chart caption |
| code-inline | JetBrains Mono | 14 | 400 | 1.4 | 0 | — | inline code |
| code | JetBrains Mono | 14 | 400 | 1.5 | 0 | — | code block |
Principles
- Tight tracking is the marketing voice: at hero sizes the track tightens to
-0.04emto-0.045em. Without that compression, PP Neue Machina at 800 weight reads as competent but not declarative. The negative tracking is what carries the bulletin-loud register. - 800 weight or nothing: the display family runs at 800 weight as default; 700 appears only at H3 and below. This is a heavier weight register than Substack (700) or Notion (700) and the heaviness is the brand.
- Revenue stats are typographic anchors: every dashboard mockup, every pricing tier, every testimonial uses JetBrains Mono with
tnumfor numerals. The mono numerals lock-step align across cards — a typographic decision that signals “this product is about money”. - No serif, no rounded sans, no humanist warmth: beehiiv refuses every soft typographic register. PP Neue Machina is industrial-geometric; Inter is workhorse-neutral; JetBrains Mono is technical. Together they signal “loud, technical, monetisation-first”.
- Mono labels mark category and stats: anywhere the page is naming a category (“Newsletter”, “Sponsor”, “Tier”) or showing a stat, the type switches to JetBrains Mono.
- The H1 leans on size, weight, and tracking together: at 56–112px / 800 /
-0.03emto-0.045em, the headline reads as a tabloid headline rather than a marketing banner. Soften any of those three dials and the register shifts.
4. Component Stylings
Buttons
Primary (black pill)
- Background:
#000000. Text:#ffffffat Inter 600 / 16px. Padding:14px 28px. Radius: 9999px. Border: none. - Hover: background →
#1a1a1a, transform →translateY(-1px). Active: transform →translateY(0), no colour shift. - Use: every primary CTA — Sign up free, Start earning, Launch your newsletter.
Yellow pill
- Background:
#ffd60a. Text:#000000at Inter 700 / 16px. Padding:14px 28px. Radius: 9999px. Border: none. - Hover: background →
#e6c000, no transform. - Use: secondary action on white feature bands; substitutes for primary in “secondary” hierarchy.
Ghost (outline)
- Background: transparent. Text:
#000000at Inter 600 / 16px. Padding:12px 24px. Radius: 8px. Border:2px solid #000000. - Hover: background →
#fafafa. Use: tertiary action paired with primary or yellow CTA.
Ghost on dark
- Background: transparent. Text:
#ffffffat Inter 600 / 16px. Padding:12px 24px. Radius: 8px. Border:2px solid #ffffff. - Hover: background →
#1a1a1a. Use: secondary action inside the dark band.
Cards
Standard (thick-black-border)
- Background:
#ffffff. Border:2px solid #000000. Radius: 12px. Padding: 32px. No shadow. - Hover: transform →
translateY(-2px), no shadow added. - Use: feature cards, pricing tiers, testimonials on white bands.
Yellow card
- Background:
#ffd60a. Text:#000000at Inter 600 / 18px. Border:2px solid #000000. Radius: 12px. Padding: 32px. - Use: feature emphasis cards, callout blocks.
Dark card (testimonial in dark band)
- Background:
#0a0a0a. Text:#ffffffat Inter 500 / 16px. Border:1px solid #1f1f1f. Radius: 12px. Padding: 32px. No shadow. - Use: testimonials inside the black band.
Stat tile
- Background:
#ffd60a. Text:#000000at JetBrains Mono 96 / 800. Border:2px solid #000000. Radius: 12px. Padding: 24px. - Use: revenue / subscriber count tiles — the brand’s iconic stat surface.
Badges, Tags, Pills
Black badge
- Background:
#000000. Text:#ffffffat JetBrains Mono 600 / 12px tracked+0.06emuppercase. Padding:4px 12px. Radius: 9999px. - Use: “FREE”, “POPULAR”, “NEW” status tags.
Yellow badge
- Background:
#ffd60a. Text:#000000at JetBrains Mono 600 / 12px. Padding:4px 12px. Radius: 9999px. - Use: feature highlights, premium tier markers.
Inputs / Forms
Text input
- Background:
#ffffff. Border:2px solid #000000. Radius: 8px. Padding:14px 16px. Font: Inter 500 / 16px. - Focus: ring
0 0 0 3px rgba(255,214,10,0.4)(yellow ring). - Placeholder:
#999999.
Newsletter signup input
- Background:
#ffffff. Border:2px solid #000000. Radius: 9999px. Padding:14px 24px. Font: Inter 500 / 16px. - Pairs with a black pill submit button inside the same shape.
Navigation
Top bar
- Background:
#ffffffwith2px solid #000000bottom border (or no border on yellow hero). Height: 72px. - Logo: beehiiv wordmark in PP Neue Machina 800 / 22px in
#000000. - Nav items: Inter 600 / 14px, colour
#000000, hover → underline appears. - Primary CTA always visible at top right (black pill).
Tooltips, Toasts, Modals
- Tooltip: background
#000000, text#ffffffat Inter 500 / 12px, radius 6px, padding6px 10px. Shadow:none. - Toast: background
#000000, text#ffffffat Inter 500 / 14px, radius 12px, padding16px 20px. No shadow; the dark fill is the elevation. - Modal: background
#ffffff, border2px solid #000000, radius 16px, no shadow. Backdrop:rgba(0,0,0,0.6). Padding: 32px.
5. Layout Principles
Spacing System
Base unit: 4px. Scale: [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160] × 4px. The system favours large jumps for poster energy — 32px gutters, 64–80px between feature stacks within a band, 120–160px between major bands. The largeness is what gives beehiiv its broadsheet feel.
Grid & Container
- Page width: 1280px max, centred.
- Prose width: 720px for editorial blog and docs.
- Hero treatment: hero copy claims roughly 800–900px horizontal, headline at 88–112px display-large, image / illustration spans full container width below or sits as a beehiiv newsletter mockup at right.
- Feature grid: 3-column at 1024px+, 2-column at 768–1024px, 1-column below 768px. Card gap: 32px (tighter cards, 24px).
Whitespace Philosophy
Whitespace here is poster breathing — generous around the hero (120px+ top/bottom padding), tight inside cards (32px). The page exhales between bands and inhales inside the band itself. Where Substack uses whitespace as a literary cue, beehiiv uses it as a publication-poster cue — there is more air around the headline than around the body text, mimicking a tabloid’s front-page hierarchy.
Section Cadence
The signature cadence is band-cycling: yellow hero → white feature → black testimonial → white pricing → yellow CTA-band → black footer. Each band is full-bleed (the bg colour reaches the viewport edges), and transitions are abrupt (no gradient between bands). The abrupt transitions are the brand — they communicate the same poster-style energy as a turning page on a tabloid.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| none | 0px | rare; only used for full-bleed bands |
| micro | 2px | inline tags, internal indicators |
| xs | 4px | tight UI primitives |
| sm | 6px | small inline pills, secondary buttons |
| md | 8px | standard buttons, ghost outlines |
| lg | 10px | large buttons (rare) |
| card | 12px | the canonical card radius |
| xl | 16px | larger feature cards, modal |
| xxl | 20px | hero shells |
| hero | 24px | feature-image rounded corners |
| pill | 9999px | the canonical CTA pill, badges |
The radius ladder is moderate-tight. Cards at 12px, primary CTA at full pill, tags at full pill — this combination of moderate radius for surface and full pill for action is the brand’s signature. Buttons at 10px (rectangular) read as secondary; the pill is reserved for the primary CTA.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, on #ffffff or #ffd60a or #000000 | body content, default surfaces |
| 1 | 2px solid #000000 border, no shadow | the canonical card; depth via thick border |
| 2 | 2px solid #000000 + translateY(-2px) on hover | hovered card |
| 3 | 1px solid #1f1f1f inset on #0a0a0a | dark-band testimonial card |
| 4 | rgba(0,0,0,0.08) 0 4px 16px shadow | rare floating widget (newsletter popover) |
| 5 | full-bleed modal with 2px #000000 border + backdrop | dialog |
Shadow Philosophy: beehiiv refuses ambient shadow on the marketing canvas. The 2px solid black border carries elevation entirely — and the refusal of shadow is what distinguishes beehiiv from Substack’s softer card chrome. On the dark band, the inset 1px ring substitutes for the border (a 2px outer border on black would read as overkill); the inset ring is the dark-band’s elevation logic. The only true drop shadow appears on rare floating widgets like the newsletter-signup popover, where elevation is genuinely needed.
8. Interaction & Motion
Easing
- standard:
cubic-bezier(0.4, 0, 0.2, 1)— workhorse Material-style ease. - emphasized:
cubic-bezier(0.34, 1.56, 0.64, 1)— slight overshoot used for the punch on hero entrance and CTA hover-press. - decelerate:
cubic-bezier(0, 0, 0.2, 1)— used for elements entering from off-canvas.
Durations
- instant (80ms): hover background colour shifts on buttons.
- fast (150ms): card hover lift, link underline grow.
- standard (220ms): primary CTA press, dropdown open.
- slow (320ms): modal open, page band cross-fade.
- emphasized (480ms): hero entrance choreography with stat-numeral count-up.
Per-component micro-states
- Black-pill CTA hover: background →
#1a1a1a,translateY(-1px), 150ms standard ease. Active:translateY(0). - Card hover:
translateY(-2px)over 150ms; the 2px black border stays solid (no thickness change). - Stat tile entrance: numeral counts up from 0 to final value over 1200ms with
decelerateease (animated only when the tile enters viewport). - Yellow-pill hover: background →
#e6c000, no transform. - Input focus: yellow ring fades in at 100ms; border thickness stays at 2px.
Page transitions
beehiiv uses opacity-only fades at 200ms between marketing routes; no slide, no scale. The aggressive band-cycling within a page is the visual energy, so route transitions stay quiet to let the cycling carry the impact.
Reduced-motion strategy
prefers-reduced-motion: reduce is honored: card hover lifts disappear, stat count-up animation is replaced by static final value, page entrance becomes instant cut. The yellow ring on focus remains (focus indication is not animation).
9. Accessibility & A11y
Contrast pairs (computed)
- text on bg:
#000000on#ffffff→ 19.6:1 (AAA at all sizes). - text on bg-yellow:
#000000on#ffd60a→ 17.4:1 (AAA at all sizes — the canonical pair). - text on bg-dark:
#ffffffon#000000→ 19.6:1 (AAA at all sizes). - text-muted on bg:
#666666on#ffffff→ 5.7:1 (AA at body, AAA at large). - on-yellow-muted:
#000000a8on#ffd60a→ 11.5:1 (AAA).
Focus indicators
- Default focus ring:
3px solid rgba(255,214,10,0.4)with 1px offset on white surfaces; the yellow ring is visible on every neutral surface. - On yellow surfaces: ring shifts to
3px solid rgba(0,0,0,0.4)(black ring on yellow band). - On dark surfaces: ring shifts to
3px solid rgba(255,214,10,0.4)(yellow ring on black band — high contrast).
Focus rings are never removed. The ring colour adapts to the surface.
ARIA patterns
- Pricing toggles use
role="radiogroup"rather than tabs. - Newsletter signup uses
aria-describedbyto associate input with helper text. - Modals use
role="dialog",aria-modal="true", focus trap,Escto close. - Stat tiles with count-up animation use
aria-live="polite"only on first reveal.
Keyboard nav order
Top bar → hero CTA → feature bands in DOM order → pricing → footer. Skip-to-content link at top of DOM, visible on focus. Tab order matches visual order through band-cycling.
Screen reader hints
- Yellow hero band carries no special semantics beyond visual styling.
- Decorative band-dividers carry
aria-hidden="true". - Stat tiles use
aria-label="N thousand subscribers"rather than relying on numeral parsing. - Icon-only buttons carry
aria-labeldescribing the action.
Reduced motion
Honored throughout — see §8.
10. Responsive Behavior
Breakpoints
| Tier | Width | Behavior |
|---|---|---|
| mobile | < 480px | single column, 16px gutter, 64px section padding, hero at 48–56px display |
| tablet | 480–768px | single column, 24px gutter, 80px section padding, hero at 64–72px |
| desktop | 768–1024px | 2-column feature grids, 32px gutter, 96px section padding |
| wide | 1024–1280px | 3-column feature grids, 32px gutter, 120px section padding |
| ultra | 1280px+ | container caps at 1280px, hero at full 88–112px |
Touch Targets
Minimum 44×44px on touch devices. The 14px / 28px button padding clears the threshold. Pill CTA on mobile expands to 16px / 32px padding for thumb-friendly tap area.
Collapsing strategy
- Top nav: hamburger menu < 768px; primary CTA stays visible at top right.
- Hero: mockup image moves below copy < 768px; copy claims full width.
- Feature grid: 3 → 2 → 1 columns at 1024 / 768 / 480.
- Pricing tiers: stack vertically < 768px with the popular tier highlighted via order shift to top.
- Footer: 4-column → 2-column → 1-column at 1024 / 768 / 480.
- Stat tiles: 4-across → 2x2 grid → 1-column at 1024 / 768 / 480.
Image behavior
Hero newsletter-mockups use aspect-ratio: 4/3 lock with object-fit: cover. Below 768px, mockup fills container width with maintained aspect ratio.
Container queries
Used inside the dashboard mockups — the tier component switches between condensed and expanded modes based on container width.
11. Content & Voice
Tone
beehiiv’s tone is monetisation-loud: direct, present-tense, unapologetic about money. It writes like a financial newspaper’s promotional column — short bulletins, dollar figures at the headline scale, and a willingness to use phrases like “10x your revenue” or “monetize from day one” that softer brands would avoid. Headlines lean on numerals and verbs of growth (“Scale your newsletter”, “Monetize without limits”); the secondary copy explains the mechanism plainly.
Microcopy patterns
- Button verbs: “Start free”, “Sign up free”, “Launch your newsletter”, “Talk to sales”, “Book a demo”, “Start earning”. The verb is always action-forward and the modifier is always free or money-related.
- Error messages: pattern is “[Action] couldn’t be completed. [Reason].” e.g. “Couldn’t send your newsletter — your account has unpaid charges. Update your billing to resume.”
- Success confirmations: short, declarative, often paired with a numeral. “Newsletter sent to 10,427 subscribers.” rather than “Your newsletter was sent successfully!”
Empty states
Empty states are direct and instructional, with a monetisation prompt where relevant. “No subscribers yet — share your signup link” with a copy-link button as primary action. “No revenue this month — set up your first sponsorship.” Empty-state copy frames the absence as opportunity, not failure.
CTA verb conventions
- Primary marketing CTA: “Start free” or “Sign up free” — the canonical phrase.
- Money-forward CTA: “Start earning”, “Monetize now”, “Launch & earn”.
- Demo / sales: “Book a demo” or “Talk to sales”.
- Newsletter signup: “Subscribe” — plain, with the numeral count nearby (“Join 50,000 readers”).
12. Dark Mode & Theming
beehiiv’s marketing surface uses dark mode as a band-level treatment, not as a default page mode. The dark band is the testimonial / footer zone; the rest of the page stays on white-and-yellow. The dark token map (see frontmatter colors-dark):
- bg:
#000000(pure black, no warmth) - bg-soft:
#0a0a0afor testimonial card surfaces - surface:
#1a1a1a, surface-strong:#2a2a2a - text:
#ffffff(no opacity tilt) - text-muted:
#ffffffb3, text-soft:#ffffff80 - brand:
#ffd60a— yellow holds at full saturation; contrast against#000000is 17.4:1 (AAA) - border:
#1f1f1f(the inset-ring black-on-black)
When implementing the dark band:
- Cards use
1px solid #1f1f1f(or inset ring) instead of the 2px outer border — outer 2px on black reads as overkill. - Yellow gains link-duty in the dark band (it is the only place yellow does links).
- Pill CTAs invert: white pill with black text on the dark band.
- No shadows are added; the dark mode preserves the flat-as-discipline doctrine.
The dark zone is opt-in only — beehiiv does not follow prefers-color-scheme: dark automatically. The dashboard / product side has a separate full dark theme controlled by user preference.
13. Lineage & Influences
beehiiv’s design lineage runs through three traditions: financial-broadsheet boldness, industrial graphic vocabulary, and 2010s zine-revival aesthetics. The yellow-and-black contrast pair is heritage — caution signs, taxi liveries, hardware-store branding — and the brand reaches for that vernacular legibility deliberately. The 2px solid black card border is a near-brutalist move borrowed from sticker-art and zine-revival design (the Mast Brothers chocolate-bar typography era), translated into landing-page form.
The display family (PP Neue Machina from Pangram Pangram) is the explicit citation of the industrial-geometric tradition that runs through Mark Simonson’s Proxima, Pangram’s full library, and Inter Display. The voice — monetisation-forward, direct, present-tense — is positioned as the loud counter to Substack’s literary register and Ghost’s open-source warmth. Where Substack invites you to write, beehiiv invites you to scale.
The Off-White / Virgil Abloh reference is structural: the quotation-mark-as-decoration, the bold display, the black-on-yellow industrial vocabulary. beehiiv translates that fashion-graphic idiom into newsletter-platform marketing, and the translation is unusually direct.
Named influences
- Wall Street Journal (wsj.com) — Tabloid + financial-news loud-headline lineage; the broadsheet front-page energy.
- Off-White (off---white.com) — Quotation-marks, bold display, black-on-yellow industrial graphic vocabulary.
- Substack (substack.com) — Direct rival; beehiiv is positioned as the louder, money-first alternative.
- Pangram Pangram (pangrampangram.com) — The PP Neue Machina display family — industrial geometric sans tuned for marketing punch.
- New York Post (nypost.com) — Tabloid front-page boldness translated into landing-page form.
14. Do’s and Don’ts
Do
- Keep the hero yellow saturated at exactly
#ffd60a; lighter yellows read as cosy, darker yellows read as caution-tape industrial — neither is beehiiv. - Always set black on yellow (and never white on yellow); the contrast ratio and the tabloid heritage demand it.
- Use a 2px solid black border on cards — the hairline-and-shadow language of Stripe / Linear is explicitly avoided here.
- Run the display family at 800 weight or heavier; 700 is the bottom of the ladder, not the default.
- Use JetBrains Mono with
tnumfor revenue stats and pricing; the mono numerals lock-step align across cards. - Cycle bands aggressively: yellow → white → black → white → yellow. The cycle is the brand’s pulse.
- Use the black pill CTA on yellow as the canonical action; the yellow pill on white is the secondary inversion.
- Honor
prefers-reduced-motion: reduce— collapse hover lifts and stat count-ups to static states. - Run sections at 120–160px vertical padding; the broadsheet breath is the rhythm.
- Use 12px card radius and full pill (9999px) for the CTA — the moderate-card / full-pill pair is the signature.
Don’t
- Don’t soften the display type weight below 700; beehiiv lives on the heavy side of the type ladder.
- Don’t introduce a third hue; the system is yellow + black + white and any drift breaks the tabloid identity.
- Don’t apply drop shadows to cards; the hyper-flat 2px border is the elevation strategy.
- Don’t replace the yellow with pastel-yellow or muted gold — the saturated
#ffd60ais non-negotiable. - Don’t set white on yellow text; the contrast fails and the heritage breaks. Black on yellow always.
- Don’t add gradients, glows, or atmospheric blur — the system is poster-flat.
- Don’t soften the band transitions with gradients; the abrupt swap from yellow to black is the energy.
- Don’t run hero copy below 56px on desktop; the bulletin-loud register requires headline scale.
- Don’t use Inter as the display family; Inter is the body. PP Neue Machina (or Inter Display fallback) carries the marketing voice.
- Don’t follow
prefers-color-scheme: darkautomatically on marketing — the dark band is a designed band, not a system mode.
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
bg-yellow: #ffd60a
bg-dark: #000000
text: #000000
text-on-yellow: #000000
text-on-dark: #ffffff
text-muted: #666666
brand: #ffd60a
brand-hover: #e6c000
border: #000000
border-soft: #e5e5e5Example Component Prompts
-
“Create a hero in the beehiiv style: full-bleed
#ffd60ayellow band, PP Neue Machina (or Inter Display fallback) at 88px / 800 weight headline in#000000with-0.04emtracking, supporting body at Inter 18px / 400 in#000000, primary black-pill CTA (#000000background,#fffffftext at Inter 600 / 16px,14px 28pxpadding, full pill 9999px radius).” -
“Design a feature card in the beehiiv style:
#ffffffbackground,2px solid #000000border, 12px radius, 32px padding, NO drop shadow, PP Neue Machina 700 / 28px H3 title, body at Inter 400 / 16px in#000000. Hover:translateY(-2px), border stays at 2px solid black.” -
“Render a revenue stat tile in the beehiiv style:
#ffd60ayellow background,2px solid #000000border, 12px radius, 24px padding, JetBrains Mono 800 / 96px numeral withtnumenabled in#000000, label below at JetBrains Mono 600 / 12px tracked+0.06emuppercase.” -
“Create a dark testimonial band in the beehiiv style: full-bleed
#000000background, testimonial card at#0a0a0awith1px solid #1f1f1fring (inset), 12px radius, 32px padding, quote at Inter 500 / 18px in#ffffff, attribution at JetBrains Mono 600 / 12px in#ffd60a.” -
“Design a newsletter-signup form in the beehiiv style: pill-shaped wrapper at 9999px radius,
2px solid #000000border, white fill, Inter 500 / 16px input with placeholder#999999, black pill submit button at right. Focus ring:0 0 0 3px rgba(255,214,10,0.4)yellow.” -
“Render a pricing tier card in the beehiiv style:
#ffffffbackground,2px solid #000000border, 12px radius, 32px padding, tier name at PP Neue Machina 700 / 22px, price at JetBrains Mono 800 / 64px withtnumand-0.025emtracking in#000000, feature list below at Inter 400 / 16px with#000000checkmark bullets, primary CTA black pill at the bottom.”
Iteration Guide
- Start with the yellow: confirm the saturated
#ffd60a(not pastel, not gold). If your yellow reads cosy, you’ve drifted to a different system. - Verify the type voice: hero headlines should hit 56–112px at 800 weight with negative tracking around
-0.03emto-0.045em. If the headline reads competent rather than declarative, tighten the track and bump the weight. - Audit the elevation strategy: cards must use
2px solid #000000border, never a drop shadow. If you see any soft shadow on a card, replace it with the 2px border. - Check the contrast pair: text on yellow must be black; text on white can be black or grey; text on black must be white. White on yellow fails contrast and breaks the heritage.
- Verify the band cycle: a complete page should cycle yellow → white → black → white → yellow. If your page is mostly white, you’re missing the brand’s pulse.
- Confirm the CTA shape: primary action should be the black pill at full 9999px radius. Rectangle buttons read as secondary, not primary.
- Audit the stat surfaces: every numeric stat (revenue, subscribers, growth) should use JetBrains Mono with
tnumat 64–96px scale. If your stats are in Inter, you’re missing the technical-monetisation cue. - Test the reduced-motion path: card hover lifts and stat count-ups should collapse to static states under
prefers-reduced-motion: reduce.
Drop beehiiv into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add beehiiv 2 · ship landing page
npx agentkit init --design beehiiv light editorial
Substack
Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff…
Docs
Install
Substack
webdesignhot
light editorial
Ghost
Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surfac…
Docs
Install
Ghost
webdesignhot
light editorial
Kit
A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and…
Docs
Install
Kit
webdesignhot