light · sans · mono · developer · minimal · performance
DESIGN.md inspired by Drizzle ORM
Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM.
By webdesignhot · orm.drizzle.team ↗
$ npx @webdesignhot/design-md add drizzle
Learn more about the CLI → Compare to…
Aave Ghost-soft DeFi — lavender #978fff on white, custom Aave Repro sans, pastel gradients in a usually-brutalist lending space. Accenture Dark hero, white Graphik, and one electric purple — the `>` greater-than mark made into a whole consulting brand. '#a600ff' is always moving forward. Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. Aesop Monochrome-warm apothecary — ivory canvas, charcoal type, Suisse Int'l set small, 0px corners. Affirm Honest-money fintech in the dark — indigo #4a4af4 CTAs at near-pill 96px radius, light-weight white headlines, no fine print. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Allbirds Oatmeal-canvas eco-minimalism — Geograph sans on warm Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. American Express White-canvas premium-restraint membership UI — signature Amex Blue accent, near-black editorial type, concierge-tier hierarchy. Amplitude Light-canvas digital-analytics surface — IBM Plex Sans, grey #565656 body, black full-pill CTAs and a signature #1e61f0 blue. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Anytype Pure-black canvas, white ink, and a multi-color 'any' palette — a local-first, encrypted knowledge base that turns privacy into a colorful object. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Atlassian Enterprise-blue corporate canvas — signature Atlassian Blue, Charlie display type, four-product mark. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Away Editorial travel-luggage DTC — Graphik on white, photography-led, sharp 0px white CTAs over dark hero imagery. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Best Buy Yellow price-tag mark, electric blue trust, bold sans — big-box electronics design with Geek-Squad confidence. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Biome A white-canvas Rust toolchain page where one deep azure blue does all the work. Black Forest Labs Frontier-lab monochrome — stark white canvas, dark hero, near-black green-tint type, Instrument Sans at 500 throughout. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Bolt An electric-blue command line for the web — StackBlitz's AI builder on a near-black #1e1e21 canvas, Inter Display, builder's register. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Buttondown Indie newsletter software in heavy 900-weight Auto Pro — electric `#0069ff` pill CTAs and soft-yellow highlights on a pure-white canvas. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Capital One Confident-accessible banking — navy authority, one red swoosh, 2px-sharp blue. Captions Near-white studio canvas, an Exposure display, and a violet brand keyed off a full crayon-box of CSS color vars. Caraway Wholesome non-toxic-cookware DTC — Suisse Works serif on warm off-white, deep teal-green pill CTAs, pastel colorway palette. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Casper Cozy DTC sleep brand — Casper navy/indigo ink (`#1e306e`) on a pure-white canvas, deep-navy `#012169` pill CTAs at 32px radius, Calibre body under New Kansas friendly-serif display. Premium that tucks you in. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chase Trust-institutional banking UI — white canvas, near-black ink, bright-blue primary + green secondary CTAs in Open Sans. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. CircleCI Light-content CI/CD platform — near-black hero, Inter sans, navy chrome with a restrained CircleCI-green accent. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudflare Infrastructure-grade calm — white canvas, dark hero band, FT Kunst Grotesk, signature Cloudflare orange, full-pill CTAs. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Coda White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Craft Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. dbt Labs dbt orange Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. 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
- bg
#ffffff - bg-subtle
#fbfbfc - surface
#ffffff - surface-alt
#f6f6f7 - surface-faint
#f1f2f3 - brand — · 1.3
#c5f74f - brand-hover
#b9ee3c - brand-pressed
#a9dd2f - brand-soft
#eefbcf - on-brand
#000000 - control
#282b3b - control-hover
#34384c - control-pressed
#1f2230 - on-control
#ffffff - link
#000000 - link-hover
#282b3b - link-code
#22863a - selected
#c5f74f59 - disabled
#f1f2f3 - disabled-text
#b0b3b8 - text AAA · 21.0
#000000 - text-heading
#222222 - text-muted
#555555 - text-soft
#6b7280 - text-code
#414141 - text-faint — · 2.6
#9aa0a6 - border — · 1.2
#e5e7eb - border-soft
#f0f1f2 - border-strong — · 1.5
#d0d3d8 - border-dark
#282b3b - shadow-ambient
rgba(17,24,39,0.04) - shadow-standard
rgba(17,24,39,0.08) - shadow-elevated
rgba(17,24,39,0.12) - shadow-deep
rgba(17,24,39,0.16) - success
#22863a - success-bg
#e9f6ec - warning
#b45309 - warning-bg
#fdf3e7 - danger
#cf222e - danger-bg
#fbeaec - info
#282b3b - info-bg
#f6f6f7
Ship faster than ever.
display-hero ui-sans-serif 80px w700 -0.03em
Ship faster than ever.
display-lg ui-sans-serif 56px w700 -0.02em
Ship faster than ever.
h1 ui-sans-serif 40px w700 -0.018em
Built for teams that ship.
h2 ui-sans-serif 32px w600 -0.012em
The quick brown fox jumps over the lazy dog.
metric ui-sans-serif 28px w700 -0.01em
A complete kit
h3 ui-sans-serif 24px w600 -0.005em
The quick brown fox jumps over the lazy dog.
h4 ui-sans-serif 20px w600 0
The quick brown fox jumps over the lazy dog.
body-lg ui-sans-serif 18px w400 0
The quick brown fox jumps over the lazy dog.
body ui-sans-serif 16px w400 0
The quick brown fox jumps over the lazy dog.
body-sm ui-sans-serif 14px w400 0
The quick brown fox jumps over the lazy dog.
button ui-sans-serif 14px w500 0
The quick brown fox jumps over the lazy dog.
nav-link ui-sans-serif 14px w500 0
npx @webdesignhot/design-md add stripe
code-body ui-monospace 14px w400 0
OUR DESIGN SYSTEM
label ui-sans-serif 13px w500 0
npx @webdesignhot/design-md add stripe
code-inline ui-monospace 13px w500 0
OUR DESIGN SYSTEM
caption ui-sans-serif 12px w500 0.02em
OUR DESIGN SYSTEM
code-label ui-monospace 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
- micro
2px - sm
4px - md
8px - lg
12px - xl
16px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 8/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → brand
- muted → text-muted
- border → border
- ring → brand
Drizzle's visual identity is GitHub-README minimalism crossed with the Vercel/Bun school of dark-control-on-light-canvas dev marketing. The page is aggressively monochrome — pure white `#ffffff`, pure-black `#000` body copy, slate-graphite `#282b3b` for the only filled buttons — and the entire chromatic identity is carried by a single hue: the lime-green serpent logo (`#c5f74f`). That restraint is the point. Drizzle markets itself as "TypeScript-first, lightweight, no-magic," and the design is the argument: no gradients, no glassmorphism, no decorative colour, just clean type, generous whitespace, and well-typeset code samples. Type is the platform system sans (`ui-sans-serif`) and a system mono (`ui-monospace`) for code — Drizzle ships no custom webfont, matching its zero-dependency ethos. Code blocks lean on the Astro/Shiki token palette (text `#414141`, GitHub-green links `#22863a`), which gives the docs a familiar source-control register. Where Bun adds a warm cream canvas and a pink accent, and Biome adds a confident blue, Drizzle commits to near-zero chroma plus one acid lime — the cleanest, most code-forward posture in the dev-tools cohort.
- Dark-control-on-white-canvas dev-marketing template — 8px buttons, system sans, generous vertical rhythm, monochrome restraint.
- Adjacent TypeScript-runtime brand built on a light canvas with a single vivid accent and system-font, performance-forward voice.
- README/source-control aesthetic — black-on-white prose, grey hairlines, the GitHub-green (#22863a) and -red (#cf222e) code-token palette echoed in the docs.
- Docs syntax-highlighting palette (--astro-code-color-text #414141, --astro-code-token-link #22863a) inherited directly into Drizzle's code blocks.
- Light, hairline-bordered, utility-clean component geometry and the convention of a near-grayscale surface scale punctuated by one brand hue.
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: Drizzle ORM
tagline: 'Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM.'
updated_at: 2026-05-30T00:00:00.000Z
published_at: 2026-05-29T21:44:14.064Z
author: webdesignhot
source_url: https://orm.drizzle.team
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [dev-tools]
tags: [light, sans, mono, developer, minimal, performance]
preview_swatch: ['#ffffff', '#c5f74f', '#282b3b']
related: [bun, biome, turso]
description: 'Drizzle ORM runs an aggressively plain white canvas (`#ffffff`) with pure-black body copy (`#000`) and dark slate-graphite controls (`#282b3b`) — the marketing site is near-monochrome on purpose. The one piece of colour is the brand''s signature lime-green serpent (`#c5f74f`), reserved for the logo and the occasional accent fill. Type is a clean system sans paired with a system mono for code; geometry is restrained, 8px on controls, no decorative gradients. The whole identity reads "TypeScript-first, lightweight, no-magic" — performance and code clarity over visual flourish.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
accent: brand
muted: text-muted
border: border
ring: brand
colors:
# Primary
bg: '#ffffff' # plain white canvas — the brand's substrate
bg-subtle: '#fbfbfc' # barely-there off-white for alternating bands
surface: '#ffffff' # cards sit flush on white, defined by border
surface-alt: '#f6f6f7' # tinted panel / code-tab strip / secondary fill
surface-faint: '#f1f2f3' # faint chip / 33%-alpha-on-white callout (#f1f2f3 ~0.27a)
# Brand
brand: '#c5f74f' # signature lime-green serpent — logo + accent fill
brand-hover: '#b9ee3c' # slightly deeper lime on hover
brand-pressed: '#a9dd2f' # pressed lime
brand-soft: '#eefbcf' # 20% lime wash for highlight backgrounds
on-brand: '#000000' # black text on lime fill — 16.8:1 AAA
# Dark control family (Drizzle's "primary button" colour)
control: '#282b3b' # dark slate-graphite — primary button / dark band
control-hover: '#34384c' # lifted slate on hover
control-pressed: '#1f2230' # pressed slate
on-control: '#ffffff' # white text on the dark control — 14.0:1 AAA
# Interactive
link: '#000000' # links are black, underline-driven (monochrome system)
link-hover: '#282b3b' # hover shifts to slate
link-code: '#22863a' # GitHub-flavoured green for code-token links (astro-code)
selected: '#c5f74f59' # 35% lime text selection wash
disabled: '#f1f2f3' # disabled bg
disabled-text: '#b0b3b8' # disabled text
# Neutral Scale
text: '#000000' # primary body copy — pure black
text-heading: '#222222' # headings render slightly softened (#222 measured)
text-muted: '#555555' # secondary copy — 7.5:1 AAA
text-soft: '#6b7280' # tertiary / captions — 4.8:1 AA
text-code: '#414141' # default code-block text colour (astro-code-color-text)
text-faint: '#9aa0a6' # quaternary / placeholder hints
# Surface & Borders
border: '#e5e7eb' # standard hairline — light grey on white
border-soft: '#f0f1f2' # faintest divider
border-strong: '#d0d3d8' # emphasised border on hover / active
border-dark: '#282b3b' # dark border on the slate control family
# Shadow
shadow-ambient: 'rgba(17,24,39,0.04)' # barely-there resting shadow
shadow-standard: 'rgba(17,24,39,0.08)' # card hover
shadow-elevated: 'rgba(17,24,39,0.12)' # popover / dropdown
shadow-deep: 'rgba(17,24,39,0.16)' # modal
# Semantic
success: '#22863a' # GitHub green — reuses the code-link hue
success-bg: '#e9f6ec' # pale green surface
warning: '#b45309' # amber-brown — only warm tone outside lime
warning-bg: '#fdf3e7' # pale amber surface
danger: '#cf222e' # GitHub-flavoured red
danger-bg: '#fbeaec' # pale red surface
info: '#282b3b' # info reuses the slate control colour
info-bg: '#f6f6f7' # neutral info surface
typography:
display:
family: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
weights: [500, 600, 700]
opentype-features: ['kern', 'liga']
body:
family: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern', 'liga']
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
weights: [400, 500]
opentype-features: ['liga', 'calt']
scale:
display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display }
h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display }
h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
button: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
nav-link: { size: 14, weight: 500, lineHeight: 1.2, tracking: '0', family: body }
code-body: { size: 14, weight: 400, lineHeight: 1.6, tracking: '0', family: mono }
code-inline: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: mono }
code-label: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.02em', family: mono }
metric: { size: 28, weight: 700, lineHeight: 1.1, tracking: '-0.01em', family: display }
radius:
micro: 2
sm: 4
md: 8
lg: 12
xl: 16
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]
xs: 4
sm: 8
md: 16
lg: 24
xl: 32
xxl: 48
section-sm: 64
section: 96
layout:
page-width: 1280
prose-width: 720
header-height: 64
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
reduced-motion: 'respects prefers-reduced-motion: reduce — code-sample crossfades become instant, hover lifts removed, transitions reduce to opacity.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'rgba(17,24,39,0.04) 0 1px 2px'
standard: 'rgba(17,24,39,0.08) 0 4px 12px -2px'
elevated: 'rgba(17,24,39,0.12) 0 12px 28px -8px'
deep: 'rgba(17,24,39,0.16) 0 24px 48px -12px'
ring: '0 0 0 3px rgba(197,247,79,0.4)'
accessibility:
contrast-text-on-bg: 21.0 # AAA — black #000 on white #ffffff
contrast-heading-on-bg: 15.9 # AAA — #222222 on #ffffff
contrast-on-control: 14.0 # AAA — white on slate #282b3b
contrast-on-brand: 16.8 # AAA — black on lime #c5f74f
contrast-muted-on-bg: 7.5 # AAA — #555555 on #ffffff
contrast-soft-on-bg: 4.8 # AA — #6b7280 on #ffffff
focus-ring: '3px solid rgba(197,247,79,0.4)'
focus-offset: '2px'
reduced-motion-honored: true
min-touch-target: 44
keyboard-nav: 'standard tab order; lime focus ring on all interactive controls; black/slate underline links'
components:
button-primary:
bg: '#282b3b'
text: '#ffffff'
padding: '10px 16px'
radius: 8
font: 'button (14/500)'
border: 'none'
hover: 'bg → #34384c'
active: 'bg → #1f2230'
use: 'primary CTA — Get Started, Documentation'
button-secondary:
bg: '#f6f6f7'
text: '#222222'
padding: '10px 16px'
radius: 8
font: 'button (14/500)'
border: '1px solid #e5e7eb'
hover: 'bg → #f1f2f3; border → #d0d3d8'
use: 'secondary action — GitHub, version pill'
button-brand:
bg: '#c5f74f'
text: '#000000'
padding: '10px 16px'
radius: 8
font: 'button (14/600)'
border: 'none'
hover: 'bg → #b9ee3c'
active: 'bg → #a9dd2f'
use: 'rare high-emphasis accent — sparingly, never more than one per view'
button-ghost:
bg: 'transparent'
text: '#000000'
padding: '10px 16px'
radius: 8
font: 'button (14/500)'
border: '1px solid transparent'
hover: 'bg → #f6f6f7'
use: 'tertiary / nav-adjacent action'
card:
bg: '#ffffff'
text: '#000000'
padding: '24px'
radius: 12
border: '1px solid #e5e7eb'
shadow: 'none at rest; ambient on hover'
hover: 'border → #d0d3d8; shadow → ambient'
use: 'feature card, dialect card, integration card'
card-tinted:
bg: '#f6f6f7'
text: '#000000'
padding: '24px'
radius: 12
border: 'none'
use: 'code-sample shell, comparison panel'
input:
bg: '#ffffff'
text: '#000000'
placeholder: '#9aa0a6'
padding: '8px 12px'
radius: 8
border: '1px solid #e5e7eb'
focus: 'border → #282b3b; ring 3px solid rgba(197,247,79,0.4)'
use: 'docs search, filter'
badge:
bg: '#f6f6f7'
text: '#222222'
padding: '2px 10px'
radius: 9999
font: 'caption (12/500)'
border: '1px solid #e5e7eb'
use: 'version tag, dialect pill, star count'
badge-brand:
bg: '#eefbcf'
text: '#000000'
padding: '2px 10px'
radius: 9999
font: 'caption (12/500)'
border: 'none'
use: 'new / highlight pill — lime wash, not full lime'
nav-link:
bg: 'transparent'
text: '#555555'
padding: '8px 12px'
font: 'nav-link (14/500)'
hover: 'text → #000000'
active: 'text → #000000; underline'
use: 'top nav, sidebar'
lineage:
summary: |
Drizzle's visual identity is GitHub-README minimalism crossed with the
Vercel/Bun school of dark-control-on-light-canvas dev marketing. The
page is aggressively monochrome — pure white `#ffffff`, pure-black `#000`
body copy, slate-graphite `#282b3b` for the only filled buttons — and
the entire chromatic identity is carried by a single hue: the lime-green
serpent logo (`#c5f74f`). That restraint is the point. Drizzle markets
itself as "TypeScript-first, lightweight, no-magic," and the design is
the argument: no gradients, no glassmorphism, no decorative colour, just
clean type, generous whitespace, and well-typeset code samples. Type is
the platform system sans (`ui-sans-serif`) and a system mono
(`ui-monospace`) for code — Drizzle ships no custom webfont, matching its
zero-dependency ethos. Code blocks lean on the Astro/Shiki token palette
(text `#414141`, GitHub-green links `#22863a`), which gives the docs a
familiar source-control register. Where Bun adds a warm cream canvas and
a pink accent, and Biome adds a confident blue, Drizzle commits to
near-zero chroma plus one acid lime — the cleanest, most code-forward
posture in the dev-tools cohort.
influences:
- name: 'Vercel'
role: 'Dark-control-on-white-canvas dev-marketing template — 8px buttons, system sans, generous vertical rhythm, monochrome restraint.'
url: https://vercel.com
- name: 'Bun'
role: 'Adjacent TypeScript-runtime brand built on a light canvas with a single vivid accent and system-font, performance-forward voice.'
url: https://bun.sh
- name: 'GitHub'
role: 'README/source-control aesthetic — black-on-white prose, grey hairlines, the GitHub-green (#22863a) and -red (#cf222e) code-token palette echoed in the docs.'
url: https://github.com
- name: 'Astro / Shiki'
role: 'Docs syntax-highlighting palette (--astro-code-color-text #414141, --astro-code-token-link #22863a) inherited directly into Drizzle''s code blocks.'
url: https://astro.build
- name: 'Tailwind CSS'
role: 'Light, hairline-bordered, utility-clean component geometry and the convention of a near-grayscale surface scale punctuated by one brand hue.'
url: https://tailwindcss.com
dark-mode: optional # light is the marketing default; the docs offer a dark theme toggle (theme-context-selector + localStorage-theme detected)
---
## 1. Visual Theme & Atmosphere
Drizzle ORM's home page opens on plain white — `#ffffff`, no off-white wash,
no tint — with pure-black body copy (`#000`) and headings that render a hair
softer at `#222222`. There is almost no colour on the page. The first
impression is **a well-typeset README that happens to be a marketing site**:
black text, grey hairlines, generous whitespace, and code samples doing most
of the heavy lifting. This is deliberate. Drizzle's pitch is "TypeScript-first,
lightweight, no-magic," and the design refuses to add visual magic where the
product refuses to add runtime magic. The canvas is the substrate; the code is
the hero.
The single piece of chroma is the brand's **signature lime-green serpent**
(`#c5f74f`) — an acid, almost-fluorescent green that lives in the logo and
shows up as the occasional accent fill. It is so saturated and so light that it
fails as text on white (1.25:1 — see §9); the brand never uses it that way.
Lime appears as a *fill* with black text on top (16.8:1 AAA), as a soft wash
behind a "new" pill, or as the focus-ring colour. It is a punctuation mark, not
a paragraph. A homepage re-probe surfaced chart and sponsor swatches rather
than a single clean accent stripe, which is itself telling: the lime is the
*logo's* colour, not a colour Drizzle paints the UI with. We keep `#c5f74f` as
the documented brand because it is the one hue the identity is built on, but the
working palette a designer reaches for daily is white, black, and slate.
The only "filled" interactive element is the dark control family — a
slate-graphite `#282b3b` that carries the primary buttons and the occasional
dark band. White text on that slate is a clean 14.0:1. This is the
Vercel/Bun-school move: a near-monochrome light page where the one filled,
high-contrast object is a dark pill, and everything else is defined by thin
grey borders and type weight. There are no drop-shadows at rest, no gradients,
no glassmorphism, no rounded-everything softness — geometry is tight (8px on
controls, 12px on cards) and decoration is essentially zero.
Typographically, Drizzle ships **no custom webfont**. It uses the platform
system sans (`ui-sans-serif`) for everything and a system mono
(`ui-monospace`) for code. That is on-brand: a zero-dependency ORM markets
itself with zero font dependencies. Code blocks adopt the Astro/Shiki token
palette (`#414141` text, `#22863a` for token links), so the docs read with the
same register as a GitHub file view — which is exactly the audience Drizzle is
talking to.
The overall mood is **performance and code clarity over flourish**. Where most
dev brands lean on a dark canvas and a glowing accent, Drizzle inverts it:
bright white, black ink, one acid-lime mark, and a single dark control. It is
the most restrained, most source-control-native posture in the dev-tools
cohort — a brand confident enough to let the code samples be the design.
**Key Characteristics**
- Plain white canvas (`#ffffff`) — no off-white wash, no tint, no gradient
- Pure-black body copy (`#000`), headings softened to `#222222`
- Single brand hue: the acid lime-green serpent (`#c5f74f`), used as fill only
- Lime fails as text on white (1.25:1) — always black-on-lime, never lime-on-white
- One filled control colour: dark slate-graphite `#282b3b` with white text (14.0:1)
- System sans (`ui-sans-serif`) + system mono (`ui-monospace`) — zero custom webfont
- Code blocks inherit the Astro/Shiki / GitHub token palette (`#414141`, `#22863a`)
- Grey hairline borders (`#e5e7eb`) define structure; near-zero shadow at rest
- Tight geometry — 8px controls, 12px cards — and no decorative effects
- Near-monochrome by design: white + black + slate, lime as punctuation
## 2. Color Palette & Roles
### Primary
- **Background** (`#ffffff`) [→ `bg`]: plain white canvas — the brand's substrate
- **Background Subtle** (`#fbfbfc`) [→ `bg-subtle`]: barely-there off-white for alternating section bands
- **Surface** (`#ffffff`) [→ `surface`]: cards sit flush on white, defined by border not fill
- **Surface Alt** (`#f6f6f7`) [→ `surface-alt`]: tinted panel, code-tab strip, secondary button fill
- **Surface Faint** (`#f1f2f3`) [→ `surface-faint`]: faint chip / low-alpha callout (the `~0.27a` star-count badge)
- **Primary Text** (`#000000`): pure-black body copy
### Brand
- **Brand Lime** (`#c5f74f`) [→ `brand`]: the signature serpent green — logo + accent fill
- **Brand Hover** (`#b9ee3c`) [→ `brand-hover`]: slightly deeper lime on hover
- **Brand Pressed** (`#a9dd2f`) [→ `brand-pressed`]: pressed lime
- **Brand Soft** (`#eefbcf`) [→ `brand-soft`]: 20% lime wash for highlight backgrounds and "new" pills
- **On-Brand Text** (`#000000`) [→ `on-brand`]: black text on lime fill — 16.8:1 AAA
### Dark Control Family
- **Control** (`#282b3b`) [→ `control`]: dark slate-graphite — the primary button and dark bands
- **Control Hover** (`#34384c`) [→ `control-hover`]: lifted slate on hover
- **Control Pressed** (`#1f2230`) [→ `control-pressed`]: pressed slate
- **On-Control Text** (`#ffffff`) [→ `on-control`]: white text on slate — 14.0:1 AAA
### Interactive
- **Link** (`#000000`) [→ `link`]: links are black, underline-driven (monochrome system)
- **Link Hover** (`#282b3b`) [→ `link-hover`]: hover shifts toward slate
- **Link Code** (`#22863a`) [→ `link-code`]: GitHub-green for code-token links (Astro/Shiki `--astro-code-token-link`)
- **Selected** (`#c5f74f59`) [→ `selected`]: 35% lime text-selection wash
- **Disabled** (`#f1f2f3`) [→ `disabled`]: disabled background
- **Disabled Text** (`#b0b3b8`) [→ `disabled-text`]: disabled text
### Neutral Scale
- **Text** (`#000000`): pure-black primary copy — 21:1 AAA
- **Text Heading** (`#222222`) [→ `text-heading`]: headings render slightly softened (measured `#222`)
- **Text Muted** (`#555555`) [→ `text-muted`]: secondary copy — 7.5:1 AAA
- **Text Soft** (`#6b7280`) [→ `text-soft`]: tertiary / captions — 4.8:1 AA
- **Text Code** (`#414141`) [→ `text-code`]: default code-block text (Astro/Shiki `--astro-code-color-text`)
- **Text Faint** (`#9aa0a6`) [→ `text-faint`]: quaternary / placeholder hints
### Surface & Borders
- **Border** (`#e5e7eb`) [→ `border`]: standard hairline — light grey on white
- **Border Soft** (`#f0f1f2`) [→ `border-soft`]: faintest divider
- **Border Strong** (`#d0d3d8`) [→ `border-strong`]: emphasised border on hover/active
- **Border Dark** (`#282b3b`) [→ `border-dark`]: dark border on the slate control family
### Shadow Colors
Shadows are cool-neutral (`rgba(17,24,39,…)`) at very low alpha. Drizzle barely
uses elevation — cards rest flat and are defined by their hairline border;
shadow appears only on hover and in overlays. Depth never carries colour:
- **Ambient** (`rgba(17,24,39,0.04)`): barely-there resting / hover shadow
- **Standard** (`rgba(17,24,39,0.08)`): card hover lift
- **Elevated** (`rgba(17,24,39,0.12)`): popover, dropdown
- **Deep** (`rgba(17,24,39,0.16)`): modal
### Semantic
- **Success** (`#22863a`): GitHub-green — reuses the code-link hue
- **Success Bg** (`#e9f6ec`): pale green surface
- **Warning** (`#b45309`): amber-brown — the only warm tone outside lime
- **Warning Bg** (`#fdf3e7`): pale amber surface
- **Danger** (`#cf222e`): GitHub-flavoured red
- **Danger Bg** (`#fbeaec`): pale red surface
- **Info** (`#282b3b`): info reuses the slate control colour
- **Info Bg** (`#f6f6f7`): neutral info surface
## 3. Typography Rules
### Font Family
- **Display & Body**: `ui-sans-serif` — the platform system sans (San Francisco on
Apple, Segoe UI on Windows, Roboto on Android/ChromeOS). Drizzle ships **no
custom webfont**, matching its zero-dependency ethos.
- **Mono**: `ui-monospace` — the platform system mono (SF Mono / Menlo /
Consolas / Liberation Mono). Used for all code samples, inline code, and
technical labels.
- **OpenType**: standard `kern`/`liga` on sans; `liga`/`calt` on mono for clean
code rendering. No stylistic-set experiments — Drizzle takes the system
default rendering as-is.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| display-hero | display | 80 | 700 | 1.0 | -0.03em | hero headline only |
| display-lg | display | 56 | 700 | 1.05 | -0.02em | section opener |
| h1 | display | 40 | 700 | 1.1 | -0.018em | page title |
| h2 | display | 32 | 600 | 1.2 | -0.012em | feature heading (measured `#222`, 600) |
| h3 | display | 24 | 600 | 1.25 | -0.005em | sub-feature |
| h4 | body | 20 | 600 | 1.3 | 0 | card title |
| body-lg | body | 18 | 400 | 1.55 | 0 | hero supporting copy |
| body | body | 16 | 400 | 1.55 | 0 | default body (measured 16/400) |
| body-sm | body | 14 | 400 | 1.5 | 0 | dense blocks, metadata |
| label | body | 13 | 500 | 1.4 | 0 | form label, field name |
| caption | body | 12 | 500 | 1.4 | 0.02em | badge, footnote |
| button | body | 14 | 500 | 1.0 | 0 | button text |
| nav-link | body | 14 | 500 | 1.2 | 0 | top nav, sidebar |
| code-body | mono | 14 | 400 | 1.6 | 0 | code blocks |
| code-inline | mono | 13 | 500 | 1.4 | 0 | inline `code` in prose |
| code-label | mono | 12 | 500 | 1.3 | 0.02em | tab label, dialect name |
| metric | display | 28 | 700 | 1.1 | -0.01em | star count, benchmark number |
### Principles
- **System fonts only**: no webfont request, no FOUT/FOIT, no font budget — the
type story is "the OS already has good defaults; we use them."
- **Weight does the hierarchy work**: with no colour and one family, weight
(400 → 500 → 600 → 700) and size carry the entire hierarchy.
- **Tight display tracking**: -0.012em to -0.03em compresses headlines for a
confident, modern dev-marketing feel; body stays at 0.
- **Headings soften to `#222`, not `#000`**: the measured h2 colour is `#222222`,
a subtle softening that keeps long headlines from feeling heavy.
- **Mono carries all code**: 14px `ui-monospace` at 1.6 line-height — comfortable
for multi-line query examples, the page's primary content.
- **Code-token palette inherited from Astro/Shiki**: code text `#414141`, token
links `#22863a` — the docs read like a syntax-highlighted source file.
- **No serif anywhere**: Drizzle is committedly sans + mono; there are no
editorial-serif moments.
- **Body at 16px, not 15**: full system-default reading size — the brand
prioritises legibility over dense-tooling compression.
## 4. Component Stylings
### Buttons
**button-primary** — Dark slate control
- Background: `#282b3b`
- Text: `#ffffff` at 14/500
- Padding: 10px 16px
- Radius: 8
- Border: none
- Hover: bg → `#34384c`
- Active: bg → `#1f2230`
- Focus: 3px lime ring `rgba(197,247,79,0.4)`, 2px offset
- Use: primary CTA — "Get Started", "Documentation"
**button-secondary** — Tinted neutral
- Background: `#f6f6f7`
- Text: `#222222` at 14/500
- Padding: 10px 16px
- Radius: 8
- Border: 1px solid `#e5e7eb`
- Hover: bg → `#f1f2f3`, border → `#d0d3d8`
- Use: secondary action — "GitHub", version pill, "Examples"
**button-brand** — Lime accent (rare)
- Background: `#c5f74f`
- Text: `#000000` at 14/600
- Padding: 10px 16px
- Radius: 8
- Border: none
- Hover: bg → `#b9ee3c`
- Active: bg → `#a9dd2f`
- Use: high-emphasis accent — used sparingly, never more than one per view. Black-on-lime only; never lime text.
**button-ghost** — Bare
- Background: transparent
- Text: `#000000` at 14/500
- Padding: 10px 16px
- Radius: 8
- Border: 1px solid transparent
- Hover: bg → `#f6f6f7`
- Use: tertiary / nav-adjacent action
### Cards
**card-default**
- Background: `#ffffff`
- Padding: 24px
- Radius: 12
- Border: 1px solid `#e5e7eb`
- Shadow: none at rest
- Hover: border → `#d0d3d8`, shadow → ambient
- Use: feature card, dialect card, integration card
**card-tinted** — Code-sample shell
- Background: `#f6f6f7`
- Padding: 24px
- Radius: 12
- Border: none
- Use: code-sample wrapper, comparison panel, callout block
### Badges / Tags / Pills
**badge-default**
- Background: `#f6f6f7`
- Text: `#222222` at 12/500
- Padding: 2px 10px
- Radius: pill (9999)
- Border: 1px solid `#e5e7eb`
- Use: version tag, dialect pill, star count ("33k+")
**badge-brand** — Lime wash highlight
- Background: `#eefbcf` (20% lime wash, not full lime)
- Text: `#000000` at 12/500
- Padding: 2px 10px
- Radius: pill
- Border: none
- Use: "new", "beta", highlight pill — soft wash keeps the acid lime calm at small sizes
### Inputs / Forms
**input-text**
- Background: `#ffffff`
- Text: `#000000` at 14/400
- Placeholder: `#9aa0a6`
- Padding: 8px 12px
- Radius: 8
- Border: 1px solid `#e5e7eb`
- Focus: border → `#282b3b`, ring 3px solid `rgba(197,247,79,0.4)`
- Use: docs search, dialect filter
### Navigation
**nav-link**
- Background: transparent
- Text: `#555555` at 14/500
- Padding: 8px 12px
- Hover: text → `#000000`
- Active: text → `#000000` + 2px underline
- Use: top nav, docs sidebar
### Decorative / Code
**code-block**
- Background: `#f6f6f7` (or `#ffffff` with border in tighter contexts)
- Text: `#414141` at 14/400 `ui-monospace`, 1.6 line-height
- Token links: `#22863a` (GitHub-green)
- Padding: 16px 20px
- Radius: 8
- Tab strip: `#f6f6f7` with `code-label` mono tabs (dialect names: PostgreSQL / MySQL / SQLite)
- Use: the page's primary content — query examples, schema definitions
**inline-code**
- Background: `#f6f6f7`
- Text: `#000000` at 13/500 `ui-monospace`
- Padding: 2px 6px
- Radius: 4
- Use: `code` spans within prose
**logo-mark** — The serpent
- The lime-green (`#c5f74f`) serpent is the one place full-saturation lime appears
- Renders on white at intrinsic size; never recoloured, never gradient-filled
## 5. Layout Principles
### Spacing System
- **Base unit**: 4px
- **Scale**: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96
- **Density observation**: Drizzle is **moderate-to-spacious** — generous
whitespace between sections (64–96px), comfortable padding inside cards
(24px), but content-dense within code samples where line-height (1.6) keeps
long queries readable. The whitespace is the design.
### Grid & Container
- **Page width**: 1280px max
- **Prose / docs width**: 720px (long-form documentation and marketing body)
- **Header height**: 64px
- **Hero treatment**: white-canvas hero with the headline, a one-line subhead,
two buttons (dark primary + tinted secondary), and a tabbed code sample below
- **Feature grid**: 3-col at desktop, 2-col at tablet, 1-col at mobile
### Whitespace Philosophy
- Whitespace is the primary structural device — with almost no colour and no
shadow, empty space and hairline borders carry the layout
- Sections breathe at 64–96px; the page never feels crowded
- Code samples are the densest moment on the page; everything around them is air
### Section Cadence
- Hero (white + tabbed code sample) → feature grid → dialect/integration cards →
comparison / code-heavy section → community (stars, sponsors) → footer
- Alternating bands use `#fbfbfc` or `#f6f6f7` at most — never a dark band on the
marketing page (dark `#282b3b` is reserved for controls)
- The lime appears at most once or twice per viewport — logo, plus maybe one
accent pill or focus ring
## 6. Shapes & Radius Scale
| Tier | Px | Use |
|------|----|----|
| Micro | 2 | inline chips, tight tokens |
| Standard | 4 | inline code, small badges |
| Comfortable | 8 | buttons, inputs, code blocks |
| Relaxed | 12 | cards |
| Featured | 16 | hero shells, large panels |
| Pill | 9999 | badges, version pills, star count |
Radius is consistent and modest — Drizzle never goes fully rounded on
rectangular surfaces. The 8px control radius and 12px card radius are the
workhorses; pills are reserved for tag-like metadata. Compound radii are rare;
code-tab strips merge with the block below by dropping the bottom radius
(`8 8 0 0`).
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|----|
| 0 | flat, no border | hero copy, prose on white |
| 1 | 1px solid `#e5e7eb` border, no shadow | resting cards, code blocks |
| 2 | 1px border + ambient shadow (`0.04`) | card hover |
| 3 | standard shadow (`0 4px 12px -2px`, `0.08`) | sticky header on scroll |
| 4 | elevated shadow (`0 12px 28px -8px`, `0.12`) | dropdown, popover, tooltip |
| 5 | deep shadow (`0 24px 48px -12px`, `0.16`) | modal, command palette |
**Shadow Philosophy**: Drizzle is a near-flat brand. Cards rest with **no
shadow at all** — they are defined entirely by a light-grey hairline border on
white. Elevation appears only when something genuinely floats (dropdown, modal)
or on hover, and even then the shadow is cool-neutral (`rgba(17,24,39,…)`) and
very low-alpha (0.04–0.16). Depth never carries colour — the lime is foreground
brand, never a glow. This flat-on-white, border-defined approach is the GitHub /
Tailwind register: structure through hairlines, not drop-shadows.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hovers and lifts
- **Decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — entering overlays, tooltips
### Durations
- **Fast** (150ms): hover, focus, button press
- **Standard** (240ms): card border/shadow lift, dropdown open
- **Slow** (320ms): modal enter, code-sample tab crossfade
### Per-Component Recipes
- **Button hover**: background colour transitions over 150ms; no scale, no lift
- **Card hover**: border `#e5e7eb` → `#d0d3d8` and ambient shadow fade in over 240ms
- **Code-tab switch**: crossfade the sample body over 240–320ms when switching
dialect (PostgreSQL / MySQL / SQLite)
- **Link hover**: underline appears / text shifts black → slate over 150ms
- **Focus**: 3px lime ring `rgba(197,247,79,0.4)` appears instantly on keyboard focus
- **Star count / metric**: optional count-up animation on first scroll into view
### Page Transitions
- Default: opacity-only fade over 320ms — no slide, no parallax. The brand's
motion is as restrained as its colour.
### Reduced Motion
When `prefers-reduced-motion: reduce` is set:
- Code-sample tab crossfades become instant swaps
- Card hover lifts removed (border colour change retained for affordance)
- Metric count-up animations disabled (final value shown immediately)
- All transitions reduce to opacity
## 9. Accessibility & A11y
### Contrast Pairs
- **Black `#000` on white `#ffffff`**: 21.0:1 (AAA — maximum)
- **Heading `#222222` on white**: 15.9:1 (AAA)
- **White on slate control `#282b3b`**: 14.0:1 (AAA)
- **Black on lime brand `#c5f74f`**: 16.8:1 (AAA) — the only safe way to use lime
- **Slate `#282b3b` on lime `#c5f74f`**: 11.2:1 (AAA) — alternate on-brand pairing
- **Muted `#555555` on white**: 7.5:1 (AAA)
- **Code text `#414141` on white**: 10.2:1 (AAA)
- **Soft `#6b7280` on white**: 4.8:1 (AA at body sizes)
- **Code link `#22863a` on white**: 4.6:1 (AA at body sizes)
> ⚠️ **Lime is never a text colour.** `#c5f74f` on white is **1.25:1** — far
> below any threshold. The brand always uses lime as a *fill* (black or slate
> text on top) or as the focus-ring colour. Never set lime as `color:` on a
> white surface.
### Focus Indicators
- Default: 3px solid `rgba(197,247,79,0.4)` lime ring, 2px offset
- Inputs: focus border → `#282b3b` + 3px lime ring
- The lime ring is the one place the brand colour earns its keep in the UI —
high-visibility against both white surfaces and dark controls
### ARIA Patterns
- **Code-tab group**: `role="tablist"` with `aria-selected` on the active dialect
tab; arrow-key navigation between PostgreSQL / MySQL / SQLite
- **Dialog / command palette**: `aria-labelledby` + `aria-describedby`; trap
focus; ESC to close
- **Search combobox**: standard listbox pattern with `aria-activedescendant`
- **Version / star badges**: include text labels; never colour-only meaning
### Keyboard Navigation
- Tab order follows visual order
- Skip-link at page top
- Enter/Space activates buttons and tabs
- Cmd/Ctrl+K opens docs search
- Arrow keys move within the dialect tablist
### Screen Reader Hints
- The lime serpent logo carries `alt="Drizzle ORM"`
- Code blocks use `<pre><code>` semantics; copy-button has `aria-label="Copy code"`
- Star count exposes a label ("33k+ GitHub stars"), not a bare number
### Reduced Motion
`prefers-reduced-motion: reduce` honored — see §8.
## 10. Responsive Behavior
### Breakpoints
| Name | Min Width | Use |
|------|-----------|----|
| Mobile | — | default, 1-col |
| Tablet | 640 | 2-col grids |
| Desktop | 1024 | 3-col grids, sidebar docs |
| Wide | 1280 | max page width |
| Ultra | 1536 | hero-only breathing room |
### Touch Targets
- Minimum 44×44px for primary controls and tabs
- Dialect tabs expand hit-area on touch even where the visual label is compact
### Collapsing Strategy
- **Nav**: collapses to hamburger ≤ 768px; docs sidebar becomes a drawer
- **Feature grid**: 3-col → 2-col @ 1024 → 1-col @ 640
- **Hero**: display-hero (80px) reduces to ~40px @ 640
- **Code samples**: scroll horizontally on overflow rather than wrap query syntax
- **Dialect tabs**: stay as a tablist; scroll horizontally if they overflow
### Image Behavior
- The serpent logo is SVG, scales crisp at any size
- Code samples are live text, never images — they reflow and remain selectable
- Integration logos lock at intrinsic size in a grey-on-white grid
## 11. Content & Voice
### Tone
Technical, precise, performance-forward, and quietly confident. Drizzle writes
for TypeScript developers who want SQL they can read, not an ORM that hides the
database behind magic. The copy is direct and benefit-led — "TypeScript-first,
lightweight, no-magic" — and it leans on code samples to make its case rather
than adjectives. No hype, no exclamation marks, no enterprise jargon; the voice
matches the design's restraint.
### Microcopy Patterns
- **Button verbs**: "Get Started", "Documentation", "View on GitHub",
"Examples" — short, literal, no marketing flourish
- **Section headers**: feature-statement style ("Everything you expect from an
ORM. And more.") — plain claims backed by code below
- **Error message recipe**: `[what failed]: [why]` — e.g.,
"Migration failed: column already exists"
- **Empty states**: "No results. [CTA: Browse the docs]"
### CTA Verb Conventions
- Top-level: "Get Started"
- Docs: "Documentation", "Read the docs"
- Source: "View on GitHub", "Star us"
- Examples: "Examples", "See it in action"
## 12. Dark Mode & Theming
Drizzle is **light by default** for marketing — the white-canvas, black-ink,
lime-mark identity is the brand's public face. The documentation, however,
offers a **dark theme toggle** (a theme-context selector with `localStorage`
persistence was detected on the page), so the brand is `optional`, not
light-only.
In dark mode the inversion is straightforward because the palette is nearly
grayscale:
- `bg`: `#ffffff` → `#0d0e12` (near-black, with the same cool undertone as the slate control)
- `surface`: `#ffffff` → `#16171d`
- `surface-alt`: `#f6f6f7` → `#1d1f27`
- `text`: `#000000` → `#ededf0`
- `text-muted`: `#555555` → `#9aa0a6`
- `border`: `#e5e7eb` → `#2a2c36`
- `control`: `#282b3b` → `#ededf0` (the dark button inverts to a light pill in dark mode)
- `on-control`: `#ffffff` → `#0d0e12`
- `brand` stays `#c5f74f` — the lime works on both white and near-black, and gains
even more punch on the dark canvas (lime on `#282b3b` is 11.2:1 AAA)
The lime is the constant across both themes; it is the only colour that never
changes. Everything else is a grayscale inversion.
## 13. Lineage & Influences
Drizzle's design is GitHub-README minimalism crossed with the Vercel/Bun school
of dark-control-on-light-canvas dev marketing. The page is aggressively
monochrome — pure white, pure-black copy, a single slate-graphite control colour
— and the entire chromatic identity is carried by one hue: the lime-green
serpent logo (`#c5f74f`). That restraint *is* the argument. Drizzle markets
itself as "TypeScript-first, lightweight, no-magic," and the visual language
refuses to add magic where the product refuses to: no gradients, no
glassmorphism, no decorative colour, just clean system type, generous
whitespace, and well-typeset code.
The type story reinforces the ethos — Drizzle ships **no custom webfont**, using
the platform `ui-sans-serif` and `ui-monospace`, the same way it ships a
lightweight, low-dependency runtime. Code blocks inherit the Astro/Shiki token
palette (text `#414141`, GitHub-green links `#22863a`), which gives the docs the
register of a syntax-highlighted source file — exactly the audience Drizzle
talks to. Where Bun adds a warm cream canvas and a pink accent, and Biome
commits to a confident blue, Drizzle stakes out the cleanest, most
code-forward, near-zero-chroma corner of the dev-tools cohort: white, black,
slate, and one acid lime.
- **Vercel** — https://vercel.com — dark-control-on-white-canvas dev-marketing template; 8px buttons, system sans, monochrome restraint
- **Bun** — https://bun.sh — adjacent TypeScript-runtime brand on a light canvas with a single vivid accent and system-font, performance-forward voice
- **GitHub** — https://github.com — black-on-white prose, grey hairlines, the GitHub-green/-red code-token palette
- **Astro / Shiki** — https://astro.build — docs syntax-highlighting palette inherited directly into Drizzle's code blocks
- **Tailwind CSS** — https://tailwindcss.com — light, hairline-bordered, utility-clean geometry and the near-grayscale-plus-one-hue convention
## 14. Do's and Don'ts
### Do
- **Do** keep the canvas pure white (`#ffffff`) — no tint, no gradient, no off-white wash beyond the faint `#fbfbfc` band
- **Do** use the dark slate `#282b3b` as the single filled "primary button" colour, white text on top
- **Do** treat lime (`#c5f74f`) as a fill or focus-ring colour only — always black or slate text on top
- **Do** carry hierarchy with weight and size, since there is one font family and almost no colour
- **Do** define cards with a light-grey hairline (`#e5e7eb`), not a shadow
- **Do** keep code samples as live, selectable text in `ui-monospace` at 1.6 line-height
- **Do** inherit the Astro/Shiki / GitHub code-token palette (`#414141`, `#22863a`) in code blocks
- **Do** keep section rhythm spacious (64–96px) — whitespace is the design
- **Do** soften headings to `#222222` rather than pure black for long titles
- **Do** limit lime to once or twice per viewport — logo plus, at most, one accent
### Don't
- **Don't** set lime as a text colour on white — it is 1.25:1 and unreadable
- **Don't** add a second brand hue; the identity is monochrome-plus-one-lime
- **Don't** introduce a dark marketing canvas — dark `#282b3b` is for controls, not section backgrounds (dark mode is a docs toggle, not a marketing band)
- **Don't** add drop-shadows to resting cards; structure comes from hairlines
- **Don't** use gradients, glassmorphism, or glow effects anywhere
- **Don't** load a custom webfont — the system-font choice is on-brand and intentional
- **Don't** use serif type anywhere; Drizzle is committedly sans + mono
- **Don't** flood the page with lime fills — one acid-lime pill per view is the ceiling
- **Don't** colour code-block text with the brand lime; code uses the neutral `#414141` token palette
- **Don't** round rectangular surfaces beyond 12px (cards) — keep geometry tight, not pill-soft
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
surface-alt: #f6f6f7
text: #000000
text-heading: #222222
text-muted: #555555
brand (lime, fill-only): #c5f74f
on-brand: #000000
control (dark button): #282b3b
on-control: #ffffff
border: #e5e7eb
code-text: #414141
code-link: #22863a
```
### Example Component Prompts
1. "Create a hero section: pure-white `#ffffff` background, an 80px headline in the
system sans (`ui-sans-serif`) at 700 weight with -0.03em tracking, colour `#000`
(or `#222` if the headline is long), and an 18px subhead in `#555555`. Add a dark
primary button (`#282b3b` fill, white text, 8px radius, 10px 16px padding) saying
'Get Started' and a tinted secondary button 'Documentation' (`#f6f6f7` fill, `#222`
text, 1px `#e5e7eb` border). Below, a tabbed code sample shell."
2. "Design a tabbed code sample: a `#f6f6f7` tab strip with three mono labels
(PostgreSQL / MySQL / SQLite) in 12px `ui-monospace`, active tab black with a 2px
bottom indicator. Below it a code block on `#f6f6f7`, 14px `ui-monospace` text in
`#414141` at 1.6 line-height, token links in `#22863a`, 16px 20px padding, 8px
radius merging with the tab strip above. Add a copy button with `aria-label='Copy code'`."
3. "Build a feature card: white `#ffffff` background, 24px padding, 12px radius, 1px
`#e5e7eb` hairline border, no shadow at rest. Inside: a 20px title in `#000` at 600,
a 16px body in `#555555`. On hover, border shifts to `#d0d3d8` and a faint ambient
shadow (`rgba(17,24,39,0.04)`) fades in over 240ms."
4. "Create a version / dialect badge row: pill badges (radius 9999) on `#f6f6f7` with
1px `#e5e7eb` border, 12px text in `#222222`, 2px 10px padding. One badge is a 'new'
highlight: lime *wash* background `#eefbcf` (not full lime), black text, no border."
5. "Design a focus state demo: any input on white with a 1px `#e5e7eb` border; on focus
the border becomes `#282b3b` and a 3px lime ring `rgba(197,247,79,0.4)` appears at 2px
offset. Note: the lime ring is the only place the brand colour appears in the UI chrome."
6. "Build a community / metrics strip on white: a large 28px metric number in the system
sans at 700 ('33k+'), with a `#f6f6f7` low-alpha chip behind it (radius 8), and a
`#555555` caption 'GitHub stars'. Optional count-up animation on scroll-into-view,
disabled under reduced-motion."
### Iteration Guide
1. **Start on white** — `#ffffff`, not off-white, not grey. The plain canvas is the brand
2. **Make the only filled button slate `#282b3b`** with white text — that is the "primary," not a coloured button
3. **Use lime only as a fill or ring** — black-on-`#c5f74f`, or the `rgba(197,247,79,0.4)` focus ring. Never lime text on white (1.25:1)
4. **Count the lime** — if more than one lime element is visible per viewport (beyond the logo), demote one to slate or the `#eefbcf` wash
5. **Define cards with borders, not shadows** — 1px `#e5e7eb` hairline; shadow only on hover/overlay
6. **Keep type to the system stack** — `ui-sans-serif` + `ui-monospace`; do not introduce a webfont
7. **Let code carry the page** — generous, selectable mono code samples with the `#414141`/`#22863a` token palette are the primary content
8. **Hold the whitespace** — 64–96px between sections; resist the urge to fill empty space with colour or decoration
1. Visual Theme & Atmosphere
Drizzle ORM’s home page opens on plain white — #ffffff, no off-white wash,
no tint — with pure-black body copy (#000) and headings that render a hair
softer at #222222. There is almost no colour on the page. The first
impression is a well-typeset README that happens to be a marketing site:
black text, grey hairlines, generous whitespace, and code samples doing most
of the heavy lifting. This is deliberate. Drizzle’s pitch is “TypeScript-first,
lightweight, no-magic,” and the design refuses to add visual magic where the
product refuses to add runtime magic. The canvas is the substrate; the code is
the hero.
The single piece of chroma is the brand’s signature lime-green serpent
(#c5f74f) — an acid, almost-fluorescent green that lives in the logo and
shows up as the occasional accent fill. It is so saturated and so light that it
fails as text on white (1.25:1 — see §9); the brand never uses it that way.
Lime appears as a fill with black text on top (16.8:1 AAA), as a soft wash
behind a “new” pill, or as the focus-ring colour. It is a punctuation mark, not
a paragraph. A homepage re-probe surfaced chart and sponsor swatches rather
than a single clean accent stripe, which is itself telling: the lime is the
logo’s colour, not a colour Drizzle paints the UI with. We keep #c5f74f as
the documented brand because it is the one hue the identity is built on, but the
working palette a designer reaches for daily is white, black, and slate.
The only “filled” interactive element is the dark control family — a
slate-graphite #282b3b that carries the primary buttons and the occasional
dark band. White text on that slate is a clean 14.0:1. This is the
Vercel/Bun-school move: a near-monochrome light page where the one filled,
high-contrast object is a dark pill, and everything else is defined by thin
grey borders and type weight. There are no drop-shadows at rest, no gradients,
no glassmorphism, no rounded-everything softness — geometry is tight (8px on
controls, 12px on cards) and decoration is essentially zero.
Typographically, Drizzle ships no custom webfont. It uses the platform
system sans (ui-sans-serif) for everything and a system mono
(ui-monospace) for code. That is on-brand: a zero-dependency ORM markets
itself with zero font dependencies. Code blocks adopt the Astro/Shiki token
palette (#414141 text, #22863a for token links), so the docs read with the
same register as a GitHub file view — which is exactly the audience Drizzle is
talking to.
The overall mood is performance and code clarity over flourish. Where most dev brands lean on a dark canvas and a glowing accent, Drizzle inverts it: bright white, black ink, one acid-lime mark, and a single dark control. It is the most restrained, most source-control-native posture in the dev-tools cohort — a brand confident enough to let the code samples be the design.
Key Characteristics
- Plain white canvas (
#ffffff) — no off-white wash, no tint, no gradient - Pure-black body copy (
#000), headings softened to#222222 - Single brand hue: the acid lime-green serpent (
#c5f74f), used as fill only - Lime fails as text on white (1.25:1) — always black-on-lime, never lime-on-white
- One filled control colour: dark slate-graphite
#282b3bwith white text (14.0:1) - System sans (
ui-sans-serif) + system mono (ui-monospace) — zero custom webfont - Code blocks inherit the Astro/Shiki / GitHub token palette (
#414141,#22863a) - Grey hairline borders (
#e5e7eb) define structure; near-zero shadow at rest - Tight geometry — 8px controls, 12px cards — and no decorative effects
- Near-monochrome by design: white + black + slate, lime as punctuation
2. Color Palette & Roles
Primary
- Background (
#ffffff) [→bg]: plain white canvas — the brand’s substrate - Background Subtle (
#fbfbfc) [→bg-subtle]: barely-there off-white for alternating section bands - Surface (
#ffffff) [→surface]: cards sit flush on white, defined by border not fill - Surface Alt (
#f6f6f7) [→surface-alt]: tinted panel, code-tab strip, secondary button fill - Surface Faint (
#f1f2f3) [→surface-faint]: faint chip / low-alpha callout (the~0.27astar-count badge) - Primary Text (
#000000): pure-black body copy
Brand
- Brand Lime (
#c5f74f) [→brand]: the signature serpent green — logo + accent fill - Brand Hover (
#b9ee3c) [→brand-hover]: slightly deeper lime on hover - Brand Pressed (
#a9dd2f) [→brand-pressed]: pressed lime - Brand Soft (
#eefbcf) [→brand-soft]: 20% lime wash for highlight backgrounds and “new” pills - On-Brand Text (
#000000) [→on-brand]: black text on lime fill — 16.8:1 AAA
Dark Control Family
- Control (
#282b3b) [→control]: dark slate-graphite — the primary button and dark bands - Control Hover (
#34384c) [→control-hover]: lifted slate on hover - Control Pressed (
#1f2230) [→control-pressed]: pressed slate - On-Control Text (
#ffffff) [→on-control]: white text on slate — 14.0:1 AAA
Interactive
- Link (
#000000) [→link]: links are black, underline-driven (monochrome system) - Link Hover (
#282b3b) [→link-hover]: hover shifts toward slate - Link Code (
#22863a) [→link-code]: GitHub-green for code-token links (Astro/Shiki--astro-code-token-link) - Selected (
#c5f74f59) [→selected]: 35% lime text-selection wash - Disabled (
#f1f2f3) [→disabled]: disabled background - Disabled Text (
#b0b3b8) [→disabled-text]: disabled text
Neutral Scale
- Text (
#000000): pure-black primary copy — 21:1 AAA - Text Heading (
#222222) [→text-heading]: headings render slightly softened (measured#222) - Text Muted (
#555555) [→text-muted]: secondary copy — 7.5:1 AAA - Text Soft (
#6b7280) [→text-soft]: tertiary / captions — 4.8:1 AA - Text Code (
#414141) [→text-code]: default code-block text (Astro/Shiki--astro-code-color-text) - Text Faint (
#9aa0a6) [→text-faint]: quaternary / placeholder hints
Surface & Borders
- Border (
#e5e7eb) [→border]: standard hairline — light grey on white - Border Soft (
#f0f1f2) [→border-soft]: faintest divider - Border Strong (
#d0d3d8) [→border-strong]: emphasised border on hover/active - Border Dark (
#282b3b) [→border-dark]: dark border on the slate control family
Shadow Colors
Shadows are cool-neutral (rgba(17,24,39,…)) at very low alpha. Drizzle barely
uses elevation — cards rest flat and are defined by their hairline border;
shadow appears only on hover and in overlays. Depth never carries colour:
- Ambient (
rgba(17,24,39,0.04)): barely-there resting / hover shadow - Standard (
rgba(17,24,39,0.08)): card hover lift - Elevated (
rgba(17,24,39,0.12)): popover, dropdown - Deep (
rgba(17,24,39,0.16)): modal
Semantic
- Success (
#22863a): GitHub-green — reuses the code-link hue - Success Bg (
#e9f6ec): pale green surface - Warning (
#b45309): amber-brown — the only warm tone outside lime - Warning Bg (
#fdf3e7): pale amber surface - Danger (
#cf222e): GitHub-flavoured red - Danger Bg (
#fbeaec): pale red surface - Info (
#282b3b): info reuses the slate control colour - Info Bg (
#f6f6f7): neutral info surface
3. Typography Rules
Font Family
- Display & Body:
ui-sans-serif— the platform system sans (San Francisco on Apple, Segoe UI on Windows, Roboto on Android/ChromeOS). Drizzle ships no custom webfont, matching its zero-dependency ethos. - Mono:
ui-monospace— the platform system mono (SF Mono / Menlo / Consolas / Liberation Mono). Used for all code samples, inline code, and technical labels. - OpenType: standard
kern/ligaon sans;liga/calton mono for clean code rendering. No stylistic-set experiments — Drizzle takes the system default rendering as-is.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | display | 80 | 700 | 1.0 | -0.03em | hero headline only |
| display-lg | display | 56 | 700 | 1.05 | -0.02em | section opener |
| h1 | display | 40 | 700 | 1.1 | -0.018em | page title |
| h2 | display | 32 | 600 | 1.2 | -0.012em | feature heading (measured #222, 600) |
| h3 | display | 24 | 600 | 1.25 | -0.005em | sub-feature |
| h4 | body | 20 | 600 | 1.3 | 0 | card title |
| body-lg | body | 18 | 400 | 1.55 | 0 | hero supporting copy |
| body | body | 16 | 400 | 1.55 | 0 | default body (measured 16/400) |
| body-sm | body | 14 | 400 | 1.5 | 0 | dense blocks, metadata |
| label | body | 13 | 500 | 1.4 | 0 | form label, field name |
| caption | body | 12 | 500 | 1.4 | 0.02em | badge, footnote |
| button | body | 14 | 500 | 1.0 | 0 | button text |
| nav-link | body | 14 | 500 | 1.2 | 0 | top nav, sidebar |
| code-body | mono | 14 | 400 | 1.6 | 0 | code blocks |
| code-inline | mono | 13 | 500 | 1.4 | 0 | inline code in prose |
| code-label | mono | 12 | 500 | 1.3 | 0.02em | tab label, dialect name |
| metric | display | 28 | 700 | 1.1 | -0.01em | star count, benchmark number |
Principles
- System fonts only: no webfont request, no FOUT/FOIT, no font budget — the type story is “the OS already has good defaults; we use them.”
- Weight does the hierarchy work: with no colour and one family, weight (400 → 500 → 600 → 700) and size carry the entire hierarchy.
- Tight display tracking: -0.012em to -0.03em compresses headlines for a confident, modern dev-marketing feel; body stays at 0.
- Headings soften to
#222, not#000: the measured h2 colour is#222222, a subtle softening that keeps long headlines from feeling heavy. - Mono carries all code: 14px
ui-monospaceat 1.6 line-height — comfortable for multi-line query examples, the page’s primary content. - Code-token palette inherited from Astro/Shiki: code text
#414141, token links#22863a— the docs read like a syntax-highlighted source file. - No serif anywhere: Drizzle is committedly sans + mono; there are no editorial-serif moments.
- Body at 16px, not 15: full system-default reading size — the brand prioritises legibility over dense-tooling compression.
4. Component Stylings
Buttons
button-primary — Dark slate control
- Background:
#282b3b - Text:
#ffffffat 14/500 - Padding: 10px 16px
- Radius: 8
- Border: none
- Hover: bg →
#34384c - Active: bg →
#1f2230 - Focus: 3px lime ring
rgba(197,247,79,0.4), 2px offset - Use: primary CTA — “Get Started”, “Documentation”
button-secondary — Tinted neutral
- Background:
#f6f6f7 - Text:
#222222at 14/500 - Padding: 10px 16px
- Radius: 8
- Border: 1px solid
#e5e7eb - Hover: bg →
#f1f2f3, border →#d0d3d8 - Use: secondary action — “GitHub”, version pill, “Examples”
button-brand — Lime accent (rare)
- Background:
#c5f74f - Text:
#000000at 14/600 - Padding: 10px 16px
- Radius: 8
- Border: none
- Hover: bg →
#b9ee3c - Active: bg →
#a9dd2f - Use: high-emphasis accent — used sparingly, never more than one per view. Black-on-lime only; never lime text.
button-ghost — Bare
- Background: transparent
- Text:
#000000at 14/500 - Padding: 10px 16px
- Radius: 8
- Border: 1px solid transparent
- Hover: bg →
#f6f6f7 - Use: tertiary / nav-adjacent action
Cards
card-default
- Background:
#ffffff - Padding: 24px
- Radius: 12
- Border: 1px solid
#e5e7eb - Shadow: none at rest
- Hover: border →
#d0d3d8, shadow → ambient - Use: feature card, dialect card, integration card
card-tinted — Code-sample shell
- Background:
#f6f6f7 - Padding: 24px
- Radius: 12
- Border: none
- Use: code-sample wrapper, comparison panel, callout block
Badges / Tags / Pills
badge-default
- Background:
#f6f6f7 - Text:
#222222at 12/500 - Padding: 2px 10px
- Radius: pill (9999)
- Border: 1px solid
#e5e7eb - Use: version tag, dialect pill, star count (“33k+”)
badge-brand — Lime wash highlight
- Background:
#eefbcf(20% lime wash, not full lime) - Text:
#000000at 12/500 - Padding: 2px 10px
- Radius: pill
- Border: none
- Use: “new”, “beta”, highlight pill — soft wash keeps the acid lime calm at small sizes
Inputs / Forms
input-text
- Background:
#ffffff - Text:
#000000at 14/400 - Placeholder:
#9aa0a6 - Padding: 8px 12px
- Radius: 8
- Border: 1px solid
#e5e7eb - Focus: border →
#282b3b, ring 3px solidrgba(197,247,79,0.4) - Use: docs search, dialect filter
Navigation
nav-link
- Background: transparent
- Text:
#555555at 14/500 - Padding: 8px 12px
- Hover: text →
#000000 - Active: text →
#000000+ 2px underline - Use: top nav, docs sidebar
Decorative / Code
code-block
- Background:
#f6f6f7(or#ffffffwith border in tighter contexts) - Text:
#414141at 14/400ui-monospace, 1.6 line-height - Token links:
#22863a(GitHub-green) - Padding: 16px 20px
- Radius: 8
- Tab strip:
#f6f6f7withcode-labelmono tabs (dialect names: PostgreSQL / MySQL / SQLite) - Use: the page’s primary content — query examples, schema definitions
inline-code
- Background:
#f6f6f7 - Text:
#000000at 13/500ui-monospace - Padding: 2px 6px
- Radius: 4
- Use:
codespans within prose
logo-mark — The serpent
- The lime-green (
#c5f74f) serpent is the one place full-saturation lime appears - Renders on white at intrinsic size; never recoloured, never gradient-filled
5. Layout Principles
Spacing System
- Base unit: 4px
- Scale: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96
- Density observation: Drizzle is moderate-to-spacious — generous whitespace between sections (64–96px), comfortable padding inside cards (24px), but content-dense within code samples where line-height (1.6) keeps long queries readable. The whitespace is the design.
Grid & Container
- Page width: 1280px max
- Prose / docs width: 720px (long-form documentation and marketing body)
- Header height: 64px
- Hero treatment: white-canvas hero with the headline, a one-line subhead, two buttons (dark primary + tinted secondary), and a tabbed code sample below
- Feature grid: 3-col at desktop, 2-col at tablet, 1-col at mobile
Whitespace Philosophy
- Whitespace is the primary structural device — with almost no colour and no shadow, empty space and hairline borders carry the layout
- Sections breathe at 64–96px; the page never feels crowded
- Code samples are the densest moment on the page; everything around them is air
Section Cadence
- Hero (white + tabbed code sample) → feature grid → dialect/integration cards → comparison / code-heavy section → community (stars, sponsors) → footer
- Alternating bands use
#fbfbfcor#f6f6f7at most — never a dark band on the marketing page (dark#282b3bis reserved for controls) - The lime appears at most once or twice per viewport — logo, plus maybe one accent pill or focus ring
6. Shapes & Radius Scale
| Tier | Px | Use |
|---|---|---|
| Micro | 2 | inline chips, tight tokens |
| Standard | 4 | inline code, small badges |
| Comfortable | 8 | buttons, inputs, code blocks |
| Relaxed | 12 | cards |
| Featured | 16 | hero shells, large panels |
| Pill | 9999 | badges, version pills, star count |
Radius is consistent and modest — Drizzle never goes fully rounded on
rectangular surfaces. The 8px control radius and 12px card radius are the
workhorses; pills are reserved for tag-like metadata. Compound radii are rare;
code-tab strips merge with the block below by dropping the bottom radius
(8 8 0 0).
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, no border | hero copy, prose on white |
| 1 | 1px solid #e5e7eb border, no shadow | resting cards, code blocks |
| 2 | 1px border + ambient shadow (0.04) | card hover |
| 3 | standard shadow (0 4px 12px -2px, 0.08) | sticky header on scroll |
| 4 | elevated shadow (0 12px 28px -8px, 0.12) | dropdown, popover, tooltip |
| 5 | deep shadow (0 24px 48px -12px, 0.16) | modal, command palette |
Shadow Philosophy: Drizzle is a near-flat brand. Cards rest with no
shadow at all — they are defined entirely by a light-grey hairline border on
white. Elevation appears only when something genuinely floats (dropdown, modal)
or on hover, and even then the shadow is cool-neutral (rgba(17,24,39,…)) and
very low-alpha (0.04–0.16). Depth never carries colour — the lime is foreground
brand, never a glow. This flat-on-white, border-defined approach is the GitHub /
Tailwind register: structure through hairlines, not drop-shadows.
8. Interaction & Motion
Easing
- Standard:
cubic-bezier(0.4, 0, 0.2, 1)— default for hovers and lifts - Decelerate:
cubic-bezier(0, 0, 0.2, 1)— entering overlays, tooltips
Durations
- Fast (150ms): hover, focus, button press
- Standard (240ms): card border/shadow lift, dropdown open
- Slow (320ms): modal enter, code-sample tab crossfade
Per-Component Recipes
- Button hover: background colour transitions over 150ms; no scale, no lift
- Card hover: border
#e5e7eb→#d0d3d8and ambient shadow fade in over 240ms - Code-tab switch: crossfade the sample body over 240–320ms when switching dialect (PostgreSQL / MySQL / SQLite)
- Link hover: underline appears / text shifts black → slate over 150ms
- Focus: 3px lime ring
rgba(197,247,79,0.4)appears instantly on keyboard focus - Star count / metric: optional count-up animation on first scroll into view
Page Transitions
- Default: opacity-only fade over 320ms — no slide, no parallax. The brand’s motion is as restrained as its colour.
Reduced Motion
When prefers-reduced-motion: reduce is set:
- Code-sample tab crossfades become instant swaps
- Card hover lifts removed (border colour change retained for affordance)
- Metric count-up animations disabled (final value shown immediately)
- All transitions reduce to opacity
9. Accessibility & A11y
Contrast Pairs
- Black
#000on white#ffffff: 21.0:1 (AAA — maximum) - Heading
#222222on white: 15.9:1 (AAA) - White on slate control
#282b3b: 14.0:1 (AAA) - Black on lime brand
#c5f74f: 16.8:1 (AAA) — the only safe way to use lime - Slate
#282b3bon lime#c5f74f: 11.2:1 (AAA) — alternate on-brand pairing - Muted
#555555on white: 7.5:1 (AAA) - Code text
#414141on white: 10.2:1 (AAA) - Soft
#6b7280on white: 4.8:1 (AA at body sizes) - Code link
#22863aon white: 4.6:1 (AA at body sizes)
⚠️ Lime is never a text colour.
#c5f74fon white is 1.25:1 — far below any threshold. The brand always uses lime as a fill (black or slate text on top) or as the focus-ring colour. Never set lime ascolor:on a white surface.
Focus Indicators
- Default: 3px solid
rgba(197,247,79,0.4)lime ring, 2px offset - Inputs: focus border →
#282b3b+ 3px lime ring - The lime ring is the one place the brand colour earns its keep in the UI — high-visibility against both white surfaces and dark controls
ARIA Patterns
- Code-tab group:
role="tablist"witharia-selectedon the active dialect tab; arrow-key navigation between PostgreSQL / MySQL / SQLite - Dialog / command palette:
aria-labelledby+aria-describedby; trap focus; ESC to close - Search combobox: standard listbox pattern with
aria-activedescendant - Version / star badges: include text labels; never colour-only meaning
Keyboard Navigation
- Tab order follows visual order
- Skip-link at page top
- Enter/Space activates buttons and tabs
- Cmd/Ctrl+K opens docs search
- Arrow keys move within the dialect tablist
Screen Reader Hints
- The lime serpent logo carries
alt="Drizzle ORM" - Code blocks use
<pre><code>semantics; copy-button hasaria-label="Copy code" - Star count exposes a label (“33k+ GitHub stars”), not a bare number
Reduced Motion
prefers-reduced-motion: reduce honored — see §8.
10. Responsive Behavior
Breakpoints
| Name | Min Width | Use |
|---|---|---|
| Mobile | — | default, 1-col |
| Tablet | 640 | 2-col grids |
| Desktop | 1024 | 3-col grids, sidebar docs |
| Wide | 1280 | max page width |
| Ultra | 1536 | hero-only breathing room |
Touch Targets
- Minimum 44×44px for primary controls and tabs
- Dialect tabs expand hit-area on touch even where the visual label is compact
Collapsing Strategy
- Nav: collapses to hamburger ≤ 768px; docs sidebar becomes a drawer
- Feature grid: 3-col → 2-col @ 1024 → 1-col @ 640
- Hero: display-hero (80px) reduces to ~40px @ 640
- Code samples: scroll horizontally on overflow rather than wrap query syntax
- Dialect tabs: stay as a tablist; scroll horizontally if they overflow
Image Behavior
- The serpent logo is SVG, scales crisp at any size
- Code samples are live text, never images — they reflow and remain selectable
- Integration logos lock at intrinsic size in a grey-on-white grid
11. Content & Voice
Tone
Technical, precise, performance-forward, and quietly confident. Drizzle writes for TypeScript developers who want SQL they can read, not an ORM that hides the database behind magic. The copy is direct and benefit-led — “TypeScript-first, lightweight, no-magic” — and it leans on code samples to make its case rather than adjectives. No hype, no exclamation marks, no enterprise jargon; the voice matches the design’s restraint.
Microcopy Patterns
- Button verbs: “Get Started”, “Documentation”, “View on GitHub”, “Examples” — short, literal, no marketing flourish
- Section headers: feature-statement style (“Everything you expect from an ORM. And more.”) — plain claims backed by code below
- Error message recipe:
[what failed]: [why]— e.g., “Migration failed: column already exists” - Empty states: “No results. [CTA: Browse the docs]“
CTA Verb Conventions
- Top-level: “Get Started”
- Docs: “Documentation”, “Read the docs”
- Source: “View on GitHub”, “Star us”
- Examples: “Examples”, “See it in action”
12. Dark Mode & Theming
Drizzle is light by default for marketing — the white-canvas, black-ink,
lime-mark identity is the brand’s public face. The documentation, however,
offers a dark theme toggle (a theme-context selector with localStorage
persistence was detected on the page), so the brand is optional, not
light-only.
In dark mode the inversion is straightforward because the palette is nearly grayscale:
bg:#ffffff→#0d0e12(near-black, with the same cool undertone as the slate control)surface:#ffffff→#16171dsurface-alt:#f6f6f7→#1d1f27text:#000000→#ededf0text-muted:#555555→#9aa0a6border:#e5e7eb→#2a2c36control:#282b3b→#ededf0(the dark button inverts to a light pill in dark mode)on-control:#ffffff→#0d0e12brandstays#c5f74f— the lime works on both white and near-black, and gains even more punch on the dark canvas (lime on#282b3bis 11.2:1 AAA)
The lime is the constant across both themes; it is the only colour that never changes. Everything else is a grayscale inversion.
13. Lineage & Influences
Drizzle’s design is GitHub-README minimalism crossed with the Vercel/Bun school
of dark-control-on-light-canvas dev marketing. The page is aggressively
monochrome — pure white, pure-black copy, a single slate-graphite control colour
— and the entire chromatic identity is carried by one hue: the lime-green
serpent logo (#c5f74f). That restraint is the argument. Drizzle markets
itself as “TypeScript-first, lightweight, no-magic,” and the visual language
refuses to add magic where the product refuses to: no gradients, no
glassmorphism, no decorative colour, just clean system type, generous
whitespace, and well-typeset code.
The type story reinforces the ethos — Drizzle ships no custom webfont, using
the platform ui-sans-serif and ui-monospace, the same way it ships a
lightweight, low-dependency runtime. Code blocks inherit the Astro/Shiki token
palette (text #414141, GitHub-green links #22863a), which gives the docs the
register of a syntax-highlighted source file — exactly the audience Drizzle
talks to. Where Bun adds a warm cream canvas and a pink accent, and Biome
commits to a confident blue, Drizzle stakes out the cleanest, most
code-forward, near-zero-chroma corner of the dev-tools cohort: white, black,
slate, and one acid lime.
- Vercel — https://vercel.com — dark-control-on-white-canvas dev-marketing template; 8px buttons, system sans, monochrome restraint
- Bun — https://bun.sh — adjacent TypeScript-runtime brand on a light canvas with a single vivid accent and system-font, performance-forward voice
- GitHub — https://github.com — black-on-white prose, grey hairlines, the GitHub-green/-red code-token palette
- Astro / Shiki — https://astro.build — docs syntax-highlighting palette inherited directly into Drizzle’s code blocks
- Tailwind CSS — https://tailwindcss.com — light, hairline-bordered, utility-clean geometry and the near-grayscale-plus-one-hue convention
14. Do’s and Don’ts
Do
- Do keep the canvas pure white (
#ffffff) — no tint, no gradient, no off-white wash beyond the faint#fbfbfcband - Do use the dark slate
#282b3bas the single filled “primary button” colour, white text on top - Do treat lime (
#c5f74f) as a fill or focus-ring colour only — always black or slate text on top - Do carry hierarchy with weight and size, since there is one font family and almost no colour
- Do define cards with a light-grey hairline (
#e5e7eb), not a shadow - Do keep code samples as live, selectable text in
ui-monospaceat 1.6 line-height - Do inherit the Astro/Shiki / GitHub code-token palette (
#414141,#22863a) in code blocks - Do keep section rhythm spacious (64–96px) — whitespace is the design
- Do soften headings to
#222222rather than pure black for long titles - Do limit lime to once or twice per viewport — logo plus, at most, one accent
Don’t
- Don’t set lime as a text colour on white — it is 1.25:1 and unreadable
- Don’t add a second brand hue; the identity is monochrome-plus-one-lime
- Don’t introduce a dark marketing canvas — dark
#282b3bis for controls, not section backgrounds (dark mode is a docs toggle, not a marketing band) - Don’t add drop-shadows to resting cards; structure comes from hairlines
- Don’t use gradients, glassmorphism, or glow effects anywhere
- Don’t load a custom webfont — the system-font choice is on-brand and intentional
- Don’t use serif type anywhere; Drizzle is committedly sans + mono
- Don’t flood the page with lime fills — one acid-lime pill per view is the ceiling
- Don’t colour code-block text with the brand lime; code uses the neutral
#414141token palette - Don’t round rectangular surfaces beyond 12px (cards) — keep geometry tight, not pill-soft
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
surface-alt: #f6f6f7
text: #000000
text-heading: #222222
text-muted: #555555
brand (lime, fill-only): #c5f74f
on-brand: #000000
control (dark button): #282b3b
on-control: #ffffff
border: #e5e7eb
code-text: #414141
code-link: #22863aExample Component Prompts
-
“Create a hero section: pure-white
#ffffffbackground, an 80px headline in the system sans (ui-sans-serif) at 700 weight with -0.03em tracking, colour#000(or#222if the headline is long), and an 18px subhead in#555555. Add a dark primary button (#282b3bfill, white text, 8px radius, 10px 16px padding) saying ‘Get Started’ and a tinted secondary button ‘Documentation’ (#f6f6f7fill,#222text, 1px#e5e7ebborder). Below, a tabbed code sample shell.” -
“Design a tabbed code sample: a
#f6f6f7tab strip with three mono labels (PostgreSQL / MySQL / SQLite) in 12pxui-monospace, active tab black with a 2px bottom indicator. Below it a code block on#f6f6f7, 14pxui-monospacetext in#414141at 1.6 line-height, token links in#22863a, 16px 20px padding, 8px radius merging with the tab strip above. Add a copy button witharia-label='Copy code'.” -
“Build a feature card: white
#ffffffbackground, 24px padding, 12px radius, 1px#e5e7ebhairline border, no shadow at rest. Inside: a 20px title in#000at 600, a 16px body in#555555. On hover, border shifts to#d0d3d8and a faint ambient shadow (rgba(17,24,39,0.04)) fades in over 240ms.” -
“Create a version / dialect badge row: pill badges (radius 9999) on
#f6f6f7with 1px#e5e7ebborder, 12px text in#222222, 2px 10px padding. One badge is a ‘new’ highlight: lime wash background#eefbcf(not full lime), black text, no border.” -
“Design a focus state demo: any input on white with a 1px
#e5e7ebborder; on focus the border becomes#282b3band a 3px lime ringrgba(197,247,79,0.4)appears at 2px offset. Note: the lime ring is the only place the brand colour appears in the UI chrome.” -
“Build a community / metrics strip on white: a large 28px metric number in the system sans at 700 (‘33k+’), with a
#f6f6f7low-alpha chip behind it (radius 8), and a#555555caption ‘GitHub stars’. Optional count-up animation on scroll-into-view, disabled under reduced-motion.”
Iteration Guide
- Start on white —
#ffffff, not off-white, not grey. The plain canvas is the brand - Make the only filled button slate
#282b3bwith white text — that is the “primary,” not a coloured button - Use lime only as a fill or ring — black-on-
#c5f74f, or thergba(197,247,79,0.4)focus ring. Never lime text on white (1.25:1) - Count the lime — if more than one lime element is visible per viewport (beyond the logo), demote one to slate or the
#eefbcfwash - Define cards with borders, not shadows — 1px
#e5e7ebhairline; shadow only on hover/overlay - Keep type to the system stack —
ui-sans-serif+ui-monospace; do not introduce a webfont - Let code carry the page — generous, selectable mono code samples with the
#414141/#22863atoken palette are the primary content - Hold the whitespace — 64–96px between sections; resist the urge to fill empty space with colour or decoration
Drop drizzle into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add drizzle 2 · ship landing page
npx agentkit init --design drizzle