light · sans · structured
DESIGN.md inspired by Coda
White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts.
By webdesignhot · coda.io ↗
$ npx @webdesignhot/design-md add coda
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. CodeRabbit Near-black AI-review canvas — warm CodeRabbit orange accent, Plus Jakarta Sans, sharp 4px white CTAs. CodeSandbox Pale-lime electricity on a Cognition Research-lab monochrome — warm off-white, grotesk display, serif body, sharp 0px black. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Convex Warm cream canvas, near-black ink, GT America — a reactive backend that dresses like a broadsheet. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Craft Warm-white canvas, an Untitled Serif display over Untitled Sans body, near-black ink, and full-pill CTAs — a notes app dressed as a fine-press editorial. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. CVS Health CVS-red heart on a clean white canvas — custom CVS Sans, near-black ink, trustworthy healthcare clarity. Databricks Signature Databricks Red Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. dbt Labs dbt orange Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deloitte Big-4 gravitas — pure-white canvas, true-black ink, Open Sans at light 300, and the signature green dot. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Drizzle ORM Near-monochrome white canvas, dark #282b3b controls, and one signature lime-green serpent (#c5f74f) — a no-magic TypeScript ORM. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. dYdX Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Emirates Custom-serif luxury — Emirates red on light grey, gold accents, Fly Better editorial calm. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Everlane Pure white canvas, Maison Neue Book, near-black ink — radical-transparency DTC minimalism. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. fal Pure white canvas, focal display at 120px, and near-black #252527 CTAs — generative-AI inference at editorial scale. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. GitLab Light DevOps-platform marketing — GitLab Sans, near-black ink, oversized 96px headlines, tanuki-orange accent. Gitpod Editorial dev-tool calm — light canvas, near-black navy text, ABC Diatype sans + Martina Plantijn serif, 8px radius. Glean White enterprise canvas, near-black indigo headlines, and one electric Glif Near-black Manrope on near-white, anchored by one confident green CTA — a playful creative-agent canvas. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Graphite Near-black developer canvas — Matter type, near-white ink, one clean blue, 8px CTAs. Graza Squeeze-bottle olive-oil DTC — quirky GT Alpina Typewriter on peachy-cream, olive type, chartreuse-lime CTAs at 32px. Groq Warm off-white canvas, light-weight Space Grotesk, and a single hot `#f43e01` orange — speed-obsessed AI inference. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. Gumroad Hot pink `#ff90e8` on cream, ABC Favorit at 96px, hard black borders and offset shadows — neo-brutalist creator commerce. Gymshark Pure white canvas, black ink, Montserrat bold display over Roboto body — every CTA a fully-rounded 56px pill. Harvey Counsel-grade dark — warm near-black canvas, custom serif display, ivory CTA, sharp 4px monochrome. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. HEY Warm-white canvas, deep purple-ink, and a crayon-box of saturated pastels — opinionated email dressed as a friendly poster. HeyGen Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. HubSpot Warm coral-orange (#FF7A59) on a near-white canvas, a humanist sans set generous and round, and a brand voice that turned inbound marketing into a methodology. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. Hume AI Warm cream canvas, custom Fellix type, and near-black pill CTAs — voice-AI research presented with humanist calm rather than tech coldness. Hyperliquid Near-black IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. IKEA Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale. Inngest Durable workflows on a near-black canvas — Whyte display, muted gold CTAs, sharp 0px edges. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Intercom Cream canvas, near-black Saans display, and electric-cobalt JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. Jupiter Jupiter lime on near-black — Solana DeFi aggregator with Inter, a cat-in-space mascot, and playful pill-CTA energy. Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Klarna Klarna PINK `#ffa8cd` on white, near-black navy `#0b051d` ink, Klarna Title at billboard scale. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lambda Near-black Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Ledger White canvas, Inter at rest, and one unmistakable Ledger Orange on full-pill CTAs — security made calm. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. Lemon Squeezy A dark hero with white Circular display, signature lemon-yellow Leonardo.Ai A pure-black cinematic canvas where ufficioDisplay headlines and white full-pill CTAs frame generative imagery — a film studio's title card, Canva-owned. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. Liquid Death Black canvas, condensed all-caps Acumin Pro, stark black-and-white — heavy-metal brutalism for canned water. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Loom White canvas, Charlie Display sans, and a confident Atlassian blue pill — async video that feels like a calm, friendly workspace. LottieFiles White-canvas animation studio — DM Sans display at 96px, Inter body, near-black text, one signature teal #019d91. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Lowe's Signature navy blue on white canvas — residential-DIY warmth rendered as big-box retail. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Luma AI A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill. Magic Frontier-research minimalism — white canvas, Aeonik display, Suisse Intl body, near-black ink, one radix-blue accent. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mejuri Monochrome luxury — white canvas, near-black ink, Syndicat Grotesk small caps and a Simon Mono accent. The jewelry photography does all the color work. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. MetaMask Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Monzo Hot Coral `#ff4f40` on bright white, MonzoSans humanist geometry, and a transparent challenger-bank warmth. Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Netlify White canvas, dark hero, Figtree-heavy 800 display — electric-teal pill CTAs, indigo links. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nubank Roxo #8d0de3 as the whole brand — white nuSansDisplay on dark purple, 999px pill CTAs, anti-bank warmth. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Obsidian Near-black canvas, near-white text, a single electric-purple CTA and a crystal mark — a local-first knowledge base that looks like the editor it ships. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. On Swiss-engineered monochrome — true-black ink on white, custom On sans, bold 700 heads and 40px full-pill CTAs. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Our Place Warm-heritage cookware DTC — Cheltenham serif at light 300 on a cream canvas, terracotta SHOP NOW CTAs, Plaid body. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paddle Merchant-of-record calm — condensed serif headlines on a near-black canvas with warm cream and sand CTAs. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Penpot Open-source design-and-code platform — dark hero, Work Sans display, mint-green action surface on a white canvas. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Picoko Warm-white canvas, weight-900 Outfit, and one blazing pink — product photography reimagined in seconds. Pika A cream-canvas AI video studio in custom Telka type, with peach and black pill CTAs. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Pinterest Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action. Pitch Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. Prisma White-paper canvas, navy ink, a single confident teal — the type-safe data layer dressed as documentation. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Rainbow White canvas, SF Pro Rounded Black at 96px, and a pink-orange-blue-purple rainbow — the friendliest Ethereum wallet onchain. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Recraft A jet-black studio where ABC Gravity Condensed slams the headline at weight 900 and a single electric-lime CTA does all the shouting. Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Relume Monochrome editorial — warm off-white, near-black, and oversized regular-weight display for an AI website builder. Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Revolut Dark Aeonik Pro hero, white Inter content, near-black `#191c1f` ink, fully-pill CTAs and gradient-accented fintech sleekness. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Ritual Visible-supply-chain wellness — white lab canvas, Ritual Navy #142b6f everywhere, CircularXX, 25px rounded CTAs, warm yellow as the one accent. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Robinhood Chartreuse `#CCFF00` lime on a black `#000` canvas, Martina Plantijn serif headlines paired with Capsule Sans Text — financial-editorial register, not tech-app sans. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Scale AI White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Shortwave A dark AI-email canvas with Poppins display weight and one electric blue — Inbox rebuilt by the people who built it. Sierra Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. SKIMS Nude-neutral minimal luxury — cream canvas, dark photographic hero, warm near-black #2d2a26, sharp 0px. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. Snowflake Deeper cyan Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. Sourcegraph Near-black code-intelligence canvas — PolySans display, coral-red accent, big quiet headlines. Southwest Airlines Heart-warm low-cost airline — Southwest Sans on light grey, yellow CTA voltage with navy ink, sharp 2px corners. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spline Pure-black 3D-design canvas with electric-blue CTAs and a playful multi-color accent set — the browser becomes the viewport. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Stability AI A near-black studio floor where Archivo headlines run light and a single lavender pill carries the only colour. StackBlitz Electric blue `#1574ef` on a graphite `#1c1f25` canvas — the in-browser IDE that built Bolt. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Storybook Open-source frontend workshop — white canvas, Nunito Sans, dark hero band, and the signature coral-pink brand mark. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Synthesia A white enterprise canvas where Basier Square headlines run near-black navy and a single indigo-blue pill carries every action. T-Mobile T-Mobile magenta (#E20074) dominates a near-white canvas — Un-carrier loudness in TeleNeo display weight. Tailscale Warm-light approachable-technical — off-white canvas, near-black Inter, brick-red accent. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Temporal Near-black engineering canvas, Aeonik at hairline-light 300, signature indigo CTA — durable-execution gravity for distributed-systems people. Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The Home Depot Signature orange on white, Helvetica bold — hardware-aisle signage as a web storefront. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. Tinybird Near-black developer canvas lit by one bright mint-green — managed ClickHouse with sharp, zero-radius CTAs. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Todoist Warm-white canvas, Graphik sans, signature Todoist-red CTA — a task manager that feels calm, friendly, and quietly productive. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Trigger.dev Background jobs in the dark — Satoshi on near-black, one electric lime for action. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Udio A pitch-black stage with near-white Innovator display type and a single magenta-pink spotlight — a recording console reimagined as a creative canvas. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. Upstash Serverless data, daylight calm — a pale-grey canvas, deep green-black type, and one electric Upstash green. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". Vapi Near-black developer canvas lit by a signature lime and a playful multi-color set — Avantt display at 80px over Season Sans body, cream text, r12 CTAs. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Visa Bright-blue + golden-yellow payment-rail confidence — saturated `#1434CB` primary, ceremonial `#FCC015` yellow on hero pill CTAs, pill geometry throughout, custom visa-font-latin in light/regular weights. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Vuori Coastal-California performance calm — Aktiv Grotesk on pure white, warm near-black `#333333` ink, restrained small type (28px h1), photography-led, sharp 0px corners. Premium-athletic that never raises its voice. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warby Parker Friendly-premium DTC eyewear — white canvas, bright blue + deep navy, fully pill CTAs. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Wayfair Near-white canvas, ink-black type, photographic product cards — editorial-light home retail at marketplace scale. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. Windsurf Cream `#f6eede` canvas, dark heroes, Tomato Grotesk at light 300, sharp `#34e8bb` mint DOWNLOAD. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Wispr Flow Pale lemon-cream paper, EB Garamond at 120px, and a lavender download pill — voice dictation that dresses like a literary journal. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. xAI White canvas, Universal Sans, a stark near-black pill, and warm-grey terminal panels — frontier minimalism. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zed Warm paper-light canvas, IBM Plex Serif headlines at light weight, one electric-blue download button — a code editor's site that reads like a typesetter's page. Zoom Zoom Blue `#0B5CFF` on white — geometric sans wordmark, Workplace-era AI Companion friendly-corporate register. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#ffffff - surface
#ffffff - surface-soft
#fafafa - surface-muted
#f0f0f0 - text AAA · 16.1
#212121 - text-muted
#444444 - text-faint AA · 4.9
#717171 - brand AA · 4.8
#0066ff - brand-hover
#0052cc - brand-soft
#e6efff - cta-primary
#000000 - on-brand
#ffffff - accent
#f8ad40 - accent-cream
#fff6ec - accent-callout
#ffe6c9 - accent-warm
#f0e5dc - block-green
#006838 - border — · 1.3
#e3e3e3 - border-soft
#ededed - border-strong — · 1.6
#cccccc - success
#1a7f4b - success-bg
#e7f4ec - warning
#9a6400 - warning-bg
#fff3df - danger
#c0392b - danger-bg
#fbeae8 - info
#0066ff - info-bg
#e6efff
Ship faster than ever.
display-hero Calibre-R 72px w700 -0.02em
Ship faster than ever.
display-lg Calibre-R 56px w700 -0.018em
Ship faster than ever.
h1 Calibre-R 48px w700 -0.015em
Built for teams that ship.
h2 Calibre-R 38px w700 -0.012em
A complete kit
h3 Calibre-R 28px w600 -0.008em
The quick brown fox jumps over the lazy dog.
h4 Calibre-R 22px w600 -0.004em
The quick brown fox jumps over the lazy dog.
h5 Inter 18px w600 0
The quick brown fox jumps over the lazy dog.
body-lg Inter 18px w400 0
The quick brown fox jumps over the lazy dog.
h6 Inter 16px w600 0
The quick brown fox jumps over the lazy dog.
body Inter 16px w400 0
The quick brown fox jumps over the lazy dog.
body-ui Inter 14px w400 0
The quick brown fox jumps over the lazy dog.
body-sm Inter 13px w400 0
OUR DESIGN SYSTEM
label Inter 13px w500 0.01em
npx @webdesignhot/design-md add stripe
code ui-monospace 13px w400 0
OUR DESIGN SYSTEM
caption Inter 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 → accent
- muted → text-muted
- border → border
- ring → brand
Coda's marketing surface belongs to the post-Notion document-workspace lineage: a paper-white canvas treated as a literal page, near-black text that stops short of pure `#000`, and a single confident accent rather than a multi-hue palette. Calibre — the Klim Type Foundry geometric-humanist sans used by Dropbox and a generation of SaaS brands — carries the display register, while Inter handles body and UI text; this Calibre-display / Inter-body pairing is the contemporary productivity-tool dialect (Linear, Vercel, and Stripe all sit in adjacent territory). The action colour is one decisive `#0066ff` blue, a Stripe-style trust-via-restraint move that reserves saturation for links, focus rings, and interactive emphasis. Where Coda diverges is the document-block warmth: callouts render in cream-to-peach (`#fff6ec` → `#ffe6c9`) with an amber highlight (`#f8ad40`) and a decorative brand green (`#006838`) — the visual residue of Coda's actual product, where doc blocks, callouts, and highlights are first-class primitives. Primary CTAs are solid black `#000000` pills, a confident high-contrast choice that keeps the blue free for navigation and content links.
- Defined the document-workspace marketing register — paper-white canvas, near-black text, single accent — that Coda competes within.
- Calibre display face — the geometric-humanist sans that gives the headlines their confident, neutral-modern voice.
- Body and UI typeface — the screen-optimised workhorse sans underpinning legibility at small sizes.
- Single-blue, trust-via-restraint chromatic discipline — one saturated action colour, no hue inflation.
- Contemporary productivity-SaaS register — Calibre/Inter-class type, hairline borders, white-on-white tonal depth.
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: Coda
tagline: 'White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts.'
updated_at: 2026-05-29T21:44:57.076Z
published_at: 2026-05-29T21:44:57.076Z
author: webdesignhot
source_url: https://coda.io
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [light, sans, structured]
preview_swatch: ['#ffffff', '#0066ff', '#f8ad40']
related: [notion, linear, stripe]
description: 'Coda''s marketing surface is the all-in-one document workspace made literal — a paper-white `#ffffff` canvas, Calibre as the confident display face over Inter for body, and near-black `#212121` text that never quite hits pure black. Primary CTAs are solid black (`#000000`) pills at 8px radius; the signature accent is a single decisive `#0066ff` blue reserved for links, focus, and interactive emphasis. Warm-cream callouts (`#fff6ec` → `#ffe6c9`) and an amber highlight (`#f8ad40`) carry the only non-blue chroma — the document-block flavour that makes a Coda page feel like a structured doc rather than a generic SaaS landing. The card primitive holds at 12px, buttons at 8px, and the whole system reads productivity-first: calm, legible, structured.'
# 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: accent
muted: text-muted
border: border
ring: brand
colors:
bg: '#ffffff' # paper-white canvas; the document page made literal
surface: '#ffffff' # cards default to white; depth via border + tone
surface-soft: '#fafafa' # softest panel tint, a half-step off white
surface-muted: '#f0f0f0' # --neutral200; panel/callout neutral ground
text: '#212121' # rgb(33,33,33); near-black body, never pure #000
text-muted: '#444444' # rgb(68,68,68); secondary CTA + metadata grey
text-faint: '#717171' # tertiary captions, timestamps, placeholders
brand: '#0066ff' # rgb(0,102,255); single confident action/link blue
brand-hover: '#0052cc' # pressed/hover step into deeper blue
brand-soft: '#e6efff' # soft action tint surface for selection & info
cta-primary: '#000000' # solid-black primary "Get started" pill
on-brand: '#ffffff' # white text on black CTA / blue accent
accent: '#f8ad40' # --block-color-highlight; warm amber highlight
accent-cream: '#fff6ec' # warmest callout/cream surface tint
accent-callout: '#ffe6c9' # --block-callout-background; peach callout fill
accent-warm: '#f0e5dc' # --block-color-accent-light; warm sand panel
block-green: '#006838' # --codaBrandGreen; document-block decorative green
border: '#e3e3e3' # standard hairline divider on white
border-soft: '#ededed' # lighter nested divider / table row line
border-strong: '#cccccc' # emphasised divider / form field border
success: '#1a7f4b' # confident editorial green
success-bg: '#e7f4ec' # success surface tint
warning: '#9a6400' # warm amber-brown, not yellow
warning-bg: '#fff3df' # warning surface tint
danger: '#c0392b' # restrained brick red
danger-bg: '#fbeae8' # danger surface tint
info: '#0066ff' # info reuses the action blue
info-bg: '#e6efff' # info surface tint
typography:
display:
family: 'Calibre-R, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [500, 600, 700]
body:
family: 'Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600]
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
weights: [400, 500]
scale:
display-hero: { size: 72, weight: 700, lineHeight: 1.0, tracking: '-0.02em', family: display }
display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.018em', family: display }
h1: { size: 48, weight: 700, lineHeight: 1.1, tracking: '-0.015em', family: display }
h2: { size: 38, weight: 700, lineHeight: 1.15, tracking: '-0.012em', family: display }
h3: { size: 28, weight: 600, lineHeight: 1.25, tracking: '-0.008em', family: display }
h4: { size: 22, weight: 600, lineHeight: 1.3, tracking: '-0.004em', family: display }
h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body }
h6: { size: 16, weight: 600, lineHeight: 1.4, 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-ui: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body-sm: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.01em', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
code: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
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]
layout:
page-width: 1280
prose-width: 720
header-height: 64
components:
button-primary:
backgroundColor: cta-primary
textColor: on-brand
radius: md
padding: '10px 16px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: '#1a1a1a' }
use: 'Solid-black "Get started" — the canonical primary action'
button-secondary:
backgroundColor: bg
textColor: text
border: border-strong
radius: md
padding: '10px 16px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: surface-soft }
use: 'Outlined "Request a demo" — white fill, near-black label'
button-accent:
backgroundColor: brand
textColor: on-brand
radius: md
padding: '10px 16px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: brand-hover }
use: 'Blue accent action where the brand colour earns emphasis'
button-ghost:
backgroundColor: transparent
textColor: text-muted
radius: lg
padding: '10px 16px'
font: { family: body, weight: 500, size: 16 }
hover: { backgroundColor: surface-muted }
use: 'Translucent "Contact sales" tertiary action'
card:
backgroundColor: surface
border: border
radius: lg
padding: 24
shadow: 'none'
use: 'White panel; depth via hairline border, not shadow'
card-callout:
backgroundColor: accent-cream
border: accent-callout
radius: lg
padding: 24
use: 'Warm-cream document-block callout — the Coda doc flavour'
input:
backgroundColor: bg
border: border-strong
textColor: text
radius: md
padding: '8px 12px'
font: { family: body, weight: 400, size: 16 }
focus: { border: brand, ring: '0 0 0 3px rgba(0,102,255,0.18)' }
badge:
backgroundColor: surface-muted
textColor: text-muted
radius: pill
padding: '4px 10px'
font: { family: body, weight: 500, size: 13 }
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
hover-lift: 'translateY(-1px)'
page-transition: 'opacity-only, 200ms standard'
reduced-motion: 'respects prefers-reduced-motion: reduce — transitions collapse to opacity-only at 100ms'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(0,0,0,0.04) 0 1px 2px'
raised: 'rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px'
elevated: 'rgba(0,0,0,0.08) 0 8px 24px, rgba(0,0,0,0.05) 0 2px 6px'
popover: 'rgba(0,0,0,0.12) 0 12px 32px, rgba(0,0,0,0.06) 0 4px 8px'
ring: '0 0 0 3px rgba(0,102,255,0.18)'
accessibility:
contrast-text-on-bg: 16.1 # AAA at body sizes (#212121 on #ffffff)
contrast-on-brand: 4.83 # AA at body+ (#ffffff on #0066ff)
contrast-on-cta-primary: 21.0 # AAA (#ffffff on #000000)
contrast-muted-on-bg: 9.74 # AAA (#444444 on #ffffff)
contrast-text-on-accent: 8.47 # AAA (#212121 on #f8ad40)
focus-ring: '3px solid rgba(0,102,255,0.4) with 1px offset'
reduced-motion-honored: true
keyboard-trap-free: true
min-touch-target: 44
dark-mode: light-only
lineage:
summary: |
Coda's marketing surface belongs to the post-Notion document-workspace lineage:
a paper-white canvas treated as a literal page, near-black text that stops short
of pure `#000`, and a single confident accent rather than a multi-hue palette.
Calibre — the Klim Type Foundry geometric-humanist sans used by Dropbox and a
generation of SaaS brands — carries the display register, while Inter handles
body and UI text; this Calibre-display / Inter-body pairing is the contemporary
productivity-tool dialect (Linear, Vercel, and Stripe all sit in adjacent
territory). The action colour is one decisive `#0066ff` blue, a Stripe-style
trust-via-restraint move that reserves saturation for links, focus rings, and
interactive emphasis. Where Coda diverges is the document-block warmth: callouts
render in cream-to-peach (`#fff6ec` → `#ffe6c9`) with an amber highlight
(`#f8ad40`) and a decorative brand green (`#006838`) — the visual residue of
Coda's actual product, where doc blocks, callouts, and highlights are first-class
primitives. Primary CTAs are solid black `#000000` pills, a confident
high-contrast choice that keeps the blue free for navigation and content links.
influences:
- name: Notion
role: Defined the document-workspace marketing register — paper-white canvas, near-black text, single accent — that Coda competes within.
url: https://www.notion.com
- name: Klim Type Foundry (Calibre)
role: Calibre display face — the geometric-humanist sans that gives the headlines their confident, neutral-modern voice.
url: https://klim.co.nz/retail-fonts/calibre/
- name: Inter (Rasmus Andersson)
role: Body and UI typeface — the screen-optimised workhorse sans underpinning legibility at small sizes.
url: https://rsms.me/inter/
- name: Stripe
role: Single-blue, trust-via-restraint chromatic discipline — one saturated action colour, no hue inflation.
url: https://stripe.com
- name: Linear
role: Contemporary productivity-SaaS register — Calibre/Inter-class type, hairline borders, white-on-white tonal depth.
url: https://linear.app
---
## 1. Visual Theme & Atmosphere
Coda's marketing surface presents the all-in-one collaborative workspace as a literal page. The base canvas is paper-white `#ffffff`, the text sits at a near-black `#212121` (rgb 33, 33, 33) that deliberately stops short of pure black, and the whole composition reads productivity-first: calm, legible, and structured. Where a consumer brand would reach for gradient and saturation, Coda reaches for whitespace and a single decisive accent. The page feels like an empty Coda doc waiting to be filled — which is exactly the metaphor.
The type does the heavy lifting. Calibre — the Klim Type Foundry geometric-humanist sans — carries the display register, hitting 72px at 700 weight for the hero headline with a tight negative track that gives it a confident, neutral-modern voice. Inter handles body and UI text, including the 14px base size observed across the chrome. This Calibre-display / Inter-body pairing is the contemporary productivity-tool dialect; it places Coda firmly alongside Linear, Vercel, and Stripe rather than the consumer-app crowd. The headlines feel engineered rather than decorated.
Chromatically the system is disciplined to the point of austerity, then warmed in one place. The action colour is a single confident `#0066ff` blue — re-probed from the SVG layer, used for links, focus rings, and interactive emphasis but never sprayed across the page. Primary CTAs ("Get started") are solid black `#000000` pills at 8px radius, a high-contrast choice that keeps the blue free for content and navigation. Secondary CTAs ("Request a demo") are outlined white pills at the same 8px; the translucent tertiary ("Contact sales") softens to a 12px radius and a muted `#444444` label.
The one place Coda lets warmth in is the document-block flavour. Callouts render in a cream-to-peach family — `#fff6ec` cream, `#ffe6c9` peach callout fill, `#f0e5dc` warm sand — accented by an amber highlight (`#f8ad40`) and a decorative brand green (`#006838`). These are the visual residue of Coda's actual product, where callouts, highlights, and coloured doc blocks are first-class primitives. On the marketing surface they appear as occasional warm accents against the cool white-and-blue scaffolding, signalling "this is a structured document tool" without ever overwhelming the restraint.
The net atmosphere is calm productivity: a white page, near-black confident type, one trustworthy blue, and a thread of document-block warmth. It is the visual equivalent of a well-organised workspace — nothing shouts, everything has a place.
**Key Characteristics**
- Paper-white `#ffffff` canvas treated as a literal document page
- Calibre display face (72px / 700 hero) over Inter for body and UI
- Near-black `#212121` text that never hits pure `#000`
- Solid-black `#000000` primary CTA pills at 8px radius
- Single confident `#0066ff` blue for links, focus, and interactive emphasis
- Warm-cream document-block callouts (`#fff6ec` → `#ffe6c9`) as the only non-blue chroma
- Amber highlight (`#f8ad40`) and decorative brand green (`#006838`) from the product palette
- Hairline `#e3e3e3` borders; depth via tone and border, not shadow
- 12px card radius, 8px button radius, 9999px pill for badges
- Productivity-first, structured register — restrained, legible, never loud
## 2. Color Palette & Roles
### Canvas & Surface
- **bg** (`#ffffff`): paper-white canvas; the document page made literal.
- **surface** (`#ffffff`): cards default to white, with depth carried by border and tone rather than fill.
- **surface-soft** (`#fafafa`): softest panel tint, a half-step off pure white.
- **surface-muted** (`#f0f0f0`) [→ `--neutral200`]: neutral panel and block ground; the workhorse grey.
### Text
- **text** (`#212121`) [→ rgb(33,33,33)]: near-black body text; calibrated for paper-on-paper softness, never pure black.
- **text-muted** (`#444444`) [→ rgb(68,68,68)]: secondary CTA labels, metadata, supporting copy.
- **text-faint** (`#717171`): tertiary captions, timestamps, placeholder text.
### Brand & Accent
- **brand** (`#0066ff`) [→ rgb(0,102,255)]: single confident action and link blue; the only saturated cool chroma on the page.
- **brand-hover** (`#0052cc`): pressed/hover step into a deeper blue.
- **brand-soft** (`#e6efff`): soft action tint for selection states and info banners.
- **cta-primary** (`#000000`): solid-black primary "Get started" pill fill.
- **accent** (`#f8ad40`) [→ `--block-color-highlight`]: warm amber highlight from the doc-block palette.
- **accent-cream** (`#fff6ec`): warmest callout/cream surface tint.
- **accent-callout** (`#ffe6c9`) [→ `--block-callout-background`]: peach callout fill for document-block notices.
- **accent-warm** (`#f0e5dc`) [→ `--block-color-accent-light`]: warm sand panel tint.
- **block-green** (`#006838`) [→ `--codaBrandGreen`]: decorative document-block green; never an action colour.
### Interactive
- **link**: identical to `brand` (`#0066ff`); the action blue and the link blue are deliberately the same hue.
- **link-hover**: `brand-hover` (`#0052cc`); link gains underline at hover, never colour shift alone.
- **selected**: `brand-soft` (`#e6efff`) fill, `brand` text.
- **disabled**: `text-faint` (`#717171`) on `surface-muted` (`#f0f0f0`).
### Borders
- **border** (`#e3e3e3`): standard hairline divider on white; the universal separator.
- **border-soft** (`#ededed`): lighter nested divider and table-row line.
- **border-strong** (`#cccccc`): emphasised divider and form-field border.
### Shadow Colors
- **ambient**: `rgba(0,0,0,0.04) 0 1px 2px` — barely-there resting shadow for elevated cards.
- **raised**: two-layer neutral shadow (`0 1px 2px` + `0 4px 12px`) for floating panels.
- **popover**: deeper multi-layer shadow for menus and tooltips.
Note: Coda's shadows are neutral black at very low opacity — depth is achieved primarily through the hairline border and surface tone, with shadow reserved for genuinely floating elements.
### Semantic
- **success** (`#1a7f4b`) on **success-bg** (`#e7f4ec`): confident editorial green, never a saturated chartreuse.
- **warning** (`#9a6400`) on **warning-bg** (`#fff3df`): warm amber-brown that harmonises with the cream callouts, not yellow.
- **danger** (`#c0392b`) on **danger-bg** (`#fbeae8`): restrained brick red, never crayon-red.
- **info** (`#0066ff`) on **info-bg** (`#e6efff`): info reuses the action blue; the system avoids inventing a separate info hue.
## 3. Typography Rules
### Font Family
- **Display**: Calibre-R → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. Calibre carries every headline; its geometric-humanist forms give the display register a confident, neutral-modern voice.
- **Body & UI**: Inter → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. Inter handles body copy and the 14px UI base; it is the screen-optimised workhorse that keeps small text crisp.
- **Mono**: ui-monospace → SFMono-Regular → SF Mono → Menlo → Consolas → monospace. Reserved for code blocks, formula snippets, and tabular data echoing Coda's doc primitives.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Calibre | 72 | 700 | 1.0 | -0.02em | the observed hero size — confident, tightly tracked |
| display-lg | Calibre | 56 | 700 | 1.05 | -0.018em | secondary heroes |
| h1 | Calibre | 48 | 700 | 1.1 | -0.015em | primary section heads |
| h2 | Calibre | 38 | 700 | 1.15 | -0.012em | feature-band heads (observed) |
| h3 | Calibre | 28 | 600 | 1.25 | -0.008em | sub-feature heads |
| h4 | Calibre | 22 | 600 | 1.3 | -0.004em | card heads |
| h5 | Inter | 18 | 600 | 1.35 | 0 | inline emphasis heads |
| h6 | Inter | 16 | 600 | 1.4 | 0 | label-grade heads |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | hero subheads |
| body | Inter | 16 | 400 | 1.55 | 0 | default reading size |
| body-ui | Inter | 14 | 400 | 1.5 | 0 | chrome/UI base (observed) |
| body-sm | Inter | 13 | 400 | 1.5 | 0 | secondary copy |
| label | Inter | 13 | 500 | 1.4 | 0.01em | form labels, eyebrows |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | image and chart captions |
| code | mono | 13 | 400 | 1.5 | 0 | inline + block code |
### Principles
- **Calibre declares, Inter informs**: headlines belong to Calibre at 600–700 weight; everything readable at a glance and below — body, UI, captions — belongs to Inter. The two faces are never swapped.
- **Negative tracking at display scale**: hero copy tightens to roughly `-0.02em`; without that compression Calibre at 700 reads as competent rather than declarative.
- **Near-black, not black**: body text holds at `#212121` rather than `#000000` — a deliberate softening that reduces glare on the white canvas and keeps long reads comfortable.
- **14px UI base**: chrome, navigation, and dense UI run at Inter 14px; the marketing body steps up to 16px for hero subheads and prose.
- **Weight, not colour, for emphasis**: hierarchy is built from Calibre/Inter weight steps and size, not from colour shifts — colour stays reserved for the blue accent.
- **Generous line-height for prose**: body copy runs 1.55 line-height, giving the document-page register its breathing room.
## 4. Component Stylings
### Buttons
**Primary — "Get started"**
- Background: `#000000`. Text: `#ffffff` at Inter 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: none.
- Hover: background → `#1a1a1a`. Active: background → `#000000` with the focus ring.
- Use: the canonical primary action; solid black keeps the blue free for links.
**Secondary — "Request a demo"**
- Background: `#ffffff`. Text: `#212121` at Inter 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: `1px solid #cccccc`.
- Hover: background → `#fafafa`, border → `#b3b3b3`. Use: secondary action paired beside the black primary.
**Accent — blue action**
- Background: `#0066ff`. Text: `#ffffff` at Inter 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: none.
- Hover: background → `#0052cc`. Use: where the brand colour earns emphasis (in-doc CTAs, feature highlights). Use sparingly so the single-blue discipline holds.
**Ghost / translucent — "Contact sales"**
- Background: `rgba(255,255,255,0.85)` over coloured bands, transparent over white. Text: `#444444` at Inter 500 / 16px. Padding: `10px 16px`. Radius: 12px.
- Hover: background → `#f0f0f0`. Use: tertiary action, lowest visual weight.
### Cards
**Standard card**
- Background: `#ffffff`. Border: `1px solid #e3e3e3`. Radius: 12px. Padding: 24px. No shadow.
- Use: feature-band content tile; depth via hairline border and tone, not shadow.
**Callout card (document-block)**
- Background: `#fff6ec`. Border: `1px solid #ffe6c9`. Radius: 12px. Padding: 24px.
- Optional left accent bar in `#f8ad40` (highlight) or `#006838` (block green).
- Use: warm-cream notices echoing Coda's in-product callout blocks — the doc flavour.
**Elevated card**
- Background: `#ffffff`. Border: `1px solid #e3e3e3`. Radius: 12px. Padding: 28px.
- Shadow: `rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px`.
- Use: pricing tiers and demo previews that should float above the canvas.
### Badges, Tags, Pills
**Neutral tag**
- Background: `#f0f0f0`. Text: `#444444` at Inter 500 / 13px. Padding: `4px 10px`. Radius: 9999px.
- Use: feature labels, category cues.
**Status badge**
- Background: `#e6efff`. Text: `#0066ff` at Inter 500 / 13px. Padding: `4px 10px`. Radius: 9999px.
- Use: "New", "Beta", inline status callouts.
**Warm doc-block badge**
- Background: `#ffe6c9`. Text: `#9a6400` at Inter 500 / 13px. Padding: `4px 10px`. Radius: 9999px.
- Use: highlight tags that match the cream-callout family.
### Inputs / Forms
**Text input**
- Background: `#ffffff`. Border: `1px solid #cccccc`. Radius: 8px. Padding: `8px 12px`. Font: Inter 400 / 16px.
- Focus: border → `#0066ff`, ring `0 0 0 3px rgba(0,102,255,0.18)`.
- Placeholder colour: `#717171`.
**Search input**
- Background: `#f0f0f0`. Border: none. Radius: 8px. Padding: `8px 12px 8px 36px` (icon-prefixed).
- Focus: background → `#ffffff`, ring `0 0 0 3px rgba(0,102,255,0.18)`.
### Navigation
**Top bar**
- Background: `#ffffff` with `1px solid #e3e3e3` bottom border. Height: 64px.
- Logo at Calibre 700 / 18px. Nav items at Inter 500 / 14px, colour `#212121`.
- Hover: nav item colour → `#0066ff` or background → `#f0f0f0`; no underline shift on the bar.
**Side nav (in-product mockups)**
- Background: `#fafafa`. Border: none. Item padding: `6px 8px`. Radius: 8px on hover background.
- Active item: `#e6efff` fill, `#0066ff` text — the doc-page navigation pattern.
### Tooltips, Toasts, Modals
- **Tooltip**: background `#212121`, text `#ffffff` at Inter 500 / 12px, radius 8px, padding `6px 10px`. Shadow: `rgba(0,0,0,0.12) 0 12px 32px`.
- **Toast**: background `#ffffff`, border `1px solid #e3e3e3`, radius 12px, shadow `popover`. Status icon at left in semantic colour.
- **Modal**: background `#ffffff`, radius 16px, shadow `popover`, backdrop `rgba(33,33,33,0.4)`, padding 32px.
## 5. Layout Principles
### Spacing System
Base unit: 4px. Scale: `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96]`. The 24px gutter is the workhorse, 48px separates stacked feature blocks within a band, and 64–96px separates major bands. Coda runs moderately spaced — looser than dense dashboards, tighter than the most editorial SaaS sites — matching its productivity register where content density matters.
### Grid & Container
- **Page width**: 1280px max, centred.
- **Prose width**: 720px max for editorial text columns.
- **Hero treatment**: hero copy claims roughly 800–900px horizontal; product imagery spans the full container width below.
- **Feature grid**: 3-column at 1024px+, 2-column at 640–1024px, 1-column below 640px. Card gap: 24px.
### Whitespace Philosophy
Whitespace is structural breathing room, not decorative void. Section padding lives between 64–96px on desktop, and inside cards Coda runs 24–28px padding. The page gives the eye a beat between bands, reinforcing the document-page metaphor — each section reads like a distinct block in a well-organised doc.
### Section Cadence
The pattern is light throughout: `light hero → light feature grid → light social-proof → light pricing → light footer`. Visual variety comes from warm-cream callout cards and coloured doc-block accents punctuating the white canvas, not from full-bleed dark bands. The rhythm is calm and consistent — the document never abandons its white page.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| micro | 2px | inline tags, tiny inline pills |
| sm | 4px | small badges, tight UI primitives |
| md | 8px | buttons, inputs, primary CTA pills |
| lg | 12px | cards, callout blocks, secondary panels |
| xl | 16px | modals, emphasis blocks |
| pill | 9999px | badges, avatars, status tags |
Coda's radii are moderate-modern: nothing sharper than 2px, nothing more pillowy than 16px (excluding pills). The 8px button radius and 12px card radius are the brand's most recognisable shape primitives — the same modern-SaaS pairing seen across the productivity-tool lineage. The translucent "Contact sales" button is the one exception, softening to 12px.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, no shadow, on `#ffffff` | body content, default surfaces |
| 1 | `1px hairline border` (`#e3e3e3`) | standard cards within a feature band |
| 2 | `hairline + ambient shadow` | elevated cards over white |
| 3 | `raised` two-layer shadow | pricing, demo previews, floating panels |
| 4 | `popover` shadow, 12px radius | tooltips, dropdowns, toasts |
| 5 | `popover` shadow + backdrop, 16px radius | modals, lightboxes |
**Shadow Philosophy**: Coda achieves most depth through the hairline `#e3e3e3` border and surface tone (`#ffffff` → `#fafafa` → `#f0f0f0`), reserving shadow for genuinely floating elements — pricing tiers, dropdowns, modals. Shadows are neutral black at very low opacity (`rgba(0,0,0,0.04–0.12)`), never tinted or heavy. The default card treatment is bordered-flat; a card that casts a shadow is a card that is meant to float.
## 8. Interaction & Motion
### Easing
- **standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — the workhorse Material-style ease for most transitions.
- **decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — used when an element enters from off-canvas or a dropdown expands.
### Durations
- **fast** (150ms): button hover colour shift, card hover tint, link underline grow.
- **standard** (240ms): dropdown open, button hover lift, accordion expand.
- **slow** (320ms): modal open, page band cross-fade.
### Per-component micro-states
- **Button hover**: background colour shift over 150ms with `standard` ease; primary black lifts to `#1a1a1a`, blue accent to `#0052cc`. Optional `translateY(-1px)` lift.
- **Card hover**: border deepens (`#e3e3e3` → `#cccccc`) over 150ms; if elevated, shadow intensifies one tier.
- **Link hover**: underline grows over 150ms with `decelerate` ease; colour stays `#0066ff`, never shifts on hover alone.
- **Input focus**: ring fades in at 100ms; border colour shifts to `#0066ff` simultaneously.
### Page transitions
Coda's marketing site keeps transitions quiet — opacity-only fades at roughly 200ms with `standard` ease. No slide, no parallax, no scale. The productivity register favours stillness; the page should feel as calm as an open document.
### Reduced-motion strategy
`prefers-reduced-motion: reduce` is respected: transform-based animations collapse to opacity-only at 100ms, hover lifts disappear, and page transitions become near-instant cuts. The hero remains static rather than animating in.
## 9. Accessibility & A11y
### Contrast pairs (computed)
- **text on bg**: `#212121` on `#ffffff` → 16.1:1 (AAA at all sizes).
- **text-muted on bg**: `#444444` on `#ffffff` → 9.74:1 (AAA at body sizes).
- **on-brand on brand**: `#ffffff` on `#0066ff` → 4.83:1 (AA at body, AAA at large).
- **on-cta on cta-primary**: `#ffffff` on `#000000` → 21.0:1 (AAA, maximum contrast).
- **text on accent**: `#212121` on `#f8ad40` → 8.47:1 (AAA — dark text on the amber highlight is the only safe pairing).
Note: white text on `#f8ad40` fails contrast — always pair the amber highlight with near-black `#212121` text, never white.
### Focus indicators
- **Default focus ring**: `3px solid rgba(0,102,255,0.4)` with 1px offset; never removed for mouse users.
- **Within input fields**: border colour shifts to `#0066ff` and adds a `0 0 0 3px rgba(0,102,255,0.18)` ring.
- **On the black primary CTA**: ring uses an offset white halo plus the blue ring so it reads against the black fill.
### ARIA patterns
- Header search uses `role="combobox"` with `aria-expanded`, `aria-controls`, `aria-activedescendant`.
- Modals use `role="dialog"`, `aria-modal="true"`, focus trap, `Esc` to close.
- Tabs use `role="tablist"` / `role="tab"` / `role="tabpanel"` with arrow-key navigation.
- Pricing toggles use `role="radiogroup"` rather than tabs.
### Keyboard nav order
Top bar → hero CTAs → feature bands in DOM order → pricing → footer. `Tab` order matches visual order. A `Skip to content` link appears at the top of the DOM, visible on focus.
### Screen reader hints
- Decorative doc-block illustrations carry `aria-hidden="true"`.
- Icon-only buttons carry `aria-label` describing the action ("Open menu", "Get started").
- Stat callouts use `aria-label="X million users"` rather than relying on numeral parsing.
### Reduced motion
Honored throughout — see §8.
## 10. Responsive Behavior
### Breakpoints
| Tier | Width | Behavior |
|---|---|---|
| mobile | < 640px | single column, 16px gutter, 48px section padding |
| tablet | 640–1024px | 2-column feature grids, 24px gutter, 64px section padding |
| desktop | 1024–1280px | 3-column feature grids, 24px gutter, 96px section padding |
| wide | 1280px+ | container caps at 1280px, content centred |
### Touch Targets
Minimum 44×44px on touch devices, achieved through padding (10px vertical + 16px font line-height ≈ 44px). Inline links increase tap area through `padding: 8px 0` rather than relying on font line-height alone.
### Collapsing strategy
- **Top nav**: hamburger menu < 1024px; full nav above.
- **Feature grid**: 3 → 2 → 1 columns at 1024 / 640.
- **Hero**: product image moves below copy < 640px; copy claims full width.
- **CTA pair**: primary and secondary stack vertically < 640px, primary on top.
- **Pricing**: tiers stack vertically < 1024px, with the recommended tier highlighted via order shift.
- **Footer**: 4-column → 2-column → 1-column at 1024 / 640.
### Image behavior
Hero and product imagery use `srcset` with 1x/2x densities and `sizes` matched to container width. Below 640px, `object-fit: cover` and a locked `aspect-ratio` keep product screenshots from distorting.
### Container queries
Used inside the in-product side-nav mockups — the nav switches between condensed and expanded modes based on container width rather than viewport.
## 11. Content & Voice
### Tone
Coda's tone is **structured-confident**: clear, practical, and quietly capable. It writes like product documentation that learned to market itself — present tense, plain declaratives, and a focus on what the workspace lets you do rather than how it feels. Headlines name the value directly ("Your all-in-one collaborative workspace.") and sentences favour periods over exclamation marks. The voice is productivity-first: helpful, precise, never breathless.
### Microcopy patterns
- **Button verbs**: "Get started", "Request a demo", "Contact sales". The primary is the generic confident "Get started"; the secondary and tertiary name the sales motion. Verbs are short and action-led.
- **Error messages**: pattern is "Couldn't [action] because [reason]. Try [recovery]." e.g. "Couldn't sync the doc because the connection dropped. Check your network and retry."
- **Success confirmations**: short, declarative, single-line. "Doc created." rather than "Your doc has been created successfully!"
### Empty states
Empty states are practical and inviting rather than cheerful. "No docs yet — start from a template" (link to gallery) or "Your first doc" with an embedded preview. The cream-callout block is a natural home for empty-state guidance. Never empty-state cartoons or "Oops!" copy.
### CTA verb conventions
- **Primary marketing CTA**: "Get started" (the canonical phrase, on the black pill).
- **Demo CTA**: "Request a demo".
- **Sales CTA**: "Contact sales".
- **In-product**: "New doc", "Add page", "Insert block" — verb-plus-noun naming the doc primitive.
## 12. Dark Mode & Theming
Light-only for the marketing surface — no full dark variant is offered. The canvas stays paper-white `#ffffff` throughout, and visual variety comes from warm-cream callouts and coloured doc-block accents rather than dark bands.
The product application ships its own theming with coloured doc blocks (the `--codaBrandGreen #006838`, `--block-color-highlight #f8ad40`, and callout backgrounds observed in the token layer), but the marketing site commits to a single light register. Designers building Coda-style marketing pages should not introduce a dark mode; instead, use the cream-callout family (`#fff6ec` → `#ffe6c9`) and the amber highlight to create warmth and emphasis against the white page.
If a dark surface is genuinely required for a component (for example, a code-block or a footer accent), keep it bounded and exceptional: a near-black `#212121` ground with `#ffffff` text and a lighter blue accent to hold contrast — but treat it as a deliberate one-off, not a system-wide theme.
## 13. Lineage & Influences
Coda sits squarely in the post-Notion document-workspace lineage. Notion defined the marketing register these tools now share — a paper-white canvas treated as a literal page, near-black text that stops short of pure black, and a single restrained accent rather than a multi-hue palette. Coda adopts that register wholesale and then adds its own document-block warmth: the cream-to-peach callouts (`#fff6ec` → `#ffe6c9`), the amber highlight (`#f8ad40`), and the decorative brand green (`#006838`) are the visual residue of Coda's actual product, where coloured blocks and callouts are first-class primitives.
Typographically, Coda speaks the contemporary productivity-tool dialect: Calibre — Klim Type Foundry's geometric-humanist sans, used by Dropbox and a generation of SaaS brands — carries the confident display register, while Inter (Rasmus Andersson's screen-optimised workhorse) handles body and UI. The single confident `#0066ff` blue is a Stripe move — one chromatic event, no hue inflation — and the hairline borders with white-on-white tonal depth place Coda adjacent to Linear. What Coda rejects: gradient-heavy consumer aesthetics, multi-accent palettes, dark default canvases, and drop-shadow elevation as a default. The restraint is the discipline; the cream callout is the surprise; the solid-black CTA is the confident signature that keeps the blue free for content.
**Named influences**
- **Notion** ([notion.com](https://www.notion.com)) — Defined the document-workspace marketing register Coda competes within.
- **Klim Type Foundry — Calibre** ([klim.co.nz](https://klim.co.nz/retail-fonts/calibre/)) — Calibre display face; the confident, neutral-modern headline voice.
- **Inter** ([rsms.me/inter](https://rsms.me/inter/)) — Body and UI typeface; screen-optimised legibility at small sizes.
- **Stripe** ([stripe.com](https://stripe.com)) — Single-blue, trust-via-restraint chromatic discipline.
- **Linear** ([linear.app](https://linear.app)) — Contemporary productivity-SaaS register; hairline borders and white-on-white tonal depth.
## 14. Do's and Don'ts
**Do**
- Keep the canvas paper-white `#ffffff` and the text near-black `#212121`; the restraint is the brand.
- Use Calibre for every headline (600–700 weight) and Inter for all body and UI text; never swap the roles.
- Reserve `#0066ff` blue for links, focus rings, and selective interactive emphasis — one confident chromatic event.
- Make the primary CTA a solid-black `#000000` pill at 8px radius; it keeps the blue free for content.
- Reach for the cream-callout family (`#fff6ec` → `#ffe6c9`) and amber highlight (`#f8ad40`) to add warmth and signal the document-block flavour.
- Pair the amber highlight only with near-black text (`#212121`); white on amber fails contrast.
- Build depth from the hairline `#e3e3e3` border and surface tone first; add shadow only for genuinely floating elements.
- Run hero headlines in Calibre 700 at roughly `-0.02em` tracking; the negative track carries the confident voice.
- Use 8px radius for buttons and inputs, 12px for cards and callouts.
- Honor `prefers-reduced-motion: reduce` — collapse hover lifts and slide-ins to opacity-only.
**Don't**
- Don't introduce a dark default canvas; the marketing surface is light-only.
- Don't use pure black `#000000` for body text — the near-black `#212121` is calibrated for paper-on-paper softness.
- Don't spray the `#0066ff` blue across the page; more than one saturated cool accent breaks the discipline.
- Don't add a second non-blue accent beyond the cream/amber/green doc-block family.
- Don't put white text on the amber highlight (`#f8ad40`) — it fails contrast; use `#212121`.
- Don't apply heavy drop-shadows to default cards; depth here is bordered and tonal.
- Don't replace the solid-black primary CTA with a blue one as the default; the black pill is the signature.
- Don't break the hairline-border discipline with thick or saturated dividers.
- Don't reach for gradient-heavy consumer aesthetics; Coda is structured, not flashy.
- Don't run Calibre below 600 weight for headlines; the confident voice needs the weight.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
surface-muted: #f0f0f0
text: #212121
text-muted: #444444
brand: #0066ff
brand-hover: #0052cc
brand-soft: #e6efff
cta-primary: #000000
accent (amber highlight): #f8ad40
accent-cream: #fff6ec
accent-callout: #ffe6c9
border: #e3e3e3
```
### Example Component Prompts
1. "Create a marketing hero in the Coda style: paper-white `#ffffff` canvas, Calibre 72px / 700 weight headline in `#212121` with `-0.02em` tracking, 18px subhead at Inter 400 in `#444444`, a solid-black primary CTA pill (`#000000` background, white text, 8px radius, `10px 16px` padding) reading 'Get started', and an outlined secondary button (`#ffffff` background, `1px solid #cccccc`, `#212121` text) reading 'Request a demo'."
2. "Design a feature card in the Coda style: `#ffffff` background, 12px radius, `1px solid #e3e3e3` hairline border, 24px padding, Calibre 600 / 22px H4 title in `#212121`, body at Inter 400 / 16px in `#212121`, no drop-shadow."
3. "Render a document-block callout: warm-cream `#fff6ec` background, `1px solid #ffe6c9` border, 12px radius, 24px padding, a `#f8ad40` amber accent bar on the left edge, body text in Inter 400 / 16px `#212121`."
4. "Create a pricing tier card: `#ffffff` background, `1px solid #e3e3e3` hairline, 12px radius, 28px padding, raised shadow (`rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px`), tier name in Calibre 600 / 20px, price in Calibre 700 / 48px, feature list in Inter 16px / 1.55 with `#0066ff` bullet markers, and a solid-black 'Get started' CTA pill."
5. "Design a top navigation bar: `#ffffff` background with `1px solid #e3e3e3` bottom border, 64px height, Calibre 700 / 18px logo, Inter 500 / 14px nav items in `#212121` that turn `#0066ff` on hover, and a solid-black 'Get started' pill at the right."
6. "Render a status badge row: a neutral pill (`#f0f0f0` background, `#444444` Inter 500 / 13px text, 9999px radius) and a blue status pill (`#e6efff` background, `#0066ff` text) and a warm doc-block pill (`#ffe6c9` background, `#9a6400` text), each at `4px 10px` padding."
### Iteration Guide
1. **Start with the canvas**: confirm the `#ffffff` paper-white base and the 8px / 12px button-card radius pair. If it looks too consumer, you have likely added gradient or saturation.
2. **Verify the type pairing**: headlines must be Calibre at 600–700; body and UI must be Inter. If a headline reads soft, tighten the track toward `-0.02em` and confirm it is Calibre, not Inter.
3. **Audit the action colour**: the `#0066ff` blue should appear only on links, focus, and selective emphasis — and the primary CTA should be solid black `#000000`. If the page has two saturated blues, one is wrong.
4. **Check the near-black**: body text is `#212121`, never pure `#000`. If your text looks harsh, you have drifted to full black.
5. **Add the doc-block warmth**: every page benefits from one cream callout (`#fff6ec` / `#ffe6c9`) or amber highlight (`#f8ad40`) to signal the document-tool flavour. An all-blue-and-white page reads as generic SaaS.
6. **Confirm the border treatment**: dividers and default cards use a `#e3e3e3` hairline, not shadow. If you see drop-shadows on resting cards, remove them.
7. **Test the contrast on amber**: amber highlights (`#f8ad40`) must carry near-black `#212121` text, never white — white fails WCAG on amber.
8. **Check the reduced-motion path**: hover lifts and slide-ins should collapse to opacity-only when `prefers-reduced-motion: reduce` is set.
1. Visual Theme & Atmosphere
Coda’s marketing surface presents the all-in-one collaborative workspace as a literal page. The base canvas is paper-white #ffffff, the text sits at a near-black #212121 (rgb 33, 33, 33) that deliberately stops short of pure black, and the whole composition reads productivity-first: calm, legible, and structured. Where a consumer brand would reach for gradient and saturation, Coda reaches for whitespace and a single decisive accent. The page feels like an empty Coda doc waiting to be filled — which is exactly the metaphor.
The type does the heavy lifting. Calibre — the Klim Type Foundry geometric-humanist sans — carries the display register, hitting 72px at 700 weight for the hero headline with a tight negative track that gives it a confident, neutral-modern voice. Inter handles body and UI text, including the 14px base size observed across the chrome. This Calibre-display / Inter-body pairing is the contemporary productivity-tool dialect; it places Coda firmly alongside Linear, Vercel, and Stripe rather than the consumer-app crowd. The headlines feel engineered rather than decorated.
Chromatically the system is disciplined to the point of austerity, then warmed in one place. The action colour is a single confident #0066ff blue — re-probed from the SVG layer, used for links, focus rings, and interactive emphasis but never sprayed across the page. Primary CTAs (“Get started”) are solid black #000000 pills at 8px radius, a high-contrast choice that keeps the blue free for content and navigation. Secondary CTAs (“Request a demo”) are outlined white pills at the same 8px; the translucent tertiary (“Contact sales”) softens to a 12px radius and a muted #444444 label.
The one place Coda lets warmth in is the document-block flavour. Callouts render in a cream-to-peach family — #fff6ec cream, #ffe6c9 peach callout fill, #f0e5dc warm sand — accented by an amber highlight (#f8ad40) and a decorative brand green (#006838). These are the visual residue of Coda’s actual product, where callouts, highlights, and coloured doc blocks are first-class primitives. On the marketing surface they appear as occasional warm accents against the cool white-and-blue scaffolding, signalling “this is a structured document tool” without ever overwhelming the restraint.
The net atmosphere is calm productivity: a white page, near-black confident type, one trustworthy blue, and a thread of document-block warmth. It is the visual equivalent of a well-organised workspace — nothing shouts, everything has a place.
Key Characteristics
- Paper-white
#ffffffcanvas treated as a literal document page - Calibre display face (72px / 700 hero) over Inter for body and UI
- Near-black
#212121text that never hits pure#000 - Solid-black
#000000primary CTA pills at 8px radius - Single confident
#0066ffblue for links, focus, and interactive emphasis - Warm-cream document-block callouts (
#fff6ec→#ffe6c9) as the only non-blue chroma - Amber highlight (
#f8ad40) and decorative brand green (#006838) from the product palette - Hairline
#e3e3e3borders; depth via tone and border, not shadow - 12px card radius, 8px button radius, 9999px pill for badges
- Productivity-first, structured register — restrained, legible, never loud
2. Color Palette & Roles
Canvas & Surface
- bg (
#ffffff): paper-white canvas; the document page made literal. - surface (
#ffffff): cards default to white, with depth carried by border and tone rather than fill. - surface-soft (
#fafafa): softest panel tint, a half-step off pure white. - surface-muted (
#f0f0f0) [→--neutral200]: neutral panel and block ground; the workhorse grey.
Text
- text (
#212121) [→ rgb(33,33,33)]: near-black body text; calibrated for paper-on-paper softness, never pure black. - text-muted (
#444444) [→ rgb(68,68,68)]: secondary CTA labels, metadata, supporting copy. - text-faint (
#717171): tertiary captions, timestamps, placeholder text.
Brand & Accent
- brand (
#0066ff) [→ rgb(0,102,255)]: single confident action and link blue; the only saturated cool chroma on the page. - brand-hover (
#0052cc): pressed/hover step into a deeper blue. - brand-soft (
#e6efff): soft action tint for selection states and info banners. - cta-primary (
#000000): solid-black primary “Get started” pill fill. - accent (
#f8ad40) [→--block-color-highlight]: warm amber highlight from the doc-block palette. - accent-cream (
#fff6ec): warmest callout/cream surface tint. - accent-callout (
#ffe6c9) [→--block-callout-background]: peach callout fill for document-block notices. - accent-warm (
#f0e5dc) [→--block-color-accent-light]: warm sand panel tint. - block-green (
#006838) [→--codaBrandGreen]: decorative document-block green; never an action colour.
Interactive
- link: identical to
brand(#0066ff); the action blue and the link blue are deliberately the same hue. - link-hover:
brand-hover(#0052cc); link gains underline at hover, never colour shift alone. - selected:
brand-soft(#e6efff) fill,brandtext. - disabled:
text-faint(#717171) onsurface-muted(#f0f0f0).
Borders
- border (
#e3e3e3): standard hairline divider on white; the universal separator. - border-soft (
#ededed): lighter nested divider and table-row line. - border-strong (
#cccccc): emphasised divider and form-field border.
Shadow Colors
- ambient:
rgba(0,0,0,0.04) 0 1px 2px— barely-there resting shadow for elevated cards. - raised: two-layer neutral shadow (
0 1px 2px+0 4px 12px) for floating panels. - popover: deeper multi-layer shadow for menus and tooltips.
Note: Coda’s shadows are neutral black at very low opacity — depth is achieved primarily through the hairline border and surface tone, with shadow reserved for genuinely floating elements.
Semantic
- success (
#1a7f4b) on success-bg (#e7f4ec): confident editorial green, never a saturated chartreuse. - warning (
#9a6400) on warning-bg (#fff3df): warm amber-brown that harmonises with the cream callouts, not yellow. - danger (
#c0392b) on danger-bg (#fbeae8): restrained brick red, never crayon-red. - info (
#0066ff) on info-bg (#e6efff): info reuses the action blue; the system avoids inventing a separate info hue.
3. Typography Rules
Font Family
- Display: Calibre-R → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. Calibre carries every headline; its geometric-humanist forms give the display register a confident, neutral-modern voice.
- Body & UI: Inter → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. Inter handles body copy and the 14px UI base; it is the screen-optimised workhorse that keeps small text crisp.
- Mono: ui-monospace → SFMono-Regular → SF Mono → Menlo → Consolas → monospace. Reserved for code blocks, formula snippets, and tabular data echoing Coda’s doc primitives.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Calibre | 72 | 700 | 1.0 | -0.02em | the observed hero size — confident, tightly tracked |
| display-lg | Calibre | 56 | 700 | 1.05 | -0.018em | secondary heroes |
| h1 | Calibre | 48 | 700 | 1.1 | -0.015em | primary section heads |
| h2 | Calibre | 38 | 700 | 1.15 | -0.012em | feature-band heads (observed) |
| h3 | Calibre | 28 | 600 | 1.25 | -0.008em | sub-feature heads |
| h4 | Calibre | 22 | 600 | 1.3 | -0.004em | card heads |
| h5 | Inter | 18 | 600 | 1.35 | 0 | inline emphasis heads |
| h6 | Inter | 16 | 600 | 1.4 | 0 | label-grade heads |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | hero subheads |
| body | Inter | 16 | 400 | 1.55 | 0 | default reading size |
| body-ui | Inter | 14 | 400 | 1.5 | 0 | chrome/UI base (observed) |
| body-sm | Inter | 13 | 400 | 1.5 | 0 | secondary copy |
| label | Inter | 13 | 500 | 1.4 | 0.01em | form labels, eyebrows |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | image and chart captions |
| code | mono | 13 | 400 | 1.5 | 0 | inline + block code |
Principles
- Calibre declares, Inter informs: headlines belong to Calibre at 600–700 weight; everything readable at a glance and below — body, UI, captions — belongs to Inter. The two faces are never swapped.
- Negative tracking at display scale: hero copy tightens to roughly
-0.02em; without that compression Calibre at 700 reads as competent rather than declarative. - Near-black, not black: body text holds at
#212121rather than#000000— a deliberate softening that reduces glare on the white canvas and keeps long reads comfortable. - 14px UI base: chrome, navigation, and dense UI run at Inter 14px; the marketing body steps up to 16px for hero subheads and prose.
- Weight, not colour, for emphasis: hierarchy is built from Calibre/Inter weight steps and size, not from colour shifts — colour stays reserved for the blue accent.
- Generous line-height for prose: body copy runs 1.55 line-height, giving the document-page register its breathing room.
4. Component Stylings
Buttons
Primary — “Get started”
- Background:
#000000. Text:#ffffffat Inter 600 / 16px. Padding:10px 16px. Radius: 8px. Border: none. - Hover: background →
#1a1a1a. Active: background →#000000with the focus ring. - Use: the canonical primary action; solid black keeps the blue free for links.
Secondary — “Request a demo”
- Background:
#ffffff. Text:#212121at Inter 600 / 16px. Padding:10px 16px. Radius: 8px. Border:1px solid #cccccc. - Hover: background →
#fafafa, border →#b3b3b3. Use: secondary action paired beside the black primary.
Accent — blue action
- Background:
#0066ff. Text:#ffffffat Inter 600 / 16px. Padding:10px 16px. Radius: 8px. Border: none. - Hover: background →
#0052cc. Use: where the brand colour earns emphasis (in-doc CTAs, feature highlights). Use sparingly so the single-blue discipline holds.
Ghost / translucent — “Contact sales”
- Background:
rgba(255,255,255,0.85)over coloured bands, transparent over white. Text:#444444at Inter 500 / 16px. Padding:10px 16px. Radius: 12px. - Hover: background →
#f0f0f0. Use: tertiary action, lowest visual weight.
Cards
Standard card
- Background:
#ffffff. Border:1px solid #e3e3e3. Radius: 12px. Padding: 24px. No shadow. - Use: feature-band content tile; depth via hairline border and tone, not shadow.
Callout card (document-block)
- Background:
#fff6ec. Border:1px solid #ffe6c9. Radius: 12px. Padding: 24px. - Optional left accent bar in
#f8ad40(highlight) or#006838(block green). - Use: warm-cream notices echoing Coda’s in-product callout blocks — the doc flavour.
Elevated card
- Background:
#ffffff. Border:1px solid #e3e3e3. Radius: 12px. Padding: 28px. - Shadow:
rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px. - Use: pricing tiers and demo previews that should float above the canvas.
Badges, Tags, Pills
Neutral tag
- Background:
#f0f0f0. Text:#444444at Inter 500 / 13px. Padding:4px 10px. Radius: 9999px. - Use: feature labels, category cues.
Status badge
- Background:
#e6efff. Text:#0066ffat Inter 500 / 13px. Padding:4px 10px. Radius: 9999px. - Use: “New”, “Beta”, inline status callouts.
Warm doc-block badge
- Background:
#ffe6c9. Text:#9a6400at Inter 500 / 13px. Padding:4px 10px. Radius: 9999px. - Use: highlight tags that match the cream-callout family.
Inputs / Forms
Text input
- Background:
#ffffff. Border:1px solid #cccccc. Radius: 8px. Padding:8px 12px. Font: Inter 400 / 16px. - Focus: border →
#0066ff, ring0 0 0 3px rgba(0,102,255,0.18). - Placeholder colour:
#717171.
Search input
- Background:
#f0f0f0. Border: none. Radius: 8px. Padding:8px 12px 8px 36px(icon-prefixed). - Focus: background →
#ffffff, ring0 0 0 3px rgba(0,102,255,0.18).
Navigation
Top bar
- Background:
#ffffffwith1px solid #e3e3e3bottom border. Height: 64px. - Logo at Calibre 700 / 18px. Nav items at Inter 500 / 14px, colour
#212121. - Hover: nav item colour →
#0066ffor background →#f0f0f0; no underline shift on the bar.
Side nav (in-product mockups)
- Background:
#fafafa. Border: none. Item padding:6px 8px. Radius: 8px on hover background. - Active item:
#e6effffill,#0066fftext — the doc-page navigation pattern.
Tooltips, Toasts, Modals
- Tooltip: background
#212121, text#ffffffat Inter 500 / 12px, radius 8px, padding6px 10px. Shadow:rgba(0,0,0,0.12) 0 12px 32px. - Toast: background
#ffffff, border1px solid #e3e3e3, radius 12px, shadowpopover. Status icon at left in semantic colour. - Modal: background
#ffffff, radius 16px, shadowpopover, backdroprgba(33,33,33,0.4), padding 32px.
5. Layout Principles
Spacing System
Base unit: 4px. Scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]. The 24px gutter is the workhorse, 48px separates stacked feature blocks within a band, and 64–96px separates major bands. Coda runs moderately spaced — looser than dense dashboards, tighter than the most editorial SaaS sites — matching its productivity register where content density matters.
Grid & Container
- Page width: 1280px max, centred.
- Prose width: 720px max for editorial text columns.
- Hero treatment: hero copy claims roughly 800–900px horizontal; product imagery spans the full container width below.
- Feature grid: 3-column at 1024px+, 2-column at 640–1024px, 1-column below 640px. Card gap: 24px.
Whitespace Philosophy
Whitespace is structural breathing room, not decorative void. Section padding lives between 64–96px on desktop, and inside cards Coda runs 24–28px padding. The page gives the eye a beat between bands, reinforcing the document-page metaphor — each section reads like a distinct block in a well-organised doc.
Section Cadence
The pattern is light throughout: light hero → light feature grid → light social-proof → light pricing → light footer. Visual variety comes from warm-cream callout cards and coloured doc-block accents punctuating the white canvas, not from full-bleed dark bands. The rhythm is calm and consistent — the document never abandons its white page.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| micro | 2px | inline tags, tiny inline pills |
| sm | 4px | small badges, tight UI primitives |
| md | 8px | buttons, inputs, primary CTA pills |
| lg | 12px | cards, callout blocks, secondary panels |
| xl | 16px | modals, emphasis blocks |
| pill | 9999px | badges, avatars, status tags |
Coda’s radii are moderate-modern: nothing sharper than 2px, nothing more pillowy than 16px (excluding pills). The 8px button radius and 12px card radius are the brand’s most recognisable shape primitives — the same modern-SaaS pairing seen across the productivity-tool lineage. The translucent “Contact sales” button is the one exception, softening to 12px.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, no shadow, on #ffffff | body content, default surfaces |
| 1 | 1px hairline border (#e3e3e3) | standard cards within a feature band |
| 2 | hairline + ambient shadow | elevated cards over white |
| 3 | raised two-layer shadow | pricing, demo previews, floating panels |
| 4 | popover shadow, 12px radius | tooltips, dropdowns, toasts |
| 5 | popover shadow + backdrop, 16px radius | modals, lightboxes |
Shadow Philosophy: Coda achieves most depth through the hairline #e3e3e3 border and surface tone (#ffffff → #fafafa → #f0f0f0), reserving shadow for genuinely floating elements — pricing tiers, dropdowns, modals. Shadows are neutral black at very low opacity (rgba(0,0,0,0.04–0.12)), never tinted or heavy. The default card treatment is bordered-flat; a card that casts a shadow is a card that is meant to float.
8. Interaction & Motion
Easing
- standard:
cubic-bezier(0.4, 0, 0.2, 1)— the workhorse Material-style ease for most transitions. - decelerate:
cubic-bezier(0, 0, 0.2, 1)— used when an element enters from off-canvas or a dropdown expands.
Durations
- fast (150ms): button hover colour shift, card hover tint, link underline grow.
- standard (240ms): dropdown open, button hover lift, accordion expand.
- slow (320ms): modal open, page band cross-fade.
Per-component micro-states
- Button hover: background colour shift over 150ms with
standardease; primary black lifts to#1a1a1a, blue accent to#0052cc. OptionaltranslateY(-1px)lift. - Card hover: border deepens (
#e3e3e3→#cccccc) over 150ms; if elevated, shadow intensifies one tier. - Link hover: underline grows over 150ms with
decelerateease; colour stays#0066ff, never shifts on hover alone. - Input focus: ring fades in at 100ms; border colour shifts to
#0066ffsimultaneously.
Page transitions
Coda’s marketing site keeps transitions quiet — opacity-only fades at roughly 200ms with standard ease. No slide, no parallax, no scale. The productivity register favours stillness; the page should feel as calm as an open document.
Reduced-motion strategy
prefers-reduced-motion: reduce is respected: transform-based animations collapse to opacity-only at 100ms, hover lifts disappear, and page transitions become near-instant cuts. The hero remains static rather than animating in.
9. Accessibility & A11y
Contrast pairs (computed)
- text on bg:
#212121on#ffffff→ 16.1:1 (AAA at all sizes). - text-muted on bg:
#444444on#ffffff→ 9.74:1 (AAA at body sizes). - on-brand on brand:
#ffffffon#0066ff→ 4.83:1 (AA at body, AAA at large). - on-cta on cta-primary:
#ffffffon#000000→ 21.0:1 (AAA, maximum contrast). - text on accent:
#212121on#f8ad40→ 8.47:1 (AAA — dark text on the amber highlight is the only safe pairing).
Note: white text on #f8ad40 fails contrast — always pair the amber highlight with near-black #212121 text, never white.
Focus indicators
- Default focus ring:
3px solid rgba(0,102,255,0.4)with 1px offset; never removed for mouse users. - Within input fields: border colour shifts to
#0066ffand adds a0 0 0 3px rgba(0,102,255,0.18)ring. - On the black primary CTA: ring uses an offset white halo plus the blue ring so it reads against the black fill.
ARIA patterns
- Header search uses
role="combobox"witharia-expanded,aria-controls,aria-activedescendant. - Modals use
role="dialog",aria-modal="true", focus trap,Escto close. - Tabs use
role="tablist"/role="tab"/role="tabpanel"with arrow-key navigation. - Pricing toggles use
role="radiogroup"rather than tabs.
Keyboard nav order
Top bar → hero CTAs → feature bands in DOM order → pricing → footer. Tab order matches visual order. A Skip to content link appears at the top of the DOM, visible on focus.
Screen reader hints
- Decorative doc-block illustrations carry
aria-hidden="true". - Icon-only buttons carry
aria-labeldescribing the action (“Open menu”, “Get started”). - Stat callouts use
aria-label="X million users"rather than relying on numeral parsing.
Reduced motion
Honored throughout — see §8.
10. Responsive Behavior
Breakpoints
| Tier | Width | Behavior |
|---|---|---|
| mobile | < 640px | single column, 16px gutter, 48px section padding |
| tablet | 640–1024px | 2-column feature grids, 24px gutter, 64px section padding |
| desktop | 1024–1280px | 3-column feature grids, 24px gutter, 96px section padding |
| wide | 1280px+ | container caps at 1280px, content centred |
Touch Targets
Minimum 44×44px on touch devices, achieved through padding (10px vertical + 16px font line-height ≈ 44px). Inline links increase tap area through padding: 8px 0 rather than relying on font line-height alone.
Collapsing strategy
- Top nav: hamburger menu < 1024px; full nav above.
- Feature grid: 3 → 2 → 1 columns at 1024 / 640.
- Hero: product image moves below copy < 640px; copy claims full width.
- CTA pair: primary and secondary stack vertically < 640px, primary on top.
- Pricing: tiers stack vertically < 1024px, with the recommended tier highlighted via order shift.
- Footer: 4-column → 2-column → 1-column at 1024 / 640.
Image behavior
Hero and product imagery use srcset with 1x/2x densities and sizes matched to container width. Below 640px, object-fit: cover and a locked aspect-ratio keep product screenshots from distorting.
Container queries
Used inside the in-product side-nav mockups — the nav switches between condensed and expanded modes based on container width rather than viewport.
11. Content & Voice
Tone
Coda’s tone is structured-confident: clear, practical, and quietly capable. It writes like product documentation that learned to market itself — present tense, plain declaratives, and a focus on what the workspace lets you do rather than how it feels. Headlines name the value directly (“Your all-in-one collaborative workspace.”) and sentences favour periods over exclamation marks. The voice is productivity-first: helpful, precise, never breathless.
Microcopy patterns
- Button verbs: “Get started”, “Request a demo”, “Contact sales”. The primary is the generic confident “Get started”; the secondary and tertiary name the sales motion. Verbs are short and action-led.
- Error messages: pattern is “Couldn’t [action] because [reason]. Try [recovery].” e.g. “Couldn’t sync the doc because the connection dropped. Check your network and retry.”
- Success confirmations: short, declarative, single-line. “Doc created.” rather than “Your doc has been created successfully!”
Empty states
Empty states are practical and inviting rather than cheerful. “No docs yet — start from a template” (link to gallery) or “Your first doc” with an embedded preview. The cream-callout block is a natural home for empty-state guidance. Never empty-state cartoons or “Oops!” copy.
CTA verb conventions
- Primary marketing CTA: “Get started” (the canonical phrase, on the black pill).
- Demo CTA: “Request a demo”.
- Sales CTA: “Contact sales”.
- In-product: “New doc”, “Add page”, “Insert block” — verb-plus-noun naming the doc primitive.
12. Dark Mode & Theming
Light-only for the marketing surface — no full dark variant is offered. The canvas stays paper-white #ffffff throughout, and visual variety comes from warm-cream callouts and coloured doc-block accents rather than dark bands.
The product application ships its own theming with coloured doc blocks (the --codaBrandGreen #006838, --block-color-highlight #f8ad40, and callout backgrounds observed in the token layer), but the marketing site commits to a single light register. Designers building Coda-style marketing pages should not introduce a dark mode; instead, use the cream-callout family (#fff6ec → #ffe6c9) and the amber highlight to create warmth and emphasis against the white page.
If a dark surface is genuinely required for a component (for example, a code-block or a footer accent), keep it bounded and exceptional: a near-black #212121 ground with #ffffff text and a lighter blue accent to hold contrast — but treat it as a deliberate one-off, not a system-wide theme.
13. Lineage & Influences
Coda sits squarely in the post-Notion document-workspace lineage. Notion defined the marketing register these tools now share — a paper-white canvas treated as a literal page, near-black text that stops short of pure black, and a single restrained accent rather than a multi-hue palette. Coda adopts that register wholesale and then adds its own document-block warmth: the cream-to-peach callouts (#fff6ec → #ffe6c9), the amber highlight (#f8ad40), and the decorative brand green (#006838) are the visual residue of Coda’s actual product, where coloured blocks and callouts are first-class primitives.
Typographically, Coda speaks the contemporary productivity-tool dialect: Calibre — Klim Type Foundry’s geometric-humanist sans, used by Dropbox and a generation of SaaS brands — carries the confident display register, while Inter (Rasmus Andersson’s screen-optimised workhorse) handles body and UI. The single confident #0066ff blue is a Stripe move — one chromatic event, no hue inflation — and the hairline borders with white-on-white tonal depth place Coda adjacent to Linear. What Coda rejects: gradient-heavy consumer aesthetics, multi-accent palettes, dark default canvases, and drop-shadow elevation as a default. The restraint is the discipline; the cream callout is the surprise; the solid-black CTA is the confident signature that keeps the blue free for content.
Named influences
- Notion (notion.com) — Defined the document-workspace marketing register Coda competes within.
- Klim Type Foundry — Calibre (klim.co.nz) — Calibre display face; the confident, neutral-modern headline voice.
- Inter (rsms.me/inter) — Body and UI typeface; screen-optimised legibility at small sizes.
- Stripe (stripe.com) — Single-blue, trust-via-restraint chromatic discipline.
- Linear (linear.app) — Contemporary productivity-SaaS register; hairline borders and white-on-white tonal depth.
14. Do’s and Don’ts
Do
- Keep the canvas paper-white
#ffffffand the text near-black#212121; the restraint is the brand. - Use Calibre for every headline (600–700 weight) and Inter for all body and UI text; never swap the roles.
- Reserve
#0066ffblue for links, focus rings, and selective interactive emphasis — one confident chromatic event. - Make the primary CTA a solid-black
#000000pill at 8px radius; it keeps the blue free for content. - Reach for the cream-callout family (
#fff6ec→#ffe6c9) and amber highlight (#f8ad40) to add warmth and signal the document-block flavour. - Pair the amber highlight only with near-black text (
#212121); white on amber fails contrast. - Build depth from the hairline
#e3e3e3border and surface tone first; add shadow only for genuinely floating elements. - Run hero headlines in Calibre 700 at roughly
-0.02emtracking; the negative track carries the confident voice. - Use 8px radius for buttons and inputs, 12px for cards and callouts.
- Honor
prefers-reduced-motion: reduce— collapse hover lifts and slide-ins to opacity-only.
Don’t
- Don’t introduce a dark default canvas; the marketing surface is light-only.
- Don’t use pure black
#000000for body text — the near-black#212121is calibrated for paper-on-paper softness. - Don’t spray the
#0066ffblue across the page; more than one saturated cool accent breaks the discipline. - Don’t add a second non-blue accent beyond the cream/amber/green doc-block family.
- Don’t put white text on the amber highlight (
#f8ad40) — it fails contrast; use#212121. - Don’t apply heavy drop-shadows to default cards; depth here is bordered and tonal.
- Don’t replace the solid-black primary CTA with a blue one as the default; the black pill is the signature.
- Don’t break the hairline-border discipline with thick or saturated dividers.
- Don’t reach for gradient-heavy consumer aesthetics; Coda is structured, not flashy.
- Don’t run Calibre below 600 weight for headlines; the confident voice needs the weight.
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
surface-muted: #f0f0f0
text: #212121
text-muted: #444444
brand: #0066ff
brand-hover: #0052cc
brand-soft: #e6efff
cta-primary: #000000
accent (amber highlight): #f8ad40
accent-cream: #fff6ec
accent-callout: #ffe6c9
border: #e3e3e3Example Component Prompts
-
“Create a marketing hero in the Coda style: paper-white
#ffffffcanvas, Calibre 72px / 700 weight headline in#212121with-0.02emtracking, 18px subhead at Inter 400 in#444444, a solid-black primary CTA pill (#000000background, white text, 8px radius,10px 16pxpadding) reading ‘Get started’, and an outlined secondary button (#ffffffbackground,1px solid #cccccc,#212121text) reading ‘Request a demo’.” -
“Design a feature card in the Coda style:
#ffffffbackground, 12px radius,1px solid #e3e3e3hairline border, 24px padding, Calibre 600 / 22px H4 title in#212121, body at Inter 400 / 16px in#212121, no drop-shadow.” -
“Render a document-block callout: warm-cream
#fff6ecbackground,1px solid #ffe6c9border, 12px radius, 24px padding, a#f8ad40amber accent bar on the left edge, body text in Inter 400 / 16px#212121.” -
“Create a pricing tier card:
#ffffffbackground,1px solid #e3e3e3hairline, 12px radius, 28px padding, raised shadow (rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px), tier name in Calibre 600 / 20px, price in Calibre 700 / 48px, feature list in Inter 16px / 1.55 with#0066ffbullet markers, and a solid-black ‘Get started’ CTA pill.” -
“Design a top navigation bar:
#ffffffbackground with1px solid #e3e3e3bottom border, 64px height, Calibre 700 / 18px logo, Inter 500 / 14px nav items in#212121that turn#0066ffon hover, and a solid-black ‘Get started’ pill at the right.” -
“Render a status badge row: a neutral pill (
#f0f0f0background,#444444Inter 500 / 13px text, 9999px radius) and a blue status pill (#e6efffbackground,#0066fftext) and a warm doc-block pill (#ffe6c9background,#9a6400text), each at4px 10pxpadding.”
Iteration Guide
- Start with the canvas: confirm the
#ffffffpaper-white base and the 8px / 12px button-card radius pair. If it looks too consumer, you have likely added gradient or saturation. - Verify the type pairing: headlines must be Calibre at 600–700; body and UI must be Inter. If a headline reads soft, tighten the track toward
-0.02emand confirm it is Calibre, not Inter. - Audit the action colour: the
#0066ffblue should appear only on links, focus, and selective emphasis — and the primary CTA should be solid black#000000. If the page has two saturated blues, one is wrong. - Check the near-black: body text is
#212121, never pure#000. If your text looks harsh, you have drifted to full black. - Add the doc-block warmth: every page benefits from one cream callout (
#fff6ec/#ffe6c9) or amber highlight (#f8ad40) to signal the document-tool flavour. An all-blue-and-white page reads as generic SaaS. - Confirm the border treatment: dividers and default cards use a
#e3e3e3hairline, not shadow. If you see drop-shadows on resting cards, remove them. - Test the contrast on amber: amber highlights (
#f8ad40) must carry near-black#212121text, never white — white fails WCAG on amber. - Check the reduced-motion path: hover lifts and slide-ins should collapse to opacity-only when
prefers-reduced-motion: reduceis set.
Drop coda into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add coda 2 · ship landing page
npx agentkit init --design coda