light · minimal · sans · monochrome · technical
DESIGN.md inspired by Black Forest Labs
Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout.
By webdesignhot · bfl.ai ↗
$ npx @webdesignhot/design-md add black-forest-labs
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Aesop Monochrome-warm apothecary — ivory canvas, charcoal type, Suisse Int'l set small, 0px corners. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Amplitude Light-canvas digital-analytics surface — IBM Plex Sans, grey #565656 body, black full-pill CTAs and a signature #1e61f0 blue. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Anytype Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Captions Near-white studio canvas, an Exposure display, and a violet brand keyed off a full crayon-box of CSS color vars. Caraway Wholesome non-toxic-cookware DTC — Suisse Works serif on warm off-white, deep teal-green pill CTAs, pastel colorway palette. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudflare Infrastructure-grade calm — white canvas, dark hero band, FT Kunst Grotesk, signature Cloudflare orange, full-pill CTAs. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Coda White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Craft Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. dbt Labs dbt orange Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Drizzle ORM Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glean White enterprise canvas, near-black indigo headlines, and one electric Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Graza Squeeze-bottle olive-oil DTC — quirky GT Alpina Typewriter on peachy-cream, olive type, chartreuse-lime CTAs at 32px. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. Harvey Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. HeyGen Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Inngest Durable workflows on a near-black canvas — Whyte display, muted gold CTAs, sharp 0px edges. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Intercom Cream canvas, near-black Saans display, and electric-cobalt JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lambda Near-black Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. Liquid Death Black canvas, condensed all-caps Acumin Pro, stark black-and-white — heavy-metal brutalism for canned water. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Loom White canvas, Charlie Display sans, and a confident Atlassian blue pill — async video that feels like a calm, friendly workspace. LottieFiles White-canvas animation studio — DM Sans display at 96px, Inter body, near-black text, one signature teal #019d91. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mejuri Monochrome luxury — white canvas, near-black ink, Syndicat Grotesk small caps and a Simon Mono accent. The jewelry photography does all the color work. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Netlify White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Our Place Warm-heritage cookware DTC — Cheltenham serif at light 300 on a cream canvas, terracotta SHOP NOW CTAs, Plaid body. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Penpot Open-source design-and-code platform — dark hero, Work Sans display, mint-green action surface on a white canvas. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. Prisma White-paper canvas, navy ink, a single confident teal — the type-safe data layer dressed as documentation. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Relume Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder. Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Scale AI White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Sierra Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SKIMS Nude-neutral minimal luxury — cream canvas, dark photographic hero, warm near-black #2d2a26, sharp 0px. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spline Pure-black 3D-design canvas with electric-blue CTAs and a playful multi-color accent set — the browser becomes the viewport. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Stability AI A near-black studio floor where Archivo headlines run light and a single lavender pill carries the only colour. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Synthesia A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Temporal Near-black engineering canvas, Aeonik at hairline-light 300, signature indigo CTA — durable-execution gravity for distributed-systems people. Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. Tinybird Near-black developer canvas lit by one bright mint-green — managed ClickHouse with sharp, zero-radius CTAs. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Todoist Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Trigger.dev Background jobs in the dark — Satoshi on near-black, one electric lime for action. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. Upstash Serverless data, daylight calm — a pale-grey canvas, deep green-black type, and one electric Upstash green. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Vapi Near-black developer canvas lit by a signature lime and a playful multi-color set — Avantt display at 80px over Season Sans body, cream text, r12 CTAs. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Vuori Coastal-California performance calm — Aktiv Grotesk on pure white, warm near-black `#333333` ink, restrained small type (28px h1), photography-led, sharp 0px corners. Premium-athletic that never raises its voice. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. Windsurf Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Wispr Flow Pale lemon-cream paper, EB Garamond at 120px, and a lavender download pill — voice dictation that dresses like a literary journal. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. xAI White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
theme: light
- bg
#ffffff - bg-ink
#07130e - bg-pure-black
#000000 - surface
#ffffff - surface-ink
#07130e - surface-muted
#f5f5f4 - text AAA · 18.9
#07130e - text-on-ink
#ffffff - text-secondary
#4a544f - text-tertiary
#7d847f - text-faint — · 2.3
#a8ada9 - text-on-ink-soft
#b9b5d0 - brand AAA · 18.9
#07130e - accent
#b9b5d0 - accent-soft
rgba(185, 181, 208, 0.16) - on-brand
#ffffff - link
#07130e - link-hover
#000000 - focus
#07130e - cta-bg
#07130e - cta-text
#ffffff - cta-bg-secondary
#ffffff - cta-text-secondary
#07130e - cta-bg-on-ink
#ffffff - cta-text-on-ink
#07130e - border AAA · 21.0
#000000 - border-soft
rgba(7, 19, 14, 0.12) - border-on-ink
rgba(255, 255, 255, 0.16) - shadow-ambient
rgba(7, 19, 14, 0.04) - shadow-card
rgba(7, 19, 14, 0.06) - shadow-deep
rgba(7, 19, 14, 0.12) - scrim
rgba(7, 19, 14, 0.60) - success
#1f6f4a - success-soft
rgba(31, 111, 74, 0.10) - warning
#9a6a1f - warning-soft
rgba(154, 106, 31, 0.10) - danger
#9a2b2b - danger-soft
rgba(154, 43, 43, 0.10)
Ship faster than ever.
display-hero "Instrument Sans" 90px w500 -0.03em
Ship faster than ever.
display-xl "Instrument Sans" 72px w500 -0.028em
Ship faster than ever.
display-lg "Instrument Sans" 56px w500 -0.024em
Ship faster than ever.
h1 "Instrument Sans" 40px w500 -0.02em
Built for teams that ship.
h2 "Instrument Sans" 32px w500 -0.016em
A complete kit
h3 "Instrument Sans" 24px w500 -0.01em
The quick brown fox jumps over the lazy dog.
h4 "Instrument Sans" 20px w500 -0.005em
The quick brown fox jumps over the lazy dog.
h5 "Instrument Sans" 18px w500 0
The quick brown fox jumps over the lazy dog.
body-lg "Instrument Sans" 18px w400 0
The quick brown fox jumps over the lazy dog.
body-md "Instrument Sans" 16px w500 0
The quick brown fox jumps over the lazy dog.
body-regular "Instrument Sans" 16px w400 0
The quick brown fox jumps over the lazy dog.
button "Instrument Sans" 16px w500 0
The quick brown fox jumps over the lazy dog.
nav-link "Instrument Sans" 15px w500 0
The quick brown fox jumps over the lazy dog.
body-sm "Instrument Sans" 14px w400 0
The quick brown fox jumps over the lazy dog.
button-sm "Instrument Sans" 14px w500 0
npx @webdesignhot/design-md add stripe
code-inline ui-monospace 14px w500 0
npx @webdesignhot/design-md add stripe
code-block ui-monospace 14px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow "Instrument Sans" 13px w500 0.06em
OUR DESIGN SYSTEM
label "Instrument Sans" 13px w500 0
OUR DESIGN SYSTEM
caption "Instrument Sans" 12px w500 0.02em
- step-0 0px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 24px
- step-6 32px
- step-7 48px
- step-8 64px
- step-9 96px
- step-10 128px
- micro
0px - sm
0px - md
0px - lg
0px - xl
0px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 7/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → —
- muted → text-secondary
- border → border
- ring → text
Black Forest Labs sits squarely in the **frontier-AI-lab monochrome** lineage — the visual register pioneered by research labs that signal seriousness through reduction. The DNA traces three sources: the **single-typeface, contrast-only identity** that Vercel and Linear made the developer-tool default (one face carrying the brand, accent colour withheld from action fills), the **research-paper-cover austerity** of academic AI labs (OpenAI's early monochrome, Anthropic's restraint, DeepMind's technical sobriety) where the page reads like a publication rather than a product, and the **stark black-on-white / white-on-black inversion** of Swiss-International typographic tradition filtered through a modern grotesque. The single deliberate departure is the dusty lavender-grey `#b9b5d0` that washes the FLUX wordmark — the one chromatic concession in an otherwise zero-chroma system, and even that is desaturated almost to grey. The brand's thesis: a frontier image-generation lab does not need to *show* colour to prove it can generate it; the restraint is the flex.
- The single typeface carrying display and body — a modern grotesque with subtle warmth, held at weight 500 across the system
- Frontier dev-tool monochrome — single-family discipline, accent withheld from CTA fills, contrast-pill primary
- Contrast-only identity — inverted text-colour CTAs against canvas, near-zero chroma neutral system
- Research-lab restraint — sober, publication-grade marketing surface for a frontier AI lab
- Early monochrome research-lab aesthetic — black-on-white austerity, technical register over product gloss
- Stark black/white inversion, grid discipline, sans-serif-as-content, decoration rejected
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: Black Forest Labs
tagline: Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout.
updated_at: 2026-05-29T21:43:46.909Z
published_at: 2026-05-29T21:43:46.909Z
author: webdesignhot
source_url: https://bfl.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, saas]
tags: [light, minimal, sans, monochrome, technical]
preview_swatch: ['#ffffff', '#07130e', '#b9b5d0']
related: [vercel, linear, stripe]
description: 'Black Forest Labs — the research lab behind the FLUX image-generation models — wears the frontier-AI uniform: stark monochrome, near-zero chroma, and a single typeface carrying the entire identity. The canvas is pure white `#ffffff`, body and headline type is a near-black `#07130e` that carries the faintest green tint (a green-shifted ink rather than neutral black), and every glyph on the page is set in **Instrument Sans** — display and body alike — held at weight 500. The hero inverts: a dark band with the H1 rendered in white at 90px, a dramatic contrast moment against the otherwise white page. There is no colored CTA, no brand-colour button fill, no gradient wash — the brand identity is the *type itself* (big Instrument Sans at a confident medium weight) and the stark black-on-white / white-on-black contrast, full stop. Corners are sharp (0px radius across the production site), reinforcing the technical, restrained register of a frontier research lab that signals seriousness through reduction rather than decoration. Where consumer AI products lean into glow, gradient, and saturated accent, Black Forest Labs withholds all of it — the page reads like a research paper''s cover, not a product launch.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
muted: text-secondary
border: border
ring: text
themes:
default: light
available: [light]
switch-via: 'No theme switch shipped — light-only canvas with inverted dark hero/footer bands rendered inline, not as a toggleable theme'
colors:
light:
bg: '#ffffff' # page canvas — pure white, the dominant ground
bg-ink: '#07130e' # inverted dark band — hero, footer, feature spotlights; near-black green-tint
bg-pure-black: '#000000' # true black — borders, hairline rules, rare full-contrast edges
surface: '#ffffff' # card / panel surface — same as canvas; separation via border, not fill
surface-ink: '#07130e' # inverted card surface on dark bands
surface-muted: '#f5f5f4' # faintest off-white inset — quiet section bands, code fills
text: '#07130e' # primary text + headlines — near-black with a faint green cast
text-on-ink: '#ffffff' # text on the dark hero/footer band — pure white
text-secondary: '#4a544f' # supporting copy, captions — muted green-grey
text-tertiary: '#7d847f' # meta, timestamps, faint labels
text-faint: '#a8ada9' # placeholder, disabled
text-on-ink-soft: '#b9b5d0' # secondary text on dark band — the dusty lavender-grey accent
brand: '#07130e' # brand mark colour — near-black green-tint; the identity is contrast, not hue
accent: '#b9b5d0' # dusty lavender-grey — the single restrained accent (FLUX wordmark wash)
accent-soft: 'rgba(185, 181, 208, 0.16)' # soft lavender wash, rare
on-brand: '#ffffff' # white text/icon on near-black brand fill
link: '#07130e' # inline link — near-black, distinguished by underline not colour
link-hover: '#000000' # link hover deepens to true black; underline persists
focus: '#07130e' # keyboard focus outline — near-black ring
cta-bg: '#07130e' # primary CTA fill — near-black (inverted), never a colour
cta-text: '#ffffff' # CTA text on near-black
cta-bg-secondary: '#ffffff' # secondary CTA fill — white
cta-text-secondary: '#07130e' # secondary CTA text — near-black
cta-bg-on-ink: '#ffffff' # CTA on dark band inverts to white fill
cta-text-on-ink: '#07130e' # near-black text on white CTA over dark band
border: '#000000' # default border — true black hairline (probe-confirmed)
border-soft: 'rgba(7, 19, 14, 0.12)' # quieter separation, near-black at 12%
border-on-ink: 'rgba(255, 255, 255, 0.16)' # hairline on dark bands
shadow-ambient: 'rgba(7, 19, 14, 0.04)'
shadow-card: 'rgba(7, 19, 14, 0.06)'
shadow-deep: 'rgba(7, 19, 14, 0.12)'
scrim: 'rgba(7, 19, 14, 0.60)'
success: '#1f6f4a' # muted forest green — status/confirmation, kept low-chroma
success-soft: 'rgba(31, 111, 74, 0.10)'
warning: '#9a6a1f' # muted amber — advisory, rare
warning-soft: 'rgba(154, 106, 31, 0.10)'
danger: '#9a2b2b' # muted brick — errors, destructive actions
danger-soft: 'rgba(154, 43, 43, 0.10)'
typography:
display:
family: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
weights: [500, 600, 700]
opentype-features: ['kern', 'liga']
body:
family: '"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern', 'liga']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
weights: [400, 500]
opentype-features: ['liga', 'calt', 'tnum']
scale:
display-hero: { size: 90, weight: 500, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-xl: { size: 72, weight: 500, lineHeight: 1.02, tracking: '-0.028em', family: display }
display-lg: { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.024em', family: display }
h1: { size: 40, weight: 500, lineHeight: 1.10, tracking: '-0.02em', family: display }
h2: { size: 32, weight: 500, lineHeight: 1.15, tracking: '-0.016em', family: display }
h3: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.01em', family: display }
h4: { size: 20, weight: 500, lineHeight: 1.30, tracking: '-0.005em', family: display }
h5: { size: 18, weight: 500, lineHeight: 1.40, tracking: '0', family: display }
eyebrow: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0.06em', family: body, transform: uppercase }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-md: { size: 16, weight: 500, lineHeight: 1.55, tracking: '0', family: body }
body-regular: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.50, tracking: '0', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.40, tracking: '0.02em', family: body }
label: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0', family: body }
button: { size: 16, weight: 500, lineHeight: 1.20, tracking: '0', family: body }
button-sm: { size: 14, weight: 500, lineHeight: 1.20, tracking: '0', family: body }
nav-link: { size: 15, weight: 500, lineHeight: 1.20, tracking: '0', family: body }
code-inline: { size: 14, weight: 500, lineHeight: 1.40, tracking: '0', family: mono }
code-block: { size: 14, weight: 400, lineHeight: 1.60, tracking: '0', family: mono }
radius:
micro: 0
sm: 0
md: 0
lg: 0
xl: 0
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
layout:
page-width: 1280
prose-width: 720
header-height: 64
components:
button-primary:
bg: '#07130e'
color: '#ffffff'
radius: 0
padding: '12px 20px'
height: 48
font: 'Instrument Sans 16px / 500'
hover-bg: '#000000'
use: 'Primary action — near-black fill, white text, sharp corners. Get started, Try FLUX, Contact. Inverted contrast, never a colour.'
button-secondary:
bg: '#ffffff'
color: '#07130e'
border: '1px solid #000000'
radius: 0
padding: '12px 20px'
height: 48
font: 'Instrument Sans 16px / 500'
hover-bg: '#07130e'
hover-color: '#ffffff'
use: 'Outlined twin — white fill, true-black border. Hover inverts to near-black fill. Read the paper, Documentation.'
button-on-ink:
bg: '#ffffff'
color: '#07130e'
radius: 0
padding: '12px 20px'
height: 48
font: 'Instrument Sans 16px / 500'
use: 'Primary CTA placed on the dark hero/footer band — inverts to white fill with near-black text.'
button-ghost:
bg: 'transparent'
color: '#07130e'
radius: 0
padding: '12px 16px'
height: 48
font: 'Instrument Sans 16px / 500'
hover-underline: true
use: 'Quiet third action — nav links, footer secondaries, in-card actions. Underline on hover.'
card:
bg: '#ffffff'
border: '1px solid #000000'
radius: 0
padding: '24px'
shadow: 'none'
use: 'Default panel — white fill, true-black hairline border, sharp corners, no shadow. Border alone carries separation.'
card-ink:
bg: '#07130e'
color: '#ffffff'
border: 'none'
radius: 0
padding: '32px'
use: 'Inverted spotlight card on dark bands — near-black fill, white text. Model cards, feature highlights.'
input:
bg: '#ffffff'
color: '#07130e'
radius: 0
height: 48
padding: '12px'
border: '1px solid #000000'
font: 'Instrument Sans 16px / 400'
placeholder-color: '#a8ada9'
focus-border: '#07130e'
focus-ring: '0 0 0 2px rgba(7, 19, 14, 0.25)'
use: 'Form fields, prompt box — true-black border, sharp corners, near-black focus ring.'
badge:
bg: '#07130e'
color: '#ffffff'
radius: 0
padding: '4px 10px'
font: 'Instrument Sans 12px / 500 / 0.02em'
use: 'Status / model tag — NEW, FLUX.1, BETA. Near-black fill, white caps, sharp corners.'
badge-outline:
bg: 'transparent'
color: '#07130e'
border: '1px solid #000000'
radius: 0
padding: '4px 10px'
font: 'Instrument Sans 12px / 500'
use: 'Outlined tag — version chips, category labels.'
nav-top:
bg: '#ffffff'
height: 64
border-bottom: '1px solid rgba(7, 19, 14, 0.12)'
use: 'Sticky top nav — white fill, faint near-black bottom hairline, wordmark left, links + CTA right.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
link-hover: 'underline appears 150ms; colour holds near-black'
button-hover: 'bg invert 240ms standard, no transform'
card-hover: 'border deepens / faint shadow 240ms — no lift'
reduced-motion: 'respects prefers-reduced-motion: reduce — transforms suppress, opacity-only fades'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(7, 19, 14, 0.04) 0 1px 2px'
card: 'rgba(7, 19, 14, 0.06) 0 2px 8px'
deep: 'rgba(7, 19, 14, 0.12) 0 12px 32px -8px'
scrim: 'rgba(7, 19, 14, 0.60)'
accessibility:
contrast-text-on-bg: 16.9 # #07130e on #ffffff — AAA at all sizes
contrast-text-on-ink: 16.9 # #ffffff on #07130e — AAA at all sizes
contrast-text-secondary-on-bg: 8.1 # #4a544f on #ffffff — AAA at body sizes
contrast-text-tertiary-on-bg: 4.6 # #7d847f on #ffffff — AA at body sizes
contrast-accent-on-ink: 6.9 # #b9b5d0 on #07130e — AA / AAA-large for secondary copy on dark
focus-ring: '2px near-black ring rgba(7, 19, 14, 0.25) + outline-offset; high contrast on white'
reduced-motion-honored: true
touch-target-min: 44
prose-line-length: 'capped at 720px / ~70 characters'
dark-mode: none # Light-only canvas; the dark hero/footer bands are inline inversions, not a theme
lineage:
summary: 'Black Forest Labs sits squarely in the **frontier-AI-lab monochrome** lineage — the visual register pioneered by research labs that signal seriousness through reduction. The DNA traces three sources: the **single-typeface, contrast-only identity** that Vercel and Linear made the developer-tool default (one face carrying the brand, accent colour withheld from action fills), the **research-paper-cover austerity** of academic AI labs (OpenAI''s early monochrome, Anthropic''s restraint, DeepMind''s technical sobriety) where the page reads like a publication rather than a product, and the **stark black-on-white / white-on-black inversion** of Swiss-International typographic tradition filtered through a modern grotesque. The single deliberate departure is the dusty lavender-grey `#b9b5d0` that washes the FLUX wordmark — the one chromatic concession in an otherwise zero-chroma system, and even that is desaturated almost to grey. The brand''s thesis: a frontier image-generation lab does not need to *show* colour to prove it can generate it; the restraint is the flex.'
influences:
- name: 'Instrument Sans (Google Fonts, open-source)'
role: 'The single typeface carrying display and body — a modern grotesque with subtle warmth, held at weight 500 across the system'
url: 'https://fonts.google.com/specimen/Instrument+Sans'
- name: 'Vercel'
role: 'Frontier dev-tool monochrome — single-family discipline, accent withheld from CTA fills, contrast-pill primary'
url: 'https://vercel.com'
- name: 'Linear'
role: 'Contrast-only identity — inverted text-colour CTAs against canvas, near-zero chroma neutral system'
url: 'https://linear.app'
- name: 'Anthropic'
role: 'Research-lab restraint — sober, publication-grade marketing surface for a frontier AI lab'
url: 'https://www.anthropic.com'
- name: 'OpenAI'
role: 'Early monochrome research-lab aesthetic — black-on-white austerity, technical register over product gloss'
url: 'https://openai.com'
- name: 'Swiss International Typographic Style'
role: 'Stark black/white inversion, grid discipline, sans-serif-as-content, decoration rejected'
url: 'https://en.wikipedia.org/wiki/International_Typographic_Style'
---
## 1. Visual Theme & Atmosphere
Black Forest Labs — the research group behind the FLUX family of image-generation models — presents itself with the visual austerity of a frontier AI lab rather than a consumer product. The page is overwhelmingly white `#ffffff`, the type is a near-black `#07130e` that carries the faintest green cast (a green-shifted ink, not a neutral black), and *every glyph on the site* is set in a single typeface: **Instrument Sans**, display and body alike, held at a confident medium weight of 500. There is no second face, no serif, no system fallback doing real work. The identity is carried by the type and by the stark black-on-white contrast — nothing else.
The signature move is the **inverted hero band**. Against the otherwise white page, the hero is a dark surface (`#07130e` near-black) with the H1 rendered in pure white at a dramatic 90px. This single inversion is the page's most charged moment: a black field with a giant white headline, the kind of contrast that reads as a statement of intent rather than a marketing flourish. The same inversion recurs in the footer and in occasional feature spotlights — dark bands punched into a white page, each one carrying white type. The page's rhythm is therefore *brightness-based*: white → dark → white, never colour-based.
What's most distinctive is the **near-total absence of colour**. There is no colored CTA — the primary button is near-black `#07130e` on white (or, on a dark band, inverted to white on near-black). There is no gradient wash, no glow, no saturated accent doing the consumer-AI thing of signalling "magic." The one chromatic concession is a dusty lavender-grey `#b9b5d0` that washes the FLUX wordmark and surfaces faintly as secondary text on dark bands — and even that is desaturated almost to neutral. For a lab whose entire product is *generating colour and image*, the marketing restraint is the flex: it doesn't need to show colour to prove it can make it.
The geometry reinforces the register. Corners are **sharp — 0px radius across the production site**. Buttons, cards, inputs, badges: all hard-edged rectangles. In a SaaS landscape where 8–12px rounded corners are the default friendliness signal, Black Forest Labs' square corners read as technical, exact, unsentimental — the geometry of a spec sheet or a research-paper figure rather than a marketing page. Combined with true-black `#000000` hairline borders and the absence of shadow, the surfaces feel *drawn* rather than *lifted*.
The atmospheric vocabulary that captures the feeling: *stark, monochrome, frontier-lab, research-paper-cover, near-zero-chroma, green-tint-ink, inverted-hero, white-on-black-on-white, single-face, Instrument-medium, sharp-cornered, hairline-ruled, shadowless, technical, restrained, austere, publication-grade.* Every surface lands like it was designed by a research lab that decided its website should look like the cover of a paper it would actually publish — confident through reduction, serious through subtraction.
**Key Characteristics**
- Pure white `#ffffff` canvas — the dominant ground; never cream, never warm, never tinted
- Near-black `#07130e` body and headline type — a green-shifted ink, not a neutral black
- Inverted dark hero band — `#07130e` field with the H1 in pure white at 90px, a dramatic contrast moment
- A single typeface — **Instrument Sans** for display *and* body, held at weight 500 throughout
- No colored CTA, no gradient, no glow — the primary action is near-black-on-white (or inverted on dark)
- Sharp 0px corners everywhere — buttons, cards, inputs, badges; the geometry of a spec sheet
- True-black `#000000` hairline borders carry separation; shadows are near-absent
- One restrained accent — dusty lavender-grey `#b9b5d0` on the FLUX wordmark; almost desaturated to grey
- Brightness-based section rhythm — white → dark → white, never colour-based alternation
- Frontier-AI-lab register — publication-grade austerity, technical and unsentimental
## 2. Color Palette & Roles
### Primary
- **Canvas** (`#ffffff`): the page background — pure white, the dominant ground. The single light tone; any cream or warm tint would break the frontier-lab austerity and shift the brand toward Notion/Mintlify territory.
- **Body Text** (`#07130e`): primary text and headlines — near-black with a faint green cast. Probe-confirmed as `rgb(7, 19, 14)`. The green tint is subtle but intentional: a green-shifted ink rather than a neutral `#000`, lending warmth-without-warmth to the otherwise cold page.
- **Ink Band** (`#07130e`): the inverted dark surface — hero, footer, feature spotlights. The same near-black value as the body text, used as a *field* that carries white type.
- **Pure Black** (`#000000`): true black — reserved for borders, hairline rules, and rare full-contrast edges. Distinct from the green-tinted `#07130e` ink, kept neutral for crisp geometric lines.
### Brand
- **Brand** (`#07130e`): the brand mark colour — near-black green-tint. The identity is built on *contrast*, not hue; the brand "colour" is functionally the near-black ink against white (and white against the near-black band). There is no saturated brand hue.
- **On-Brand** (`#ffffff`): white text or icon on a near-black brand fill — the inverted half of the contrast pair.
### Accent
- **Accent / Lavender-Grey** (`#b9b5d0`): the single chromatic concession — a dusty lavender-grey washing the FLUX wordmark and surfacing faintly as secondary text on dark bands. Desaturated almost to neutral; it reads as "barely violet" rather than as a colour with intent. Never fills a button, never grounds a section.
- **Accent Soft** (`rgba(185, 181, 208, 0.16)`): a soft lavender wash for the rare quiet emphasis — a highlight strip, a hover tint on a dark surface.
### Interactive
- **Link** (`#07130e`): inline links — near-black, *distinguished by underline rather than colour*. The page withholds blue entirely; links read as text with an underline affordance.
- **Link Hover** (`#000000`): hover deepens to true black; the underline persists. The colour shift is near-imperceptible — the underline is the real signal.
- **Focus** (`#07130e` ring): keyboard focus is a near-black outline ring — high contrast on white, no colour cue needed.
- **Disabled** (`#a8ada9` text): disabled controls drop to the faint neutral, no colour cue.
### Neutral Scale
A compact green-grey ramp does all hierarchy work without introducing a hue:
- **Pure White** (`#ffffff`) — canvas, card surface
- **Surface Muted** (`#f5f5f4`) — faintest off-white inset, quiet section bands, code fills
- **Text Faint** (`#a8ada9`) — placeholder, disabled
- **Text Tertiary** (`#7d847f`) — meta, timestamps, faint labels
- **Text Secondary** (`#4a544f`) — supporting copy, captions; a muted green-grey
- **Text** (`#07130e`) — primary text, headlines; near-black green-tint
- **Pure Black** (`#000000`) — borders, hairline rules
### Surface & Borders
- **Canvas / Surface** (`#ffffff`) — page and card share the same white; separation comes from the border, not a fill change
- **Surface Ink** (`#07130e`) — inverted card / band surface
- **Surface Muted** (`#f5f5f4`) — quiet inset band, code-block fill
- **Border Default** (`#000000`) — true-black hairline (probe-confirmed); the dominant separation device
- **Border Soft** (`rgba(7, 19, 14, 0.12)`) — quieter separation, near-black at 12%; used for the nav bottom rule
- **Border On-Ink** (`rgba(255, 255, 255, 0.16)`) — hairline on dark bands
### Shadow Colors
Shadows are near-absent. Where a faint lift is used at all, it's tinted with the green-black ink rather than neutral black:
- `rgba(7, 19, 14, 0.04) 0 1px 2px` — ambient (rare)
- `rgba(7, 19, 14, 0.06) 0 2px 8px` — card (rare; border usually does the work)
- `rgba(7, 19, 14, 0.12) 0 12px 32px -8px` — deep, reserved for overlay UI
- `rgba(7, 19, 14, 0.60)` — modal scrim
### Semantic
Semantic colours are kept low-chroma to preserve the monochrome register — muted, desaturated, never bright:
- **Success** (`#1f6f4a` on `rgba(31, 111, 74, 0.10)`): a muted forest green — status, confirmation. Tonally on-brand with the green-tint ink.
- **Warning** (`#9a6a1f` on `rgba(154, 106, 31, 0.10)`): a muted amber — advisory, rate limits. Rare.
- **Danger** (`#9a2b2b` on `rgba(154, 43, 43, 0.10)`): a muted brick red — errors, destructive actions. Desaturated to avoid a bright alarm against the austere page.
## 3. Typography Rules
### Font Family
**Primary (display + body)**: `"Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. **Instrument Sans** is an open-source modern grotesque from Google Fonts — a clean, slightly warm sans with open apertures and a low-contrast monoline construction. Black Forest Labs uses it for *everything*: the 90px hero H1, the body copy, the nav links, the captions. The single-family discipline is the entire typographic identity — there is no display/body split, no serif, no system fallback carrying real weight.
**The weight-500 signature**: the probe confirms the page holds **weight 500** at both the H1 (90px / 500) and the body (16px / 500). This is the brand's most distinctive typographic decision. Most systems set body at 400 and push headlines to 600–800; Black Forest Labs flattens the system to a single confident medium weight. The result is a page that reads as *even-toned and deliberate* — no shouty bold, no thin elegance, just a steady 500 everywhere. (Display can climb to 600–700 for special emphasis, and body can drop to 400 for long-form prose, but the default register is 500.)
**Mono companion**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace`. A system monospace stack used only for code, API examples, model identifiers, and CLI references. Black Forest Labs does not ship a proprietary mono — the system stack is sufficient for the rare code context.
**OpenType features**: Instrument Sans renders with `kern` and `liga` on. The system is restrained — no stylistic alternates, no decorative ligatures. The type does its work through size, weight-500 consistency, and tight negative tracking on display sizes.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | Instrument Sans | 90px | 500 | 1.0 | -0.03em | Hero H1 — probe-confirmed; white on dark band |
| display-xl | Instrument Sans | 72px | 500 | 1.02 | -0.028em | Major section opener |
| display-lg | Instrument Sans | 56px | 500 | 1.05 | -0.024em | Sub-section opener |
| h1 | Instrument Sans | 40px | 500 | 1.10 | -0.02em | Page title |
| h2 | Instrument Sans | 32px | 500 | 1.15 | -0.016em | Section H2 |
| h3 | Instrument Sans | 24px | 500 | 1.25 | -0.01em | Card / article H3 |
| h4 | Instrument Sans | 20px | 500 | 1.30 | -0.005em | Sub-card heading |
| h5 | Instrument Sans | 18px | 500 | 1.40 | 0 | Inline emphasis heading |
| eyebrow | Instrument Sans | 13px | 500 | 1.40 | 0.06em | Section pre-label, uppercase |
| body-lg | Instrument Sans | 18px | 400 | 1.55 | 0 | Hero deck, lede paragraph |
| body-md | Instrument Sans | 16px | 500 | 1.55 | 0 | Default body — probe-confirmed 16px / 500 |
| body-regular | Instrument Sans | 16px | 400 | 1.55 | 0 | Long-form prose body (lighter variant) |
| body-sm | Instrument Sans | 14px | 400 | 1.50 | 0 | Card body, dense copy |
| label | Instrument Sans | 13px | 500 | 1.40 | 0 | Form field label |
| caption | Instrument Sans | 12px | 500 | 1.40 | 0.02em | Image caption, meta |
| nav-link | Instrument Sans | 15px | 500 | 1.20 | 0 | Top-nav link |
| button | Instrument Sans | 16px | 500 | 1.20 | 0 | Default button copy |
| button-sm | Instrument Sans | 14px | 500 | 1.20 | 0 | Compact button |
| code-inline | Mono | 14px | 500 | 1.40 | 0 | Inline `code` references |
| code-block | Mono | 14px | 400 | 1.60 | 0 | Code block content |
### Principles
- **Single-family discipline.** Instrument Sans for display, body, captions, labels, nav, buttons. The mono stack appears only in code. There is no second face anywhere in the system.
- **Weight 500 is the system default.** The probe confirms 500 at both H1 (90px) and body (16px). This even medium weight is the brand's typographic signature — no thin/bold contrast, just a steady deliberate tone.
- **Hero scales enormous.** The H1 lands at 90px — among the largest in the catalog — and lives on the inverted dark band in white. The size *is* the drama; it doesn't need a heavier weight to land.
- **Negative tracking compresses with size.** `-0.03em` at 90px, tightening through the display range, easing to near-zero at body sizes.
- **Body holds at 16px.** Probe-confirmed default body; long-form prose drops to weight 400 for reading comfort, but UI body stays at 500.
- **Uppercase eyebrows with wide tracking.** Section pre-labels use 13px / 500 / 0.06em uppercase — the one place tracking opens up, providing a quiet structural signal.
- **No italic in display.** Instrument Sans is set roman across all hierarchy; italics carry quoted titles in body only.
- **Mono is system-only and rare.** Unlike Vercel's proprietary Geist Mono, Black Forest Labs uses the system mono stack for the occasional code context — the type identity is the sans, not the mono.
## 4. Component Stylings
### Buttons
**Primary** — `#07130e` near-black fill, white text at 16px / 500, **0px radius (sharp corners)**, 12×20px padding, ~48px height. Hover deepens to true `#000000`. **No transform, no scale** — the inversion-contrast carries the affordance. Use case: *Get started*, *Try FLUX*, *Contact us* — the dominant CTA. Never a colour; the action is the near-black-on-white contrast itself.
**Secondary (Outlined)** — `#ffffff` fill, near-black text at 16px / 500, 1px true-black `#000000` border, 0px radius, 12×20px padding. Hover *inverts* to a near-black `#07130e` fill with white text. Use case: *Read the paper*, *Documentation*, *Learn more* — paired adjacently with the primary.
**On-Ink (Primary on dark band)** — When a CTA sits on the dark hero or footer band, it inverts: `#ffffff` white fill, near-black `#07130e` text, 0px radius. The same contrast logic, flipped for the dark ground.
**Ghost (Quiet)** — Transparent fill, near-black text at 16px / 500, 0px radius, 12×16px padding. Hover reveals an underline. Use case: nav links, footer secondaries, in-card tertiary actions.
### Cards
**Default Card** — `#ffffff` white fill, 1px true-black `#000000` hairline border, **0px radius (sharp corners)**, 24px padding, **no shadow**. The border alone carries separation — the card reads as *drawn* on the page rather than *lifted* above it. Used across feature grids, model directories, research-paper listings.
**Ink Card** — `#07130e` near-black fill, white text, no border, 0px radius, 32px padding. The inverted spotlight card on dark bands — used for model cards (FLUX.1, FLUX.1.1), feature highlights, and any element that needs to read as a charged statement.
### Inputs / Forms
**Text Input / Prompt Box** — `#ffffff` fill, near-black text at 16px / 400, 1px true-black `#000000` border, **0px radius**, ~48px height, 12px padding. Placeholder at `#a8ada9` faint. On focus: border holds near-black and a 2px near-black ring appears (`rgba(7, 19, 14, 0.25) 0 0 0 2px`). No brand-colour focus — the focus signal is the high-contrast near-black ring on white.
**Select** — Same shape with a chevron at right at tertiary-text colour. Sharp corners throughout.
### Badges, Tags, Pills
**Status Badge (Filled)** — `#07130e` near-black fill, white caps at 12px / 500 / 0.02em, 0px radius, 4×10px padding. Use case: `NEW`, `FLUX.1`, `BETA`. Sharp-cornered rectangle, not a pill.
**Tag Chip (Outlined)** — Transparent fill, near-black text at 12px / 500, 1px true-black border, 0px radius, 4×10px padding. Use case: version chips, category labels, model variants.
### Navigation
**Top Nav** — `#ffffff` white fill, ~64px height, 1px bottom hairline at `rgba(7, 19, 14, 0.12)` (faint near-black). Wordmark left in Instrument Sans (with the lavender-grey `#b9b5d0` wash on the FLUX mark). Center/right: nav links (Models, Research, API, Company) at 15px / 500 ghost style. Far right: a single near-black primary CTA (*Get started* / *Try FLUX*). No mega-menu — the nav is flat and minimal.
**Footer** — `#07130e` near-black inverted band, white type, generous vertical padding. Multi-column link grid in 14px / 400 with the lavender-grey accent on the wordmark. The footer mirrors the hero's inversion — the page opens and closes on dark bands.
## 5. Layout Principles
### Spacing System
- Base unit: **4px**
- Scale: `0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128`
- Section padding (vertical): 96–128px for major bands; 48–64px between content sections; 24–32px between blocks
- Card internal padding: 24px on default cards; 32px on ink spotlight cards
- Inter-element gutters: 24px in 2-up grids; 16px in dense 3-up
### Grid & Container
- Page max width: **1280px** for marketing/editorial sections
- Reading column caps at **720px** even inside the 1280px container — line length calibrated for ~70 characters
- Inverted dark bands (hero, footer, spotlights) run full-bleed edge-to-edge with content centered inside the 1280px container
- Hero treatment: full-bleed `#07130e` dark band, 90px white H1 (often left-aligned or centered), generous vertical space above and below
### Whitespace Philosophy
The page leans editorial — generous whitespace, large type, room to breathe. The austerity is *spatial* as much as chromatic: the absence of colour and shadow is matched by an absence of clutter. Sections are spaced widely (96px+ vertical), the hero gives its 90px headline ample air, and dense data layouts are avoided in favour of clear, paper-like composition. The whitespace does what colour does on other sites — it directs attention.
### Section Cadence
A typical Black Forest Labs page runs on *brightness inversion* rather than colour:
1. **Hero** — full-bleed `#07130e` dark band, 90px / 500 white H1, body deck below, single near-black/white CTA
2. **Models Grid** — white background, sharp-cornered cards with true-black borders, model names + descriptions
3. **Spotlight Band** — inverted `#07130e` dark band with white ink-card highlighting a flagship model (FLUX.1.1)
4. **Research / Paper Listing** — white background, hairline-ruled rows or bordered cards, publication-grade layout
5. **API / Developer Band** — white or muted off-white with a code block in the system mono
6. **Closing CTA** — often on a dark band, single dominant action
7. **Footer** — `#07130e` inverted band, white type, multi-column links
The alternation is *brightness-based* (white → dark → white → dark), never colour-based — the page's entire dynamism comes from inverting black and white.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 0px | Dividers, focus indicators |
| Small | 0px | Badges, tag chips |
| Standard | 0px | Buttons, inputs, code chips |
| Comfortable | 0px | Cards, panels |
| Large | 0px | Large surfaces, spotlight cards |
| Featured | 0px | Modals, hero panels |
| Pill | 9999px | Reserved — used only if a fully-rounded chip is ever needed (rare/absent on production) |
Black Forest Labs' signature shape is **the sharp corner — 0px radius across the entire production site** (probe-confirmed). Buttons, cards, inputs, and badges are all hard-edged rectangles. In a SaaS world where 8–12px rounding is the default friendliness signal, the square corners read as technical, exact, and unsentimental — the geometry of a spec sheet, a research-paper figure, or a terminal window rather than a marketing page. The `pill: 9999` tier exists in the scale as a fallback but is effectively unused; the brand commits to sharp edges as an identity decision.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow, white bg | Page canvas, body sections |
| 1 — Hairline | 1px `#000000` border | Cards, panels, inputs, badges |
| 2 — Inversion | `#07130e` dark fill against white page | Hero band, footer, ink spotlight cards |
| 3 — Faint Card | 1px border + `rgba(7, 19, 14, 0.06) 0 2px 8px` | Rare hover lift; border usually suffices |
| 4 — Overlay | `rgba(7, 19, 14, 0.12) 0 12px 32px -8px` + scrim `rgba(7, 19, 14, 0.60)` | Modals, dropdowns |
### Shadow Philosophy
Black Forest Labs is a **borderless-shadow brand** — elevation is communicated almost entirely through the **true-black hairline border** and through **brightness inversion**, not through shadow. A card lifts because it has a sharp black outline on white, not because it casts a soft drop shadow. The most dramatic "elevation" on the page isn't a shadow at all — it's the inverted dark band, where a near-black field reads as a different *plane* from the white page purely through value contrast.
Where a faint shadow is used (a rare hover lift, a true overlay), it's tinted with the green-black ink `rgba(7, 19, 14, …)` rather than neutral black, keeping the whole system tonally coherent. The discipline is "if you can see a glow, it's wrong" — depth is geometric (border + inversion), not atmospheric (shadow + glow). This is the frontier-lab register: surfaces are drawn, not floated.
## 8. Interaction & Motion
### Easing Curves
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour/inversion transitions
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — punchier; modal entry, band reveals
### Duration Buckets
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Link underline appear, focus ring fade-in |
| Standard | 240ms | Button inversion, card border deepen |
| Slow | 320ms | Section reveal, modal entry |
### Per-Component Recipes
- **Primary button hover**: bg deepens `#07130e` → `#000000` over 240ms standard. **No transform, no scale.**
- **Secondary button hover**: *inverts* — white fill → near-black `#07130e` fill, near-black text → white, over 240ms. The full inversion is the hover signal.
- **Link hover**: underline appears over 150ms; colour holds near-black (deepens imperceptibly to `#000000`). The underline is the entire signal.
- **Card hover**: border deepens / a faint green-black shadow appears over 240ms. **No translate, no lift.**
- **Input focus**: 2px near-black ring fades in over 150ms; border holds.
- **Section reveal**: dark/white bands fade in over 320ms ease-emphasized when entering viewport. One-shot per section.
### Page Transitions
Page navigation is a quiet cross-fade with the sticky nav holding static. Anchor scrolling uses smooth-scroll. The motion register matches the visual register: restrained, no flourish, nothing that calls attention to itself.
### Reduced Motion
Respects `prefers-reduced-motion: reduce`. All `translate` and `scale` transforms suppress entirely — replaced with instant render or opacity-only fades. Durations effectively halve. Section reveals become static on-mount. Link underline appears instantly rather than animating. The brand experience is fully preserved under reduced-motion — nothing breaks, because the brand was never motion-dependent.
## 9. Accessibility & A11y
### Contrast Pairs
| Pair | Ratio | Level |
|------|-------|-------|
| `#07130e` text on `#ffffff` canvas | 16.9 | AAA at all sizes |
| `#ffffff` text on `#07130e` ink band | 16.9 | AAA at all sizes |
| `#4a544f` secondary on `#ffffff` | 8.1 | AAA at body sizes |
| `#7d847f` tertiary on `#ffffff` | 4.6 | AA at body sizes |
| `#a8ada9` faint on `#ffffff` | 2.9 | Fails AA — placeholder/disabled only |
| `#b9b5d0` accent on `#07130e` ink | 6.9 | AA at body / AAA at large — secondary copy on dark band |
| `#000000` border on `#ffffff` | 21.0 | Maximum (border, not text) |
The near-black-on-white pairing sits at a comfortable 16.9:1 — well above AAA — and the inverted white-on-near-black band carries the same ratio, so the dramatic hero inversion costs nothing in legibility. The lavender-grey accent passes AA on the dark band for secondary copy; it is never used for primary text or for small text on white.
### Focus Indicators
Focus is a **2px near-black ring** (`rgba(7, 19, 14, 0.25)` with outline-offset) — high contrast on the white page, no colour cue needed. On the dark bands, the focus ring inverts to a white/translucent ring for visibility. The discipline matches the brand: focus is signalled by contrast, not by a brand colour.
### ARIA Patterns
- **Top nav**: `<nav aria-label="Primary">` landmark with skip-link to `<main>`.
- **Hero band**: the decorative inversion is purely visual; the H1 is a real `<h1>`, not an image.
- **Model cards**: `<article>` with `aria-labelledby` pointing to the model name.
- **Code blocks**: `<pre><code role="region" aria-label="API example" tabindex="0">` — focusable, language-labelled.
- **Modal**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Links**: rely on underline-on-hover plus the underline-at-rest in body prose so colour-blind users identify links without colour.
### Keyboard Navigation
- Tab order: skip-link → wordmark → primary nav → CTA → main content (document order) → footer
- `Esc` closes modals and dropdowns
- Code blocks are focusable (`tabindex="0"`)
- All interactive targets meet the 44px minimum effective tap area despite slim visual heights
### Screen Reader Hints
- Uppercase eyebrows use CSS `text-transform: uppercase` so screen readers announce natural case
- The lavender wordmark wash is decorative; the wordmark carries `aria-label="Black Forest Labs"`
- Decorative dark-band graphics carry `aria-hidden="true"`
### Reduced Motion
All transitions degrade to opacity-only or instant. Section reveals become static on-mount. Modal entry becomes instant. The brand preserves full visual consistency under reduced-motion.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Nav collapses to wordmark + hamburger; hero H1 drops 90→40px; cards 1-up; CTAs stack |
| Tablet | 640–1024px | Nav keeps inline links; hero H1 at ~56px; cards 2-up |
| Desktop | 1024–1280px | Full nav; hero H1 at 72–90px; cards 2/3-up; full layout |
| Wide | 1280–1536px | Content caps at 1280px; whitespace absorbs the rest |
### Touch Targets
- Buttons: ~48px height — comfortably above the 44px minimum on all viewports
- Nav links: 44×44px minimum tap area even at 15px text
- Badges/chips: padded to a 44px effective tap target where interactive
### Collapsing Strategy
- **Top nav** at <1024px: links collapse into a hamburger sheet; the single CTA remains visible
- **Hero** at <640px: the 90px H1 scales down to ~40px while preserving the dark-band inversion; the inversion never drops on mobile
- **Card grids**: 3 → 2 → 1 columns
- **CTA pairs** at <640px: stack vertically (primary above, secondary below)
- **Dark bands** stay full-bleed at every breakpoint — the inversion rhythm is mobile-preserved
### Image Behavior
Model-sample imagery (the one place colour appears — the generated images themselves) uses `aspect-ratio` to prevent layout shift and `srcset` for retina. Logos render in `currentColor` to inherit the near-black or white depending on the band. Below-fold images lazy-load; the hero is eager.
### Container Queries
Used sparingly inside model/sample cards: when a card crosses a width threshold, a sample-grid switches from stacked to side-by-side. The same component renders compactly in dense grids and expansively in spotlight contexts.
## 11. Content & Voice
### Tone
**Technical, sober, declarative — frontier-research register.** Black Forest Labs writes like a research lab announcing capability, not a startup selling a product. Headlines state the work ("FLUX.1 — frontier image generation"); subheads explain capability in precise technical terms; copy uses the vocabulary of ML research (model, weights, inference, diffusion, latent) without translating it down for general visitors. The voice is restrained and confident — it assumes a technical reader and declines to oversell. There is no exclamation-heavy enthusiasm and no consumer-magic framing; the seriousness is the pitch.
### Microcopy Patterns
- **Button verbs**: *Get started*, *Try FLUX*, *Read the paper*, *View documentation*, *Request access*, *Contact us*. Direct, outcome-focused.
- **Model framing**: *"FLUX.1 [pro] — state-of-the-art image generation."* — names the model, states the claim, no embellishment.
- **Error messages**: specific and accountable — *"Generation failed: prompt exceeds token limit. Shorten the prompt and retry."*
- **Empty states**: instruction-led — *"No generations yet. Enter a prompt to start."*
- **Field labels**: single-word where possible — *Prompt*, *Model*, *Seed*, *Aspect ratio*.
- **Loading states**: context-specific — *"Generating…"*, *"Loading model…"* — never bare "Loading…".
### Empty States
Empty states follow the research-tool convention: name the state, offer the next step, include the exact action. *"No API keys yet. Create a key to begin."* The tone is instructional, not encouraging — it tells the user what to do, not how to feel.
### CTA Verb Conventions
- Primary: *Get started*, *Try FLUX*, *Request access*, *Contact us*
- Secondary: *Read the paper*, *View documentation*, *Learn more*
- Tertiary: *See models*, *Read research*, *Browse the API*
- Avoided: *Click here*, *Submit*, *Buy now*, exclamation marks, consumer-magic language. The verbs match the research-peer register — direct, never marketing-template.
## 12. Dark Mode & Theming
**No toggleable dark mode is shipped.** Black Forest Labs is a **light-only canvas** — pure white `#ffffff` is the single ground. There is no `prefers-color-scheme: dark` variant and no theme switcher.
However, the brand achieves a dark-mode *feeling* through **inline inversion**: the hero band and footer are rendered on near-black `#07130e` fields with white type, punched into the white page. These dark bands are part of the page composition, not a switchable theme — the page is permanently light, with dark bands as deliberate contrast moments. The result is that the brand reads as having both light and dark surfaces without ever offering a toggle. (Theme-toggle audit confirmed: score=0, no theme-switch signals.)
If a true dark mode were ever added, the natural token swap would be: canvas `#ffffff` → `#07130e`, text `#07130e` → `#ffffff`, border `#000000` → `rgba(255,255,255,0.20)`, with the lavender-grey accent unchanged. But this is not currently shipped.
## 13. Lineage & Influences
Black Forest Labs sits squarely in the **frontier-AI-lab monochrome** lineage — the visual register adopted by serious research labs to signal capability through reduction rather than decoration. Its DNA traces three sources. First, the **single-typeface, contrast-only identity** that Vercel and Linear made the developer-tool default: one face carries the brand, the accent colour is withheld from action fills, and the primary CTA is an inverted contrast pill rather than a coloured button. Black Forest Labs takes this further — it commits to a *single weight* (500) and *sharp corners* (0px), pushing past Vercel's already-restrained system into near-total reduction.
Second, the **research-paper-cover austerity** of academic AI labs — the early monochrome of OpenAI, the sober restraint of Anthropic, the technical sobriety of DeepMind — where the marketing surface reads like a publication the lab would actually release. The page declines product gloss because the audience (researchers, developers, technical buyers) reads gloss as noise. Third, the **stark black-on-white / white-on-black inversion** of the Swiss International Typographic Style, filtered through a modern grotesque: grid discipline, sans-serif-as-content, and decoration rejected on principle.
The single deliberate chromatic departure is the dusty lavender-grey `#b9b5d0` washing the FLUX wordmark — the one colour in an otherwise zero-chroma system, and even it is desaturated almost to neutral. The brand's thesis is pointed: a frontier image-generation lab — a company whose *entire product is generating colour and image* — does not need to *show* colour on its website to prove it can make it. The marketing restraint is the flex. The colour lives in the generated samples; the brand chrome stays monochrome.
What Black Forest Labs rejects: gradient washes and glow (the consumer-AI signal), saturated brand colours on buttons, rounded "friendly" corners, drop shadows and atmospheric depth, multiple type families, and any enthusiasm-heavy consumer-product voice. The page is engineered to feel like a serious lab's serious page.
**Influences:**
- **Instrument Sans (Google Fonts, open-source)** — The single typeface carrying display and body; a modern grotesque held at weight 500 across the system. *https://fonts.google.com/specimen/Instrument+Sans*
- **Vercel** — Frontier dev-tool monochrome; single-family discipline, accent withheld from CTA fills, contrast-pill primary. *https://vercel.com*
- **Linear** — Contrast-only identity; inverted text-colour CTAs against canvas, near-zero-chroma neutral system. *https://linear.app*
- **Anthropic** — Research-lab restraint; sober, publication-grade marketing for a frontier AI lab. *https://www.anthropic.com*
- **OpenAI** — Early monochrome research-lab aesthetic; black-on-white austerity, technical register over product gloss. *https://openai.com*
- **Swiss International Typographic Style** — Stark black/white inversion, grid discipline, sans-serif-as-content, decoration rejected. *https://en.wikipedia.org/wiki/International_Typographic_Style*
## 14. Do's and Don'ts
### Do
- **Do** use pure white `#ffffff` for the canvas — the single light ground. No cream, no warm tint.
- **Do** use near-black `#07130e` (a green-shifted ink, not neutral black) for body and headlines.
- **Do** set *everything* in **Instrument Sans** — display and body, one face, no second family.
- **Do** hold type at **weight 500** as the default. The even medium weight is the brand's typographic signature.
- **Do** invert the hero into a dark `#07130e` band with the H1 in white at a large size (90px is the production value).
- **Do** keep corners **sharp — 0px radius** on buttons, cards, inputs, and badges. Rounding breaks the technical register.
- **Do** carry separation with true-black `#000000` hairline borders; let the border do the elevation work.
- **Do** make the primary CTA a near-black-on-white contrast (or white-on-near-black on dark bands) — never a colour.
- **Do** keep the lavender-grey `#b9b5d0` accent rare and restrained — the FLUX wordmark wash, secondary copy on dark.
- **Do** alternate sections by *brightness* (white → dark → white), not by colour.
- **Do** keep semantic colours muted and low-chroma so they never break the monochrome austerity.
- **Do** write in a sober, technical, research-lab voice — declarative, no exclamation, no consumer-magic.
### Don't
- **Don't** use cream or any warm off-white. Pure white is the entry ticket.
- **Don't** add a colored CTA. The primary action is contrast (near-black/white), never a brand hue.
- **Don't** round the corners. 0px is the brand; 8–12px rounding shifts it into generic-SaaS friendliness.
- **Don't** introduce a second typeface or a serif. Instrument Sans is the entire system.
- **Don't** push display weight to 700–800 as the default. The brand lives at 500.
- **Don't** add gradients, glows, or atmospheric drop shadows. Depth is geometric (border + inversion), not atmospheric.
- **Don't** saturate the lavender accent or apply it to a button fill. It's a near-neutral wash, not a brand colour.
- **Don't** clutter the page. Whitespace does what colour does elsewhere — keep sections wide and airy.
- **Don't** drop the dark-band inversion on mobile. The white→dark rhythm is mobile-preserved.
- **Don't** use enthusiasm-heavy consumer copy or exclamation marks. The voice is frontier-research sober.
- **Don't** translate technical vocabulary down for general visitors — the audience is technical by design.
- **Don't** add bright semantic colours (vivid green/red/amber). Keep them desaturated to preserve the monochrome.
## 15. Agent Prompt Guide
### Quick Color Reference
```
Canvas: #ffffff
Ink Band: #07130e (hero / footer / spotlight fill)
Text: #07130e (near-black, faint green tint)
Text on Ink: #ffffff
Text Secondary: #4a544f
Text Tertiary: #7d847f
Brand: #07130e (identity is contrast, NOT a hue)
Accent: #b9b5d0 (dusty lavender-grey — rare, near-neutral)
CTA Bg: #07130e (NEVER a colour)
CTA Text: #ffffff
Border: #000000 (true-black hairline)
Focus Ring: rgba(7, 19, 14, 0.25) 0 0 0 2px
```
### Example Component Prompts
1. **"Create a Black Forest Labs hero: full-bleed dark band `#07130e` (near-black green-tint), a 90px Instrument Sans H1 at weight 500 in pure white `#ffffff` with `-0.03em` tracking, 18px / 400 Instrument Sans body deck below in white, and a single CTA — white fill `#ffffff`, near-black `#07130e` text, 0px radius (sharp corners), 16px / 500 label. No gradient, no glow, no rounding. The drama is the size and the black-on-white inversion."**
2. **"Design a Black Forest Labs card: pure white `#ffffff` background, 1px true-black `#000000` hairline border, **0px radius (sharp corners)**, 24px padding, **no shadow**. Inside: 24px / 500 Instrument Sans heading in `#07130e`, 16px / 400 body in `#4a544f` secondary. Hover: border deepens / faint green-black shadow — no lift, no translate. The border does the elevation work."**
3. **"Build a Black Forest Labs primary button: near-black `#07130e` fill, white `#ffffff` text at 16px / 500 Instrument Sans, **0px radius**, 12×20px padding, ~48px height. Hover deepens to true black `#000000` — no transform. Pair it with a secondary: white fill, true-black `#000000` border, near-black text, that *inverts* to near-black fill + white text on hover."**
4. **"Compose a Black Forest Labs model spotlight on a dark band: full-bleed `#07130e` background, an inverted ink card (`#07130e` fill, no border, 32px padding, 0px radius) with the model name in 32px / 500 Instrument Sans white, a description in 16px / 400 at `#b9b5d0` dusty lavender-grey, and a white-fill CTA. The whole section reads as a charged statement against the white page above and below it."**
5. **"Render a Black Forest Labs top nav: white `#ffffff` fill, 64px height, 1px faint bottom hairline `rgba(7, 19, 14, 0.12)`. Wordmark left in Instrument Sans 500 (FLUX mark washed in `#b9b5d0` lavender-grey). Center/right nav links (Models, Research, API, Company) at 15px / 500 ghost style with underline-on-hover. Far right: a single near-black primary CTA `Get started`. Flat, minimal — no mega-menu."**
6. **"Build a Black Forest Labs prompt input: white `#ffffff` fill, 1px true-black `#000000` border, **0px radius**, ~48px height, 12px padding, placeholder in `#a8ada9` faint, 16px / 400 Instrument Sans text in `#07130e`. On focus: a 2px near-black ring `rgba(7, 19, 14, 0.25)` — no brand-colour focus. Sharp corners throughout."**
### Iteration Guide
1. **Check the canvas.** It must be pure white `#ffffff`. Any cream/warm tint drifts toward Notion/Mintlify and breaks the frontier-lab austerity.
2. **Set everything in Instrument Sans at weight 500.** If your headings are 700+ and your body is 400, you've lost the brand's even-medium-weight signature. The 500-everywhere flatness is the tell.
3. **Square the corners.** If anything has 8–12px rounding, you've drifted into generic SaaS. Black Forest Labs is 0px radius — sharp, technical, spec-sheet geometry.
4. **Invert the hero.** A white hero is wrong. The hero is a near-black `#07130e` band with a giant white H1 (90px). The black-on-white inversion is the brand's most charged moment.
5. **Withhold colour from the CTA.** If your primary button is a colour, you've ported consumer-AI logic. The primary is near-black-on-white (or white-on-near-black on a dark band). Contrast, never hue.
6. **Use the green-black ink, not neutral black, for text.** `#07130e` carries a faint green cast — it's a green-shifted ink. Pure `#000` reads colder and loses the brand's subtle warmth.
7. **Let borders and inversion do the depth.** Kill the drop shadows and glows. A card lifts because it has a sharp true-black outline on white, not because it floats. Depth is geometric.
8. **Keep the lavender accent near-invisible.** `#b9b5d0` is a near-neutral wash on the FLUX wordmark and secondary copy on dark — never a button fill, never a section ground. If it reads as "a colour," you've over-applied it.
---
*Theme-toggle audit: score=0, signals=[none]*
1. Visual Theme & Atmosphere
Black Forest Labs — the research group behind the FLUX family of image-generation models — presents itself with the visual austerity of a frontier AI lab rather than a consumer product. The page is overwhelmingly white #ffffff, the type is a near-black #07130e that carries the faintest green cast (a green-shifted ink, not a neutral black), and every glyph on the site is set in a single typeface: Instrument Sans, display and body alike, held at a confident medium weight of 500. There is no second face, no serif, no system fallback doing real work. The identity is carried by the type and by the stark black-on-white contrast — nothing else.
The signature move is the inverted hero band. Against the otherwise white page, the hero is a dark surface (#07130e near-black) with the H1 rendered in pure white at a dramatic 90px. This single inversion is the page’s most charged moment: a black field with a giant white headline, the kind of contrast that reads as a statement of intent rather than a marketing flourish. The same inversion recurs in the footer and in occasional feature spotlights — dark bands punched into a white page, each one carrying white type. The page’s rhythm is therefore brightness-based: white → dark → white, never colour-based.
What’s most distinctive is the near-total absence of colour. There is no colored CTA — the primary button is near-black #07130e on white (or, on a dark band, inverted to white on near-black). There is no gradient wash, no glow, no saturated accent doing the consumer-AI thing of signalling “magic.” The one chromatic concession is a dusty lavender-grey #b9b5d0 that washes the FLUX wordmark and surfaces faintly as secondary text on dark bands — and even that is desaturated almost to neutral. For a lab whose entire product is generating colour and image, the marketing restraint is the flex: it doesn’t need to show colour to prove it can make it.
The geometry reinforces the register. Corners are sharp — 0px radius across the production site. Buttons, cards, inputs, badges: all hard-edged rectangles. In a SaaS landscape where 8–12px rounded corners are the default friendliness signal, Black Forest Labs’ square corners read as technical, exact, unsentimental — the geometry of a spec sheet or a research-paper figure rather than a marketing page. Combined with true-black #000000 hairline borders and the absence of shadow, the surfaces feel drawn rather than lifted.
The atmospheric vocabulary that captures the feeling: stark, monochrome, frontier-lab, research-paper-cover, near-zero-chroma, green-tint-ink, inverted-hero, white-on-black-on-white, single-face, Instrument-medium, sharp-cornered, hairline-ruled, shadowless, technical, restrained, austere, publication-grade. Every surface lands like it was designed by a research lab that decided its website should look like the cover of a paper it would actually publish — confident through reduction, serious through subtraction.
Key Characteristics
- Pure white
#ffffffcanvas — the dominant ground; never cream, never warm, never tinted - Near-black
#07130ebody and headline type — a green-shifted ink, not a neutral black - Inverted dark hero band —
#07130efield with the H1 in pure white at 90px, a dramatic contrast moment - A single typeface — Instrument Sans for display and body, held at weight 500 throughout
- No colored CTA, no gradient, no glow — the primary action is near-black-on-white (or inverted on dark)
- Sharp 0px corners everywhere — buttons, cards, inputs, badges; the geometry of a spec sheet
- True-black
#000000hairline borders carry separation; shadows are near-absent - One restrained accent — dusty lavender-grey
#b9b5d0on the FLUX wordmark; almost desaturated to grey - Brightness-based section rhythm — white → dark → white, never colour-based alternation
- Frontier-AI-lab register — publication-grade austerity, technical and unsentimental
2. Color Palette & Roles
Primary
- Canvas (
#ffffff): the page background — pure white, the dominant ground. The single light tone; any cream or warm tint would break the frontier-lab austerity and shift the brand toward Notion/Mintlify territory. - Body Text (
#07130e): primary text and headlines — near-black with a faint green cast. Probe-confirmed asrgb(7, 19, 14). The green tint is subtle but intentional: a green-shifted ink rather than a neutral#000, lending warmth-without-warmth to the otherwise cold page. - Ink Band (
#07130e): the inverted dark surface — hero, footer, feature spotlights. The same near-black value as the body text, used as a field that carries white type. - Pure Black (
#000000): true black — reserved for borders, hairline rules, and rare full-contrast edges. Distinct from the green-tinted#07130eink, kept neutral for crisp geometric lines.
Brand
- Brand (
#07130e): the brand mark colour — near-black green-tint. The identity is built on contrast, not hue; the brand “colour” is functionally the near-black ink against white (and white against the near-black band). There is no saturated brand hue. - On-Brand (
#ffffff): white text or icon on a near-black brand fill — the inverted half of the contrast pair.
Accent
- Accent / Lavender-Grey (
#b9b5d0): the single chromatic concession — a dusty lavender-grey washing the FLUX wordmark and surfacing faintly as secondary text on dark bands. Desaturated almost to neutral; it reads as “barely violet” rather than as a colour with intent. Never fills a button, never grounds a section. - Accent Soft (
rgba(185, 181, 208, 0.16)): a soft lavender wash for the rare quiet emphasis — a highlight strip, a hover tint on a dark surface.
Interactive
- Link (
#07130e): inline links — near-black, distinguished by underline rather than colour. The page withholds blue entirely; links read as text with an underline affordance. - Link Hover (
#000000): hover deepens to true black; the underline persists. The colour shift is near-imperceptible — the underline is the real signal. - Focus (
#07130ering): keyboard focus is a near-black outline ring — high contrast on white, no colour cue needed. - Disabled (
#a8ada9text): disabled controls drop to the faint neutral, no colour cue.
Neutral Scale
A compact green-grey ramp does all hierarchy work without introducing a hue:
- Pure White (
#ffffff) — canvas, card surface - Surface Muted (
#f5f5f4) — faintest off-white inset, quiet section bands, code fills - Text Faint (
#a8ada9) — placeholder, disabled - Text Tertiary (
#7d847f) — meta, timestamps, faint labels - Text Secondary (
#4a544f) — supporting copy, captions; a muted green-grey - Text (
#07130e) — primary text, headlines; near-black green-tint - Pure Black (
#000000) — borders, hairline rules
Surface & Borders
- Canvas / Surface (
#ffffff) — page and card share the same white; separation comes from the border, not a fill change - Surface Ink (
#07130e) — inverted card / band surface - Surface Muted (
#f5f5f4) — quiet inset band, code-block fill - Border Default (
#000000) — true-black hairline (probe-confirmed); the dominant separation device - Border Soft (
rgba(7, 19, 14, 0.12)) — quieter separation, near-black at 12%; used for the nav bottom rule - Border On-Ink (
rgba(255, 255, 255, 0.16)) — hairline on dark bands
Shadow Colors
Shadows are near-absent. Where a faint lift is used at all, it’s tinted with the green-black ink rather than neutral black:
rgba(7, 19, 14, 0.04) 0 1px 2px— ambient (rare)rgba(7, 19, 14, 0.06) 0 2px 8px— card (rare; border usually does the work)rgba(7, 19, 14, 0.12) 0 12px 32px -8px— deep, reserved for overlay UIrgba(7, 19, 14, 0.60)— modal scrim
Semantic
Semantic colours are kept low-chroma to preserve the monochrome register — muted, desaturated, never bright:
- Success (
#1f6f4aonrgba(31, 111, 74, 0.10)): a muted forest green — status, confirmation. Tonally on-brand with the green-tint ink. - Warning (
#9a6a1fonrgba(154, 106, 31, 0.10)): a muted amber — advisory, rate limits. Rare. - Danger (
#9a2b2bonrgba(154, 43, 43, 0.10)): a muted brick red — errors, destructive actions. Desaturated to avoid a bright alarm against the austere page.
3. Typography Rules
Font Family
Primary (display + body): "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Instrument Sans is an open-source modern grotesque from Google Fonts — a clean, slightly warm sans with open apertures and a low-contrast monoline construction. Black Forest Labs uses it for everything: the 90px hero H1, the body copy, the nav links, the captions. The single-family discipline is the entire typographic identity — there is no display/body split, no serif, no system fallback carrying real weight.
The weight-500 signature: the probe confirms the page holds weight 500 at both the H1 (90px / 500) and the body (16px / 500). This is the brand’s most distinctive typographic decision. Most systems set body at 400 and push headlines to 600–800; Black Forest Labs flattens the system to a single confident medium weight. The result is a page that reads as even-toned and deliberate — no shouty bold, no thin elegance, just a steady 500 everywhere. (Display can climb to 600–700 for special emphasis, and body can drop to 400 for long-form prose, but the default register is 500.)
Mono companion: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace. A system monospace stack used only for code, API examples, model identifiers, and CLI references. Black Forest Labs does not ship a proprietary mono — the system stack is sufficient for the rare code context.
OpenType features: Instrument Sans renders with kern and liga on. The system is restrained — no stylistic alternates, no decorative ligatures. The type does its work through size, weight-500 consistency, and tight negative tracking on display sizes.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Instrument Sans | 90px | 500 | 1.0 | -0.03em | Hero H1 — probe-confirmed; white on dark band |
| display-xl | Instrument Sans | 72px | 500 | 1.02 | -0.028em | Major section opener |
| display-lg | Instrument Sans | 56px | 500 | 1.05 | -0.024em | Sub-section opener |
| h1 | Instrument Sans | 40px | 500 | 1.10 | -0.02em | Page title |
| h2 | Instrument Sans | 32px | 500 | 1.15 | -0.016em | Section H2 |
| h3 | Instrument Sans | 24px | 500 | 1.25 | -0.01em | Card / article H3 |
| h4 | Instrument Sans | 20px | 500 | 1.30 | -0.005em | Sub-card heading |
| h5 | Instrument Sans | 18px | 500 | 1.40 | 0 | Inline emphasis heading |
| eyebrow | Instrument Sans | 13px | 500 | 1.40 | 0.06em | Section pre-label, uppercase |
| body-lg | Instrument Sans | 18px | 400 | 1.55 | 0 | Hero deck, lede paragraph |
| body-md | Instrument Sans | 16px | 500 | 1.55 | 0 | Default body — probe-confirmed 16px / 500 |
| body-regular | Instrument Sans | 16px | 400 | 1.55 | 0 | Long-form prose body (lighter variant) |
| body-sm | Instrument Sans | 14px | 400 | 1.50 | 0 | Card body, dense copy |
| label | Instrument Sans | 13px | 500 | 1.40 | 0 | Form field label |
| caption | Instrument Sans | 12px | 500 | 1.40 | 0.02em | Image caption, meta |
| nav-link | Instrument Sans | 15px | 500 | 1.20 | 0 | Top-nav link |
| button | Instrument Sans | 16px | 500 | 1.20 | 0 | Default button copy |
| button-sm | Instrument Sans | 14px | 500 | 1.20 | 0 | Compact button |
| code-inline | Mono | 14px | 500 | 1.40 | 0 | Inline code references |
| code-block | Mono | 14px | 400 | 1.60 | 0 | Code block content |
Principles
- Single-family discipline. Instrument Sans for display, body, captions, labels, nav, buttons. The mono stack appears only in code. There is no second face anywhere in the system.
- Weight 500 is the system default. The probe confirms 500 at both H1 (90px) and body (16px). This even medium weight is the brand’s typographic signature — no thin/bold contrast, just a steady deliberate tone.
- Hero scales enormous. The H1 lands at 90px — among the largest in the catalog — and lives on the inverted dark band in white. The size is the drama; it doesn’t need a heavier weight to land.
- Negative tracking compresses with size.
-0.03emat 90px, tightening through the display range, easing to near-zero at body sizes. - Body holds at 16px. Probe-confirmed default body; long-form prose drops to weight 400 for reading comfort, but UI body stays at 500.
- Uppercase eyebrows with wide tracking. Section pre-labels use 13px / 500 / 0.06em uppercase — the one place tracking opens up, providing a quiet structural signal.
- No italic in display. Instrument Sans is set roman across all hierarchy; italics carry quoted titles in body only.
- Mono is system-only and rare. Unlike Vercel’s proprietary Geist Mono, Black Forest Labs uses the system mono stack for the occasional code context — the type identity is the sans, not the mono.
4. Component Stylings
Buttons
Primary — #07130e near-black fill, white text at 16px / 500, 0px radius (sharp corners), 12×20px padding, ~48px height. Hover deepens to true #000000. No transform, no scale — the inversion-contrast carries the affordance. Use case: Get started, Try FLUX, Contact us — the dominant CTA. Never a colour; the action is the near-black-on-white contrast itself.
Secondary (Outlined) — #ffffff fill, near-black text at 16px / 500, 1px true-black #000000 border, 0px radius, 12×20px padding. Hover inverts to a near-black #07130e fill with white text. Use case: Read the paper, Documentation, Learn more — paired adjacently with the primary.
On-Ink (Primary on dark band) — When a CTA sits on the dark hero or footer band, it inverts: #ffffff white fill, near-black #07130e text, 0px radius. The same contrast logic, flipped for the dark ground.
Ghost (Quiet) — Transparent fill, near-black text at 16px / 500, 0px radius, 12×16px padding. Hover reveals an underline. Use case: nav links, footer secondaries, in-card tertiary actions.
Cards
Default Card — #ffffff white fill, 1px true-black #000000 hairline border, 0px radius (sharp corners), 24px padding, no shadow. The border alone carries separation — the card reads as drawn on the page rather than lifted above it. Used across feature grids, model directories, research-paper listings.
Ink Card — #07130e near-black fill, white text, no border, 0px radius, 32px padding. The inverted spotlight card on dark bands — used for model cards (FLUX.1, FLUX.1.1), feature highlights, and any element that needs to read as a charged statement.
Inputs / Forms
Text Input / Prompt Box — #ffffff fill, near-black text at 16px / 400, 1px true-black #000000 border, 0px radius, ~48px height, 12px padding. Placeholder at #a8ada9 faint. On focus: border holds near-black and a 2px near-black ring appears (rgba(7, 19, 14, 0.25) 0 0 0 2px). No brand-colour focus — the focus signal is the high-contrast near-black ring on white.
Select — Same shape with a chevron at right at tertiary-text colour. Sharp corners throughout.
Badges, Tags, Pills
Status Badge (Filled) — #07130e near-black fill, white caps at 12px / 500 / 0.02em, 0px radius, 4×10px padding. Use case: NEW, FLUX.1, BETA. Sharp-cornered rectangle, not a pill.
Tag Chip (Outlined) — Transparent fill, near-black text at 12px / 500, 1px true-black border, 0px radius, 4×10px padding. Use case: version chips, category labels, model variants.
Navigation
Top Nav — #ffffff white fill, ~64px height, 1px bottom hairline at rgba(7, 19, 14, 0.12) (faint near-black). Wordmark left in Instrument Sans (with the lavender-grey #b9b5d0 wash on the FLUX mark). Center/right: nav links (Models, Research, API, Company) at 15px / 500 ghost style. Far right: a single near-black primary CTA (Get started / Try FLUX). No mega-menu — the nav is flat and minimal.
Footer — #07130e near-black inverted band, white type, generous vertical padding. Multi-column link grid in 14px / 400 with the lavender-grey accent on the wordmark. The footer mirrors the hero’s inversion — the page opens and closes on dark bands.
5. Layout Principles
Spacing System
- Base unit: 4px
- Scale:
0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 - Section padding (vertical): 96–128px for major bands; 48–64px between content sections; 24–32px between blocks
- Card internal padding: 24px on default cards; 32px on ink spotlight cards
- Inter-element gutters: 24px in 2-up grids; 16px in dense 3-up
Grid & Container
- Page max width: 1280px for marketing/editorial sections
- Reading column caps at 720px even inside the 1280px container — line length calibrated for ~70 characters
- Inverted dark bands (hero, footer, spotlights) run full-bleed edge-to-edge with content centered inside the 1280px container
- Hero treatment: full-bleed
#07130edark band, 90px white H1 (often left-aligned or centered), generous vertical space above and below
Whitespace Philosophy
The page leans editorial — generous whitespace, large type, room to breathe. The austerity is spatial as much as chromatic: the absence of colour and shadow is matched by an absence of clutter. Sections are spaced widely (96px+ vertical), the hero gives its 90px headline ample air, and dense data layouts are avoided in favour of clear, paper-like composition. The whitespace does what colour does on other sites — it directs attention.
Section Cadence
A typical Black Forest Labs page runs on brightness inversion rather than colour:
- Hero — full-bleed
#07130edark band, 90px / 500 white H1, body deck below, single near-black/white CTA - Models Grid — white background, sharp-cornered cards with true-black borders, model names + descriptions
- Spotlight Band — inverted
#07130edark band with white ink-card highlighting a flagship model (FLUX.1.1) - Research / Paper Listing — white background, hairline-ruled rows or bordered cards, publication-grade layout
- API / Developer Band — white or muted off-white with a code block in the system mono
- Closing CTA — often on a dark band, single dominant action
- Footer —
#07130einverted band, white type, multi-column links
The alternation is brightness-based (white → dark → white → dark), never colour-based — the page’s entire dynamism comes from inverting black and white.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 0px | Dividers, focus indicators |
| Small | 0px | Badges, tag chips |
| Standard | 0px | Buttons, inputs, code chips |
| Comfortable | 0px | Cards, panels |
| Large | 0px | Large surfaces, spotlight cards |
| Featured | 0px | Modals, hero panels |
| Pill | 9999px | Reserved — used only if a fully-rounded chip is ever needed (rare/absent on production) |
Black Forest Labs’ signature shape is the sharp corner — 0px radius across the entire production site (probe-confirmed). Buttons, cards, inputs, and badges are all hard-edged rectangles. In a SaaS world where 8–12px rounding is the default friendliness signal, the square corners read as technical, exact, and unsentimental — the geometry of a spec sheet, a research-paper figure, or a terminal window rather than a marketing page. The pill: 9999 tier exists in the scale as a fallback but is effectively unused; the brand commits to sharp edges as an identity decision.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | no shadow, white bg | Page canvas, body sections |
| 1 — Hairline | 1px #000000 border | Cards, panels, inputs, badges |
| 2 — Inversion | #07130e dark fill against white page | Hero band, footer, ink spotlight cards |
| 3 — Faint Card | 1px border + rgba(7, 19, 14, 0.06) 0 2px 8px | Rare hover lift; border usually suffices |
| 4 — Overlay | rgba(7, 19, 14, 0.12) 0 12px 32px -8px + scrim rgba(7, 19, 14, 0.60) | Modals, dropdowns |
Shadow Philosophy
Black Forest Labs is a borderless-shadow brand — elevation is communicated almost entirely through the true-black hairline border and through brightness inversion, not through shadow. A card lifts because it has a sharp black outline on white, not because it casts a soft drop shadow. The most dramatic “elevation” on the page isn’t a shadow at all — it’s the inverted dark band, where a near-black field reads as a different plane from the white page purely through value contrast.
Where a faint shadow is used (a rare hover lift, a true overlay), it’s tinted with the green-black ink rgba(7, 19, 14, …) rather than neutral black, keeping the whole system tonally coherent. The discipline is “if you can see a glow, it’s wrong” — depth is geometric (border + inversion), not atmospheric (shadow + glow). This is the frontier-lab register: surfaces are drawn, not floated.
8. Interaction & Motion
Easing Curves
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— Material-style; default for hover, focus, colour/inversion transitions - Emphasized:
cubic-bezier(0.2, 0, 0, 1)— punchier; modal entry, band reveals
Duration Buckets
| Bucket | Value | Use |
|---|---|---|
| Fast | 150ms | Link underline appear, focus ring fade-in |
| Standard | 240ms | Button inversion, card border deepen |
| Slow | 320ms | Section reveal, modal entry |
Per-Component Recipes
- Primary button hover: bg deepens
#07130e→#000000over 240ms standard. No transform, no scale. - Secondary button hover: inverts — white fill → near-black
#07130efill, near-black text → white, over 240ms. The full inversion is the hover signal. - Link hover: underline appears over 150ms; colour holds near-black (deepens imperceptibly to
#000000). The underline is the entire signal. - Card hover: border deepens / a faint green-black shadow appears over 240ms. No translate, no lift.
- Input focus: 2px near-black ring fades in over 150ms; border holds.
- Section reveal: dark/white bands fade in over 320ms ease-emphasized when entering viewport. One-shot per section.
Page Transitions
Page navigation is a quiet cross-fade with the sticky nav holding static. Anchor scrolling uses smooth-scroll. The motion register matches the visual register: restrained, no flourish, nothing that calls attention to itself.
Reduced Motion
Respects prefers-reduced-motion: reduce. All translate and scale transforms suppress entirely — replaced with instant render or opacity-only fades. Durations effectively halve. Section reveals become static on-mount. Link underline appears instantly rather than animating. The brand experience is fully preserved under reduced-motion — nothing breaks, because the brand was never motion-dependent.
9. Accessibility & A11y
Contrast Pairs
| Pair | Ratio | Level |
|---|---|---|
#07130e text on #ffffff canvas | 16.9 | AAA at all sizes |
#ffffff text on #07130e ink band | 16.9 | AAA at all sizes |
#4a544f secondary on #ffffff | 8.1 | AAA at body sizes |
#7d847f tertiary on #ffffff | 4.6 | AA at body sizes |
#a8ada9 faint on #ffffff | 2.9 | Fails AA — placeholder/disabled only |
#b9b5d0 accent on #07130e ink | 6.9 | AA at body / AAA at large — secondary copy on dark band |
#000000 border on #ffffff | 21.0 | Maximum (border, not text) |
The near-black-on-white pairing sits at a comfortable 16.9:1 — well above AAA — and the inverted white-on-near-black band carries the same ratio, so the dramatic hero inversion costs nothing in legibility. The lavender-grey accent passes AA on the dark band for secondary copy; it is never used for primary text or for small text on white.
Focus Indicators
Focus is a 2px near-black ring (rgba(7, 19, 14, 0.25) with outline-offset) — high contrast on the white page, no colour cue needed. On the dark bands, the focus ring inverts to a white/translucent ring for visibility. The discipline matches the brand: focus is signalled by contrast, not by a brand colour.
ARIA Patterns
- Top nav:
<nav aria-label="Primary">landmark with skip-link to<main>. - Hero band: the decorative inversion is purely visual; the H1 is a real
<h1>, not an image. - Model cards:
<article>witharia-labelledbypointing to the model name. - Code blocks:
<pre><code role="region" aria-label="API example" tabindex="0">— focusable, language-labelled. - Modal:
role="dialog" aria-modal="true" aria-labelledbywith focus trap and Esc-to-close. - Links: rely on underline-on-hover plus the underline-at-rest in body prose so colour-blind users identify links without colour.
Keyboard Navigation
- Tab order: skip-link → wordmark → primary nav → CTA → main content (document order) → footer
Esccloses modals and dropdowns- Code blocks are focusable (
tabindex="0") - All interactive targets meet the 44px minimum effective tap area despite slim visual heights
Screen Reader Hints
- Uppercase eyebrows use CSS
text-transform: uppercaseso screen readers announce natural case - The lavender wordmark wash is decorative; the wordmark carries
aria-label="Black Forest Labs" - Decorative dark-band graphics carry
aria-hidden="true"
Reduced Motion
All transitions degrade to opacity-only or instant. Section reveals become static on-mount. Modal entry becomes instant. The brand preserves full visual consistency under reduced-motion.
10. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Nav collapses to wordmark + hamburger; hero H1 drops 90→40px; cards 1-up; CTAs stack |
| Tablet | 640–1024px | Nav keeps inline links; hero H1 at ~56px; cards 2-up |
| Desktop | 1024–1280px | Full nav; hero H1 at 72–90px; cards 2/3-up; full layout |
| Wide | 1280–1536px | Content caps at 1280px; whitespace absorbs the rest |
Touch Targets
- Buttons: ~48px height — comfortably above the 44px minimum on all viewports
- Nav links: 44×44px minimum tap area even at 15px text
- Badges/chips: padded to a 44px effective tap target where interactive
Collapsing Strategy
- Top nav at <1024px: links collapse into a hamburger sheet; the single CTA remains visible
- Hero at <640px: the 90px H1 scales down to ~40px while preserving the dark-band inversion; the inversion never drops on mobile
- Card grids: 3 → 2 → 1 columns
- CTA pairs at <640px: stack vertically (primary above, secondary below)
- Dark bands stay full-bleed at every breakpoint — the inversion rhythm is mobile-preserved
Image Behavior
Model-sample imagery (the one place colour appears — the generated images themselves) uses aspect-ratio to prevent layout shift and srcset for retina. Logos render in currentColor to inherit the near-black or white depending on the band. Below-fold images lazy-load; the hero is eager.
Container Queries
Used sparingly inside model/sample cards: when a card crosses a width threshold, a sample-grid switches from stacked to side-by-side. The same component renders compactly in dense grids and expansively in spotlight contexts.
11. Content & Voice
Tone
Technical, sober, declarative — frontier-research register. Black Forest Labs writes like a research lab announcing capability, not a startup selling a product. Headlines state the work (“FLUX.1 — frontier image generation”); subheads explain capability in precise technical terms; copy uses the vocabulary of ML research (model, weights, inference, diffusion, latent) without translating it down for general visitors. The voice is restrained and confident — it assumes a technical reader and declines to oversell. There is no exclamation-heavy enthusiasm and no consumer-magic framing; the seriousness is the pitch.
Microcopy Patterns
- Button verbs: Get started, Try FLUX, Read the paper, View documentation, Request access, Contact us. Direct, outcome-focused.
- Model framing: “FLUX.1 [pro] — state-of-the-art image generation.” — names the model, states the claim, no embellishment.
- Error messages: specific and accountable — “Generation failed: prompt exceeds token limit. Shorten the prompt and retry.”
- Empty states: instruction-led — “No generations yet. Enter a prompt to start.”
- Field labels: single-word where possible — Prompt, Model, Seed, Aspect ratio.
- Loading states: context-specific — “Generating…”, “Loading model…” — never bare “Loading…”.
Empty States
Empty states follow the research-tool convention: name the state, offer the next step, include the exact action. “No API keys yet. Create a key to begin.” The tone is instructional, not encouraging — it tells the user what to do, not how to feel.
CTA Verb Conventions
- Primary: Get started, Try FLUX, Request access, Contact us
- Secondary: Read the paper, View documentation, Learn more
- Tertiary: See models, Read research, Browse the API
- Avoided: Click here, Submit, Buy now, exclamation marks, consumer-magic language. The verbs match the research-peer register — direct, never marketing-template.
12. Dark Mode & Theming
No toggleable dark mode is shipped. Black Forest Labs is a light-only canvas — pure white #ffffff is the single ground. There is no prefers-color-scheme: dark variant and no theme switcher.
However, the brand achieves a dark-mode feeling through inline inversion: the hero band and footer are rendered on near-black #07130e fields with white type, punched into the white page. These dark bands are part of the page composition, not a switchable theme — the page is permanently light, with dark bands as deliberate contrast moments. The result is that the brand reads as having both light and dark surfaces without ever offering a toggle. (Theme-toggle audit confirmed: score=0, no theme-switch signals.)
If a true dark mode were ever added, the natural token swap would be: canvas #ffffff → #07130e, text #07130e → #ffffff, border #000000 → rgba(255,255,255,0.20), with the lavender-grey accent unchanged. But this is not currently shipped.
13. Lineage & Influences
Black Forest Labs sits squarely in the frontier-AI-lab monochrome lineage — the visual register adopted by serious research labs to signal capability through reduction rather than decoration. Its DNA traces three sources. First, the single-typeface, contrast-only identity that Vercel and Linear made the developer-tool default: one face carries the brand, the accent colour is withheld from action fills, and the primary CTA is an inverted contrast pill rather than a coloured button. Black Forest Labs takes this further — it commits to a single weight (500) and sharp corners (0px), pushing past Vercel’s already-restrained system into near-total reduction.
Second, the research-paper-cover austerity of academic AI labs — the early monochrome of OpenAI, the sober restraint of Anthropic, the technical sobriety of DeepMind — where the marketing surface reads like a publication the lab would actually release. The page declines product gloss because the audience (researchers, developers, technical buyers) reads gloss as noise. Third, the stark black-on-white / white-on-black inversion of the Swiss International Typographic Style, filtered through a modern grotesque: grid discipline, sans-serif-as-content, and decoration rejected on principle.
The single deliberate chromatic departure is the dusty lavender-grey #b9b5d0 washing the FLUX wordmark — the one colour in an otherwise zero-chroma system, and even it is desaturated almost to neutral. The brand’s thesis is pointed: a frontier image-generation lab — a company whose entire product is generating colour and image — does not need to show colour on its website to prove it can make it. The marketing restraint is the flex. The colour lives in the generated samples; the brand chrome stays monochrome.
What Black Forest Labs rejects: gradient washes and glow (the consumer-AI signal), saturated brand colours on buttons, rounded “friendly” corners, drop shadows and atmospheric depth, multiple type families, and any enthusiasm-heavy consumer-product voice. The page is engineered to feel like a serious lab’s serious page.
Influences:
- Instrument Sans (Google Fonts, open-source) — The single typeface carrying display and body; a modern grotesque held at weight 500 across the system. https://fonts.google.com/specimen/Instrument+Sans
- Vercel — Frontier dev-tool monochrome; single-family discipline, accent withheld from CTA fills, contrast-pill primary. https://vercel.com
- Linear — Contrast-only identity; inverted text-colour CTAs against canvas, near-zero-chroma neutral system. https://linear.app
- Anthropic — Research-lab restraint; sober, publication-grade marketing for a frontier AI lab. https://www.anthropic.com
- OpenAI — Early monochrome research-lab aesthetic; black-on-white austerity, technical register over product gloss. https://openai.com
- Swiss International Typographic Style — Stark black/white inversion, grid discipline, sans-serif-as-content, decoration rejected. https://en.wikipedia.org/wiki/International_Typographic_Style
14. Do’s and Don’ts
Do
- Do use pure white
#fffffffor the canvas — the single light ground. No cream, no warm tint. - Do use near-black
#07130e(a green-shifted ink, not neutral black) for body and headlines. - Do set everything in Instrument Sans — display and body, one face, no second family.
- Do hold type at weight 500 as the default. The even medium weight is the brand’s typographic signature.
- Do invert the hero into a dark
#07130eband with the H1 in white at a large size (90px is the production value). - Do keep corners sharp — 0px radius on buttons, cards, inputs, and badges. Rounding breaks the technical register.
- Do carry separation with true-black
#000000hairline borders; let the border do the elevation work. - Do make the primary CTA a near-black-on-white contrast (or white-on-near-black on dark bands) — never a colour.
- Do keep the lavender-grey
#b9b5d0accent rare and restrained — the FLUX wordmark wash, secondary copy on dark. - Do alternate sections by brightness (white → dark → white), not by colour.
- Do keep semantic colours muted and low-chroma so they never break the monochrome austerity.
- Do write in a sober, technical, research-lab voice — declarative, no exclamation, no consumer-magic.
Don’t
- Don’t use cream or any warm off-white. Pure white is the entry ticket.
- Don’t add a colored CTA. The primary action is contrast (near-black/white), never a brand hue.
- Don’t round the corners. 0px is the brand; 8–12px rounding shifts it into generic-SaaS friendliness.
- Don’t introduce a second typeface or a serif. Instrument Sans is the entire system.
- Don’t push display weight to 700–800 as the default. The brand lives at 500.
- Don’t add gradients, glows, or atmospheric drop shadows. Depth is geometric (border + inversion), not atmospheric.
- Don’t saturate the lavender accent or apply it to a button fill. It’s a near-neutral wash, not a brand colour.
- Don’t clutter the page. Whitespace does what colour does elsewhere — keep sections wide and airy.
- Don’t drop the dark-band inversion on mobile. The white→dark rhythm is mobile-preserved.
- Don’t use enthusiasm-heavy consumer copy or exclamation marks. The voice is frontier-research sober.
- Don’t translate technical vocabulary down for general visitors — the audience is technical by design.
- Don’t add bright semantic colours (vivid green/red/amber). Keep them desaturated to preserve the monochrome.
15. Agent Prompt Guide
Quick Color Reference
Canvas: #ffffff
Ink Band: #07130e (hero / footer / spotlight fill)
Text: #07130e (near-black, faint green tint)
Text on Ink: #ffffff
Text Secondary: #4a544f
Text Tertiary: #7d847f
Brand: #07130e (identity is contrast, NOT a hue)
Accent: #b9b5d0 (dusty lavender-grey — rare, near-neutral)
CTA Bg: #07130e (NEVER a colour)
CTA Text: #ffffff
Border: #000000 (true-black hairline)
Focus Ring: rgba(7, 19, 14, 0.25) 0 0 0 2pxExample Component Prompts
-
“Create a Black Forest Labs hero: full-bleed dark band
#07130e(near-black green-tint), a 90px Instrument Sans H1 at weight 500 in pure white#ffffffwith-0.03emtracking, 18px / 400 Instrument Sans body deck below in white, and a single CTA — white fill#ffffff, near-black#07130etext, 0px radius (sharp corners), 16px / 500 label. No gradient, no glow, no rounding. The drama is the size and the black-on-white inversion.” -
“Design a Black Forest Labs card: pure white
#ffffffbackground, 1px true-black#000000hairline border, 0px radius (sharp corners), 24px padding, no shadow. Inside: 24px / 500 Instrument Sans heading in#07130e, 16px / 400 body in#4a544fsecondary. Hover: border deepens / faint green-black shadow — no lift, no translate. The border does the elevation work.” -
“Build a Black Forest Labs primary button: near-black
#07130efill, white#fffffftext at 16px / 500 Instrument Sans, 0px radius, 12×20px padding, ~48px height. Hover deepens to true black#000000— no transform. Pair it with a secondary: white fill, true-black#000000border, near-black text, that inverts to near-black fill + white text on hover.” -
“Compose a Black Forest Labs model spotlight on a dark band: full-bleed
#07130ebackground, an inverted ink card (#07130efill, no border, 32px padding, 0px radius) with the model name in 32px / 500 Instrument Sans white, a description in 16px / 400 at#b9b5d0dusty lavender-grey, and a white-fill CTA. The whole section reads as a charged statement against the white page above and below it.” -
“Render a Black Forest Labs top nav: white
#fffffffill, 64px height, 1px faint bottom hairlinergba(7, 19, 14, 0.12). Wordmark left in Instrument Sans 500 (FLUX mark washed in#b9b5d0lavender-grey). Center/right nav links (Models, Research, API, Company) at 15px / 500 ghost style with underline-on-hover. Far right: a single near-black primary CTAGet started. Flat, minimal — no mega-menu.” -
“Build a Black Forest Labs prompt input: white
#fffffffill, 1px true-black#000000border, 0px radius, ~48px height, 12px padding, placeholder in#a8ada9faint, 16px / 400 Instrument Sans text in#07130e. On focus: a 2px near-black ringrgba(7, 19, 14, 0.25)— no brand-colour focus. Sharp corners throughout.”
Iteration Guide
- Check the canvas. It must be pure white
#ffffff. Any cream/warm tint drifts toward Notion/Mintlify and breaks the frontier-lab austerity. - Set everything in Instrument Sans at weight 500. If your headings are 700+ and your body is 400, you’ve lost the brand’s even-medium-weight signature. The 500-everywhere flatness is the tell.
- Square the corners. If anything has 8–12px rounding, you’ve drifted into generic SaaS. Black Forest Labs is 0px radius — sharp, technical, spec-sheet geometry.
- Invert the hero. A white hero is wrong. The hero is a near-black
#07130eband with a giant white H1 (90px). The black-on-white inversion is the brand’s most charged moment. - Withhold colour from the CTA. If your primary button is a colour, you’ve ported consumer-AI logic. The primary is near-black-on-white (or white-on-near-black on a dark band). Contrast, never hue.
- Use the green-black ink, not neutral black, for text.
#07130ecarries a faint green cast — it’s a green-shifted ink. Pure#000reads colder and loses the brand’s subtle warmth. - Let borders and inversion do the depth. Kill the drop shadows and glows. A card lifts because it has a sharp true-black outline on white, not because it floats. Depth is geometric.
- Keep the lavender accent near-invisible.
#b9b5d0is a near-neutral wash on the FLUX wordmark and secondary copy on dark — never a button fill, never a section ground. If it reads as “a colour,” you’ve over-applied it.
Theme-toggle audit: score=0, signals=[none]
Drop black-forest-labs into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add black-forest-labs 2 · ship landing page
npx agentkit init --design black-forest-labs