light · sans · structured · cool · soft · spacious
Plaid
Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality.
By webdesignhot · plaid.com
$ npx design-md add plaid
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
1440 × 900
mobile · 390 × 844
Tokens design.md/v1.5
- bg
#ffffff - bg-soft
#f7f9fb - bg-blue
#eaf3ff - bg-cream
#f3efe6 - bg-ink
#000000 - surface
#f3f5f8 - surface-soft
#fafbfc - surface-cream
#faf6ed - text AAA · 21.0
#000000 - text-strong
#000000 - text-medium
#1a1f29 - text-muted
#4a5568 - text-soft
#7a8390 - text-faint — · 2.4
#a0a8b3 - brand AA·LG · 3.8
#0a85ea - brand-strong
#0066c0 - brand-deep
#003c80 - brand-soft
#dceeff - brand-wash
rgba(10, 133, 234, 0.08) - on-brand
#ffffff - accent
#000000 - accent-soft
rgba(10, 133, 234, 0.08) - link
#0a85ea - link-hover
#0066c0 - selected-bg
#eaf3ff - disabled
#c4cad3 - border — · 1.3
rgba(0, 0, 0, 0.10) - border-strong — · 1.6
rgba(0, 0, 0, 0.20) - border-soft
rgba(0, 0, 0, 0.06) - border-blue
rgba(10, 133, 234, 0.30) - success-bg
#dcf3e3 - success-text
#1f5d3f - warning-bg
#fff0c5 - warning-text
#7a5e1f - danger-bg
#fde0e0 - danger-text
#8a2828 - info-bg
#dceeff - info-text
#003c80
Ship faster than ever.
display-hero "Plaid Sans" 80px w600 -0.025em
Ship faster than ever.
display "Plaid Sans" 64px w600 -0.02em
Ship faster than ever.
h1 "Plaid Sans" 56px w600 -0.02em
Built for teams that ship.
h2 "Plaid Sans" 44px w600 -0.015em
A complete kit
h3 "Plaid Sans" 32px w600 -0.01em
The quick brown fox jumps over the lazy dog.
quote-pull "Plaid Sans" 28px w500
The quick brown fox jumps over the lazy dog.
h4 "Plaid Sans" 24px w600
The quick brown fox jumps over the lazy dog.
body-large "Plaid Sans" 20px w400
The quick brown fox jumps over the lazy dog.
h5 "Plaid Sans" 18px w600
The quick brown fox jumps over the lazy dog.
body "Plaid Sans" 16px w400
The quick brown fox jumps over the lazy dog.
body-small "Plaid Sans" 14px w400
npx design-md add linear
code "JetBrains Mono" 14px w400
OUR DESIGN SYSTEM
caption "Plaid Sans" 13px w400
OUR DESIGN SYSTEM
caption-tabular "JetBrains Mono" 13px w500
The quick brown fox jumps over the lazy dog.
eyebrow "JetBrains Mono" 12px w500 0.04em
OUR DESIGN SYSTEM
label "JetBrains Mono" 12px w500 0.04em
npx design-md add linear
code-micro "JetBrains Mono" 12px w400
- step-0 4px
- step-1 8px
- step-2 12px
- step-3 16px
- step-4 20px
- step-5 24px
- step-6 32px
- step-7 40px
- step-8 48px
- step-9 64px
- step-10 80px
- step-11 96px
- step-12 128px
- step-13 160px
- micro
2px - xs
4px - sm
6px - md
8px - button
8px - lg
12px - card
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
Plaid's marketing site descends directly from the Stripe-era fintech trust palette: white canvas, near-pure black type, pale-blue panels, single confident action blue. The rendition is quieter and more institutional than today's Stripe — Plaid leans on classical typography (a Plaid-Sans variant of Inter at 500-600, no serif) and 1px / 10% black hairlines rather than gradients. The single moment of personality in an otherwise restrained system is the Benjamin Franklin mascot — an animated, illustrated figure who narrates feature sections from inside a warm cream band `#f3efe6`. That break from cool blue-greys to warm cream is Plaid's signature trick, and it positions Plaid as more consumer-friendly than the Visa/Mastercard infrastructure plays it competes against. The 12px card radius and 8px button radius sit at the modern 2026 SaaS consensus, neither archaic (Mercury's 6px) nor consumer-soft (Wise's full pill).
- Pale-blue trust palette, single-accent CTA discipline, classical sans typography
- Black CTA on white canvas with mono micro-labels
- Mascot-as-narrative-device — Plaid's Franklin echoes that warm-illustration tradition inside a fintech context
- Cousin in the modern-fintech-restraint lineage; tighter radii (6px) for a more archaic feel
- Institutional discipline; hairline-only depth strategy
- Inter / Rasmus AnderssonDNA reference for Plaid Sans neo-grotesque proportions
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: Plaid
tagline: Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality.
author: webdesignhot
source_url: https://plaid.com
spec: design.md/v1.5
quality: curated
featured: true
categories: [fintech, dev-tools]
tags: [light, sans, structured, cool, soft, spacious]
preview_swatch: ['#ffffff', '#0a85ea', '#000000']
related: [stripe, vercel, mintlify]
description: 'Plaid''s site uses a pale-blue trust palette — white canvas, near-black ink, a single confident `#0a85ea` action blue, and Inter (or a custom plaid-sans) for both display and body. The aesthetic descends from Stripe''s 2017-era restraint, but Plaid breaks the discipline with one move: an animated Benjamin-Franklin mascot that sits inside an otherwise institutional layout, signalling consumer warmth on a developer-finance product. The system reads as a quieter, more institutional cousin of modern Stripe — 1px / 10% black hairlines, no gradients, no glow, near-pure-black H1 at 64px, mono micro-labels at 12px / 0.04em tracking, and the cream Franklin band as the brand''s singular emotional zone.'
colors:
# Primary
bg: '#ffffff' # white canvas — trust default
bg-soft: '#f7f9fb' # palest blue-grey panel
bg-blue: '#eaf3ff' # signature pale-blue trust band
bg-cream: '#f3efe6' # warm-cream "Franklin storytelling" band
bg-ink: '#000000' # rare black band for emphasis
surface: '#f3f5f8' # cool-grey card base
surface-soft: '#fafbfc' # softer card lift on white
surface-cream: '#faf6ed' # quieter cream tint inside Franklin sections
text: '#000000' # near-pure black on white
text-strong: '#000000' # absolute black for hero
text-medium: '#1a1f29' # rare deeper-cool ink
text-muted: '#4a5568' # secondary copy
text-soft: '#7a8390' # captions
text-faint: '#a0a8b3' # disabled, footer microcopy
# Brand
brand: '#0a85ea' # Plaid action blue — links and accent only
brand-strong: '#0066c0' # pressed / hover blue
brand-deep: '#003c80' # rare deep blue for emphasis
brand-soft: '#dceeff' # info wash
brand-wash: 'rgba(10, 133, 234, 0.08)' # hover-tinted background
on-brand: '#ffffff'
# Secondary brand: black (CTA fill)
accent: '#000000' # secondary brand colour is black — CTA fill
accent-soft: 'rgba(10, 133, 234, 0.08)' # 8% blue tint for chips
# Interactive
link: '#0a85ea' # action blue links
link-hover: '#0066c0' # pressed
selected-bg: '#eaf3ff'
disabled: '#c4cad3'
# Borders
border: 'rgba(0, 0, 0, 0.10)' # 10% black hairline — defining border
border-strong: 'rgba(0, 0, 0, 0.20)' # emphasized rule
border-soft: 'rgba(0, 0, 0, 0.06)' # quietest separation
border-blue: 'rgba(10, 133, 234, 0.30)' # brand-tinted divider
# Semantic
success-bg: '#dcf3e3'
success-text: '#1f5d3f'
warning-bg: '#fff0c5'
warning-text: '#7a5e1f'
danger-bg: '#fde0e0'
danger-text: '#8a2828'
info-bg: '#dceeff' # brand-soft doubles as info
info-text: '#003c80'
typography:
display:
family: '"Plaid Sans", "Inter Display", Inter, "Helvetica Neue", Arial, sans-serif'
weights: [500, 600, 700]
opentype-features: ['ss01', 'liga', 'kern']
body:
family: '"Plaid Sans", Inter, -apple-system, "Helvetica Neue", Arial, sans-serif'
weights: [400, 500, 600]
opentype-features: ['liga', 'kern']
mono:
family: '"JetBrains Mono", Menlo, Consolas, "SF Mono", monospace'
weights: [400, 500]
opentype-features: ['tnum', 'zero']
scale:
display-hero: { size: 80, weight: 600, lineHeight: 1.05, tracking: '-0.025em', family: display, opentype: 'ss01' }
display: { size: 64, weight: 600, lineHeight: 1.05, tracking: '-0.02em', family: display }
h1: { size: 56, weight: 600, lineHeight: 1.08, tracking: '-0.02em', family: display }
h2: { size: 44, weight: 600, lineHeight: 1.10, tracking: '-0.015em', family: display }
h3: { size: 32, weight: 600, lineHeight: 1.20, tracking: '-0.01em', family: display }
h4: { size: 24, weight: 600, lineHeight: 1.25, family: display }
h5: { size: 18, weight: 600, lineHeight: 1.40, family: display }
eyebrow: { size: 12, weight: 500, lineHeight: 1.40, tracking: '0.04em', family: mono, transform: uppercase }
body-large: { size: 20, weight: 400, lineHeight: 1.50, family: body }
body: { size: 16, weight: 400, lineHeight: 1.50, family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.50, family: body }
caption: { size: 13, weight: 400, lineHeight: 1.40, family: body }
caption-tabular: { size: 13, weight: 500, lineHeight: 1.40, family: mono, opentype: 'tnum' }
label: { size: 12, weight: 500, lineHeight: 1.30, family: mono, tracking: '0.04em', transform: uppercase }
code: { size: 14, weight: 400, lineHeight: 1.55, family: mono, opentype: 'tnum zero' }
code-micro: { size: 12, weight: 400, lineHeight: 1.40, family: mono }
quote-pull: { size: 28, weight: 500, lineHeight: 1.30, family: display }
radius:
micro: 2
xs: 4
sm: 6
md: 8
lg: 12
xl: 16
card: 12
button: 8
pill: 9999
spacing:
base: 8
scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160]
layout:
page-width: 1200
prose-width: 720
site-gutter: 'clamp(24px, 4vw, 56px)'
header-height: 72
grid-columns: 12
section-rhythm: '96-128px'
components:
button-primary:
background: '#000000'
text: '#ffffff'
padding: '12px 20px'
radius: 8
border: '1px solid #000000'
font: 'Plaid Sans 500 / 15px'
hover-bg: '#1a1f29'
active-bg: '#000000'
use: 'Primary CTA — black-on-white, the institutional fintech move. *Get started, Talk to sales, Try Plaid.*'
button-secondary:
background: '#ffffff'
text: '#000000'
padding: '12px 20px'
radius: 8
border: '1px solid rgba(0, 0, 0, 0.10)'
font: 'Plaid Sans 500 / 15px'
hover-bg: '#f7f9fb'
use: 'Outlined twin — same shape, hairline border. *Read more, Watch demo.*'
button-tertiary:
background: 'transparent'
text: '#000000'
padding: '12px 16px'
radius: 8
border: '1px solid rgba(0, 0, 0, 0.06)'
font: 'Plaid Sans 500 / 15px'
hover-bg: 'rgba(0, 0, 0, 0.03)'
use: 'Quietest action — repeated CTAs, footer links.'
button-link:
background: 'transparent'
text: '#0a85ea'
padding: '0'
radius: 0
font: 'Plaid Sans 500 / 16px'
underline: true
hover-text: '#0066c0'
use: 'Inline action blue — developer documentation references, citation links.'
card:
background: '#ffffff'
border: '1px solid rgba(0, 0, 0, 0.10)'
radius: 12
padding: '32px'
use: 'Feature tile, capability card, pricing block — flat white on coloured panel.'
card-blue:
background: '#eaf3ff'
border: 'none'
radius: 12
padding: '32px'
use: 'Pale-blue trust panel — full-bleed signature section.'
card-cream:
background: '#f3efe6'
border: 'none'
radius: 12
padding: '40px 32px'
use: 'Cream Franklin band — illustration-heavy, the brand''s emotional zone.'
input:
background: '#ffffff'
border: '1px solid rgba(0, 0, 0, 0.20)'
radius: 8
padding: '12px 16px'
font: 'Plaid Sans 400 / 16px'
placeholder-color: '#7a8390'
focus-ring: '0 0 0 2px rgba(10, 133, 234, 0.40)'
focus-border: '#0a85ea'
use: 'Form fields, search, contact-sales inputs.'
badge-eyebrow:
background: 'transparent'
text: '#4a5568'
padding: '0'
radius: 0
font: 'JetBrains Mono 500 / 12px / uppercase / 0.04em tracking'
use: 'Section eyebrow — mono micro-label, no chrome.'
badge-blue:
background: 'rgba(10, 133, 234, 0.08)'
text: '#003c80'
padding: '4px 10px'
radius: 4
font: 'Plaid Sans 500 / 12px'
use: 'Subtle blue-tinted status pill on white card.'
nav-link:
background: 'transparent'
text: '#000000'
padding: '8px 12px'
font: 'Plaid Sans 500 / 15px'
hover-text: '#0a85ea'
use: 'Header nav — black with action-blue hover.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-institutional: 'cubic-bezier(0.32, 0.72, 0, 1)'
duration-fast: 100
duration-standard: 180
duration-slow: 280
duration-page: 400
reduced-motion: 'respects prefers-reduced-motion: reduce — Franklin animations halt at first frame, transitions become opacity-only, durations halved'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1440
shadows:
none: 'none'
ambient: 'rgba(0, 0, 30, 0.04) 0 1px 3px'
standard: 'rgba(0, 0, 30, 0.06) 0 4px 12px'
elevated: 'rgba(0, 0, 30, 0.08) 0 12px 32px -8px, rgba(0, 0, 30, 0.04) 0 4px 8px'
cool: 'rgba(10, 30, 60, 0.10) 0 16px 40px -16px'
ring: '0 0 0 2px rgba(10, 133, 234, 0.40)'
accessibility:
contrast-text-on-bg: 21.0 # #000 on #fff — AAA at all sizes
contrast-text-on-brand: 4.5 # #ffffff on #0a85ea — AA at body sizes
contrast-text-on-cta-bg: 21.0 # #ffffff on #000 — AAA
contrast-link-on-bg: 4.6 # #0a85ea on #ffffff — AA at body sizes
contrast-text-muted-on-bg: 8.6 # #4a5568 on #ffffff — AAA at body
focus-ring: '2px solid rgba(10, 133, 234, 0.40) with 2px offset'
reduced-motion-honored: true
keyboard-nav: 'visible focus on every interactive surface; tab order matches visual flow; Franklin mascot is decorative and aria-hidden'
prose-line-length: 'capped at 720px (~70 characters) for institutional readability'
franklin-mascot: 'decorative animation marked aria-hidden; pauses on prefers-reduced-motion; never carries content meaning'
lineage:
summary: |
Plaid's marketing site descends directly from the Stripe-era
fintech trust palette: white canvas, near-pure black type,
pale-blue panels, single confident action blue. The rendition is
quieter and more institutional than today's Stripe — Plaid leans
on classical typography (a Plaid-Sans variant of Inter at 500-600,
no serif) and 1px / 10% black hairlines rather than gradients.
The single moment of personality in an otherwise restrained
system is the Benjamin Franklin mascot — an animated, illustrated
figure who narrates feature sections from inside a warm cream
band `#f3efe6`. That break from cool blue-greys to warm cream is
Plaid's signature trick, and it positions Plaid as more
consumer-friendly than the Visa/Mastercard infrastructure plays
it competes against. The 12px card radius and 8px button radius
sit at the modern 2026 SaaS consensus, neither archaic (Mercury's
6px) nor consumer-soft (Wise's full pill).
influences:
- name: Stripe (2017-2019 era)
role: Pale-blue trust palette, single-accent CTA discipline, classical sans typography
url: https://stripe.com
- name: Vercel
role: Black CTA on white canvas with mono micro-labels
url: https://vercel.com
- name: Mailchimp / Slack illustrations
role: Mascot-as-narrative-device — Plaid's Franklin echoes that warm-illustration tradition inside a fintech context
url: https://mailchimp.com
- name: Mercury
role: Cousin in the modern-fintech-restraint lineage; tighter radii (6px) for a more archaic feel
url: https://mercury.com
- name: Linear
role: Institutional discipline; hairline-only depth strategy
url: https://linear.app
- name: Inter / Rasmus Andersson
role: DNA reference for Plaid Sans neo-grotesque proportions
dark-mode: null # marketing surface is light-only; no dark variant offered
---
## 1. Visual Theme & Atmosphere
Plaid's homepage is the trust-fintech archetype, refined. White canvas, black H1, pale-blue trust panels, a single confident `#0a85ea` link blue, and 10%-black hairlines doing the structural work. Where contemporary Stripe reaches for chromatic gradient, animated grids, and 3D meshes, Plaid stays with the older Stripe-era restraint — near-pure black on white, single-accent blue, generous whitespace, hairline rules. The page reads as *infrastructure* rather than *campaign*: the visual register is closer to a primary-bank annual report than to a Y Combinator pitch deck, and the discipline is the point.
The single moment of personality in this otherwise institutional layout is the **Benjamin Franklin mascot** — an illustrated, gently-animated figure who narrates feature sections from inside warm-cream `#f3efe6` bands. That mascot is the brand's emotional signature: cool-blue-and-white precision broken once per page by a hand-drawn historical figure with subtle motion. The break from cool greys into warm cream — and from typographic restraint into character animation — is what differentiates Plaid from the otherwise-similar Stripe-trust-palette competitors. It positions Plaid as more *consumer-friendly* than the Visa/Mastercard infrastructure plays it competes against without abandoning the developer-credibility surface.
Typographically, Plaid runs **one family across the entire site** — a custom Plaid Sans (an Inter-class neo-grotesque) at 500–600 weight for both display and body. There is no serif anywhere on the marketing surface. H1 holds at 56–64px with negative tracking; body is the same family at 16px on a 24px line; mono micro-labels appear at 12px with 0.04em tracking as eyebrow text. The typographic discipline reinforces the institutional tone — no mixed faces, no decorative weights, no ornamental italics.
The CTA convention is decisive: **the action blue `#0a85ea` is reserved for links and accent, never as a primary button fill**. Primary buttons are *black-on-white* (`#000000` bg, `#ffffff` text, 8px radius). That distinction — blue for inline action, black for page-level commitment — is one of Plaid's signature design rules and the easiest way to break the brand if you ignore it.
Atmospheric vocabulary that captures the feeling: *primary-bank, hairline-only, pale-blue-trust, near-pure-black-on-white, mono-micro-eyebrow, Franklin-cream-band, Stripe-2017, institutional-quiet, no-gradient-ever, structural-not-decorative.* The brand reads as if it were laid out by a CFO with taste.
**Key Characteristics**
- White `#ffffff` canvas — the trust default, never substituted
- **Action blue `#0a85ea` for links only** — never a primary button fill
- Primary CTA is **black-on-white** (`#000000` / `#ffffff` / 8px radius)
- Pale-blue `#eaf3ff` trust panels alternating with white sections
- **Cream Franklin band `#f3efe6`** — the brand's singular emotional zone
- 10%-black hairlines (`rgba(0, 0, 0, 0.10)`) — every border, every divider
- No shadows, no gradients, no glow — flat-and-hairline discipline
- Single typeface across site (Plaid Sans / Inter) — no serif
- Mono micro-labels at 12px / 0.04em tracking as section eyebrows
- 12px card radius, 8px button radius — modern but not consumer-soft
- Animated Benjamin Franklin mascot — illustrated, decorative, signature
## 2. Color Palette & Roles
### Primary
- **bg** `#ffffff` — white canvas; the trust default, never substituted on body surfaces.
- **bg-soft** `#f7f9fb` — palest blue-grey panel, a quieter alternation between white sections.
- **text** `#000000` — near-pure black, no opacity softening. Plaid keeps body type at full strength.
- **cta-bg** `#000000` — primary CTA fill; the brand's deliberate institutional move.
- **on-cta** `#ffffff` — pure white label on black; maximum value contrast.
### Brand & Accent
- **brand** `#0a85ea` — Plaid action blue. **Used for links and inline action only — never as a primary button fill.**
- **brand-strong** `#0066c0` — pressed / hover state.
- **brand-deep** `#003c80` — rare deep blue for emphasis or info text.
- **brand-soft** `#dceeff` — info wash, soft pill backgrounds.
- **brand-wash** `rgba(10, 133, 234, 0.08)` — hover tint for blue-themed surfaces.
- **accent** `#000000` — secondary brand colour is *black*, not a second hue. The CTA itself uses black, not blue.
### Sectional Bands
- **bg-blue** `#eaf3ff` — signature pale-blue trust band; appears 1–2× per page.
- **bg-cream** `#f3efe6` — warm-cream Franklin storytelling band; the brand's emotional zone.
- **bg-ink** `#000000` — rare full-black band reserved for hero statements (e.g. trust statistics, security claims).
### Interactive
- **link** `#0a85ea` — action blue, with underline by default in body.
- **link-hover** `#0066c0` — deeper pressed blue.
- **selected-bg** `#eaf3ff` — pale-blue selection wash.
- **disabled** `#c4cad3` — cool-grey muted.
### Neutral Scale
- **text-strong** `#000000` — near-pure black, the headline ink.
- **text-medium** `#1a1f29` — deeper-cool variant for high-emphasis copy.
- **text-muted** `#4a5568` — secondary copy, metadata.
- **text-soft** `#7a8390` — captions, helper text.
- **text-faint** `#a0a8b3` — disabled labels, footer microcopy.
### Surface & Borders
- **surface-0 (page)** — `#ffffff` white canvas.
- **surface-1 (panel)** — `#f7f9fb` palest blue-grey.
- **surface-2 (card)** — `#ffffff` white card on coloured panel; or `#f3f5f8` cool-grey card on white.
- **surface-cream** — `#faf6ed` quieter cream tint inside Franklin sections.
- **border** `rgba(0, 0, 0, 0.10)` — 10%-black hairline, the brand's defining border.
- **border-strong** `rgba(0, 0, 0, 0.20)` — emphasized rule, hover deepening.
- **border-soft** `rgba(0, 0, 0, 0.06)` — quietest separation.
- **border-blue** `rgba(10, 133, 234, 0.30)` — rare brand-tinted divider on blue surfaces.
### Shadow Colors
Plaid's shadows are **cool-tinted and sparse**. The brand prefers hairline borders to drop shadows on every content surface — cards lift via 1px borders rather than elevation. When shadows do appear (modals, popover layers, the floating Plaid Link consent dialog), they're tinted with low-opacity cool blue (`rgba(0, 0, 30, 0.04)` to `0.08`), never neutral grey, and never warm. The cool tint reinforces the trust-palette temperature.
### Semantic
- **success** — bg `#dcf3e3`, text `#1f5d3f`, border `rgba(74, 122, 91, 0.30)`.
- **warning** — bg `#fff0c5`, text `#7a5e1f`, border `rgba(180, 145, 60, 0.30)`.
- **danger** — bg `#fde0e0`, text `#8a2828`, border `rgba(180, 50, 50, 0.30)`.
- **info** — bg `#dceeff` (brand-soft), text `#003c80`, border `rgba(10, 133, 234, 0.30)`.
The semantic palette is calm and institutional — no fluorescent warning yellow, no neon green-success. Every semantic colour stays within the cool-and-warm-cream temperature range of the brand.
## 3. Typography Rules
### Font Family
- **Display & UI**: `"Plaid Sans", "Inter Display", Inter, "Helvetica Neue", Arial, sans-serif` — custom Plaid Sans is an Inter-class neo-grotesque cut for Plaid's house. Falls back gracefully to Inter or Helvetica Neue on slow connections.
- **Body**: same family, weight 400/500/600.
- **Mono**: `"JetBrains Mono", Menlo, Consolas, "SF Mono", monospace` — used for eyebrow micro-labels (12px / 0.04em tracking / uppercase) and code blocks in developer documentation.
- **No serif anywhere on the marketing surface.**
- **OpenType features**: `liga` and `kern` always on; `tnum` and `zero` (slashed zero) in mono for tabular alignment; `ss01` for stylistic alternate at display sizes.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | Plaid Sans | 80px | 600 | 1.05 | -0.025em | ss01 liga | Homepage hero ceiling — rare |
| Display | Plaid Sans | 64px | 600 | 1.05 | -0.02em | ss01 | Section intro at scale |
| H1 | Plaid Sans | 56px | 600 | 1.08 | -0.02em | liga | Page title — restrained vs Brex 72 |
| H2 | Plaid Sans | 44px | 600 | 1.10 | -0.015em | liga | Major section |
| H3 | Plaid Sans | 32px | 600 | 1.20 | -0.01em | — | Sub-section |
| H4 | Plaid Sans | 24px | 600 | 1.25 | normal | — | Card heading |
| H5 | Plaid Sans | 18px | 600 | 1.40 | normal | — | Inline emphasis |
| Eyebrow | JetBrains Mono | 12px | 500 | 1.40 | 0.04em | uppercase | Mono micro-label — signature |
| Body Large | Plaid Sans | 20px | 400 | 1.50 | normal | — | Lede paragraph |
| Body | Plaid Sans | 16px | 400 | 1.50 | normal | — | Default body |
| Body Small | Plaid Sans | 14px | 400 | 1.50 | normal | — | Compact copy |
| Caption | Plaid Sans | 13px | 400 | 1.40 | normal | — | Image captions |
| Caption Tabular | JetBrains Mono | 13px | 500 | 1.40 | normal | tnum | Stats, transaction lists |
| Label | JetBrains Mono | 12px | 500 | 1.30 | 0.04em | uppercase | UI labels, section dividers |
| Pull Quote | Plaid Sans | 28px | 500 | 1.30 | normal | — | Testimonial pull-quote |
| Code | JetBrains Mono | 14px | 400 | 1.55 | normal | tnum zero | Inline + block |
| Code Micro | JetBrains Mono | 12px | 400 | 1.40 | normal | — | API endpoint refs |
### Principles
- **One typeface, full system.** Plaid Sans + JetBrains Mono is the entire family. No serif, no decorative face. The mono is reserved for eyebrows, labels, and code — every other context uses Plaid Sans.
- **Weight 600 is the headline ceiling.** Plaid never reaches for 700 or 800. The institutional register requires restraint; weight 600 reads as confident, not shouting.
- **H1 caps at 56–64px.** Brex hits 72; Ramp hits 80; Plaid plays it quieter at 56, hitting 64 only on rare hero statements. The size restraint is a deliberate institutional gesture.
- **Negative tracking scales with size.** -0.025em at 80px, -0.02em at 56–64px, -0.015em at 44px, -0.01em at 32px, normal below. Standard broadsheet compression.
- **Mono eyebrow as section signature.** The 12px / 0.04em / uppercase JetBrains Mono micro-label is the brand's most distinctive typographic move — every section opens with one.
- **Body width capped at 720px** even on a 1200px page — institutional reading column.
- **Tabular figures everywhere numbers matter.** `tnum` discipline in mono so stats, transaction lists, and code line numbers align cleanly.
- **No italic in display.** Italics are reserved for body emphasis only. Display type is upright, the institutional voice is calm.
## 4. Component Stylings
### Buttons
**Primary (Black-on-White)**
- Background: `#000000` near-pure black.
- Text: `#ffffff` pure white, Plaid Sans 500 / 15px.
- Padding: `12px 20px`. Radius: `8px`. Border: `1px solid #000000`.
- Hover: bg → `#1a1f29`; transition `180ms ease-standard`.
- Active: bg → `#000000` (depressed micro-shift).
- Use: Primary CTA — *Get started, Talk to sales, Try Plaid.* The institutional fintech move.
**Secondary (Outlined)**
- Background: `#ffffff`. Text: `#000000`. Border: `1px solid rgba(0, 0, 0, 0.10)`.
- Same padding, radius, font as primary.
- Hover: bg → `#f7f9fb`.
- Use: Twin to primary — *Read more, Watch demo, Read the docs.*
**Tertiary (Quietest)**
- Background: transparent. Text: `#000000`. Border: `1px solid rgba(0, 0, 0, 0.06)`.
- Hover: bg → `rgba(0, 0, 0, 0.03)`.
- Use: Footer links, repeated in-section CTAs.
**Link (Inline Action Blue)**
- Background: transparent. Text: `#0a85ea` Plaid action blue, underlined.
- Padding: 0. Font: Plaid Sans 500 / 16px.
- Hover: text → `#0066c0`.
- Use: Inline CTAs — *"learn more →", "see the docs"*. The action blue's primary home.
### Cards
**Feature Card (White on Panel)**
- Background: `#ffffff`. Border: `1px solid rgba(0, 0, 0, 0.10)`. Radius: `12px`. Padding: `32px`.
- Shadow: none — 1px hairline border alone.
- Hover: border → `rgba(0, 0, 0, 0.20)`; transition `180ms`.
- Use: Capability tile, pricing block, feature explanation.
**Blue Trust Panel (Sectional)**
- Background: `#eaf3ff`. Border: none. Radius: `12px` (or full-bleed).
- Padding: `48px` to `96px` depending on context.
- Use: Trust statement, security stat, "Plaid moves \$X trillion / year" type sectional.
**Cream Franklin Card (Sectional)**
- Background: `#f3efe6`. Border: none. Radius: `12px` (or full-bleed).
- Padding: `40px 32px`.
- Use: Illustrated Franklin scenes — the brand's emotional zone. Always paired with character animation.
### Badges, Tags, Pills
**Mono Eyebrow Label** — bg transparent, text `#4a5568`, padding 0, radius 0, font `JetBrains Mono 500 / 12px / 0.04em / uppercase`. The brand's most distinctive typographic chrome.
**Blue Status Pill** — bg `rgba(10, 133, 234, 0.08)`, text `#003c80`, radius `4px`, padding `4px 10px`. Subtle blue-tinted status on white card.
**Earth-Tone Status (Semantic)** — bg from semantic palette (success / warning / danger / info), radius `4px`, padding `4px 10px`. Calm, institutional, no fluorescents.
### Inputs / Forms
- Background: `#ffffff`. Border: `1px solid rgba(0, 0, 0, 0.20)`. Radius: `8px`. Padding: `12px 16px`.
- Font: Plaid Sans 400 / 16px. Placeholder: `#7a8390`.
- Focus: `0 0 0 2px rgba(10, 133, 234, 0.40)` ring, border → `#0a85ea`. Transition 100ms.
- Error: border → `#8a2828`, ring → `rgba(180, 50, 50, 0.30)`.
- Helper: caption 13px text-soft below.
### Navigation
- Header height `72px`. Background `#ffffff` (transparent on hero scrolling).
- Logo: Plaid wordmark left-aligned, black.
- Nav links: Plaid Sans 500 / 15px, colour `#000000`, padding `8px 12px`. Hover → `#0a85ea` action blue; underline appears under active link.
- Right-side CTA pair: tertiary "Sign in" + primary black "Get started".
- Mobile: full-screen sheet, links stack at 18px / 500 with 24px gap.
### Optional Components
**Pull Quote** — Plaid Sans 28px / 500, text-medium, with a 3px action-blue left rule. Reserved for customer-testimonial sections.
**Code Block (Developer Docs)** — JetBrains Mono 14px, bg `#f7f9fb`, radius `8px`, padding `16px 20px`, border `rgba(0, 0, 0, 0.10)`. Inline code: same font, bg `rgba(0, 0, 0, 0.04)`, padding `2px 6px`, radius `4px`.
**Tooltip** — bg `#000000`, text `#ffffff`, radius `6px`, padding `8px 12px`, font `Plaid Sans 500 / 13px`.
**Modal** — bg `#ffffff`, radius `16px`, shadow `rgba(0, 0, 30, 0.08) 0 12px 32px -8px`, max-width `560px`. Cool overlay backdrop at 50% opacity.
**Plaid Link Modal (Product UI)** — branded consent dialog with bank-logo grid, action-blue primary button, hairline-bordered list rows. The product UI's signature surface.
**Toast** — bg `#000000`, text `#ffffff`, radius `8px`, padding `12px 20px`. Black-on-white inverted to match the CTA family.
## 5. Layout Principles
### Spacing System
- **Base unit**: 8px — the standard institutional rhythm.
- **Scale**: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160 — modular, generous at the upper end.
- **Density observation**: Plaid runs *medium-density* — denser than Anthropic's editorial layout but lighter than tech-heavy SaaS. Section padding sits at 96–128px vertical; intra-section spacing uses 16–32px.
### Grid & Container
- **Page max width**: `1200px` — moderate, primary-bank proportions.
- **Site gutter**: `clamp(24px, 4vw, 56px)` — comfortable on desktop, accommodating on mobile.
- **Grid**: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 8 columns; supporting sidebars span 4.
- **Hero treatment**: full-bleed white, 56–64px headline left-aligned, body confined to a 720px column anchored left of centre.
- **Capability rail**: 3-up cards on desktop, 2-up on tablet, 1-up on mobile.
### Whitespace Philosophy
The whitespace is *institutional clearance*. Plaid leaves more empty space than necessary, and that calculated emptiness is the brand's claim to gravity. Section gutters run **96–128px** between major blocks; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. The page never crowds; the page never extends; the page reads as an annual report's interior layout.
### Section Cadence
- Hero (white) → Mono-eyebrow + H1 + lede + dual CTA → Blue trust panel (`#eaf3ff`) with stat — Capability rail (3-up white cards on `#f7f9fb`) → Cream Franklin band (`#f3efe6` with illustrated character animation) → Pricing or trust-detail (white) → Footer (`#ffffff` with `rgba(0, 0, 0, 0.10)` top border).
- The cream Franklin band appears once or twice per page — never more, or its emotional weight dilutes.
- Pages alternate cool-blue → warm-cream → white in a deliberate sectional rhythm.
- Layouts are **left-aligned** by default; centred layouts are reserved for testimonial pull-quotes and rare hero statements.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, slim chip corners |
| XS | 4px | Status pills, inline tags, semantic badges |
| Small (sm) | 6px | Tooltip corners, code-inline pills |
| Comfortable (md) | 8px | **Buttons, inputs, dropdowns** — the dominant interactive radius |
| Relaxed (lg) | 12px | **Cards** — feature tiles, pricing blocks, capability cards |
| Featured (xl) | 16px | Modals, large editorial callouts |
| Pill | 9999px | Reserved for status chips and tags only |
The signature radii are **8px** on buttons / inputs and **12px** on cards. Plaid sits at the modern 2026 SaaS consensus — neither archaic (Mercury's 6px) nor consumer-soft (Wise's full-pill buttons). The discipline is deliberate: **softer radii would shift Plaid toward consumer brand; harder radii toward legacy finance**. The 8/12 pairing is the mid-point that signals *modern institutional trust*.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Default page surface, hero, body sections |
| 1 | 1px hairline border (`rgba(0, 0, 0, 0.10)`) | Cards, buttons, inputs — the dominant elevation |
| 2 | `rgba(0, 0, 30, 0.04) 0 1px 3px` | Sticky nav (rare), dropdown menus |
| 3 | `rgba(0, 0, 30, 0.06) 0 4px 12px` | Hover-lifted cards in product UI; rare on marketing |
| 4 | `rgba(0, 0, 30, 0.08) 0 12px 32px -8px` | Plaid Link modal, popover layers |
| 5 | `rgba(0, 0, 30, 0.08) 0 24px 64px -16px` | Marketing modals, dialogs |
### Shadow Philosophy
Plaid's depth is **hairline-and-flat**, *not elevation*. The defining elevation move is **1px / 10% black border** rather than a drop shadow. Cards on white are bordered, not shadowed; cards on coloured panels (pale-blue, cream) are flat-and-borderless. Drop shadows appear only on overlay layers (modals, popovers, the Plaid Link consent dialog) and are tinted cool-blue (`rgba(0, 0, 30, ...)`) to reinforce the trust temperature. The brand never uses warm or neutral shadows — that would crack the cool-institutional posture. There is no glassmorphism, no glow, no gradient. The discipline is the brand asset.
## 8. Interaction & Motion
### Easing Curves
- `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions.
- `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter, hero reveal.
- `ease-institutional`: `cubic-bezier(0.32, 0.72, 0, 1)` — slow-out, fast-settle; used on Franklin animation cycles.
### Duration Buckets
- **Fast (100ms)** — colour transitions, focus rings, link hovers.
- **Standard (180ms)** — button hover, card hover, dropdown reveal.
- **Slow (280ms)** — modal enter/exit, page-section fade-in.
- **Page (400ms)** — route transitions, hero reveal sequences.
Plaid's motion is **subtler and faster** than tech-startup defaults — the institutional posture demands restraint. No 800ms grand reveals; no spring-bounce; no parallax.
### Per-Component Micro-States
- **Button hover (black primary)**: bg `#000000` → `#1a1f29` over 180ms. No lift, no scale.
- **Button hover (outlined secondary)**: bg `#ffffff` → `#f7f9fb`; border stays at 0.10.
- **Card hover**: border deepens from `rgba(0, 0, 0, 0.10)` to `rgba(0, 0, 0, 0.20)` over 180ms; no shadow change.
- **Link hover (action blue)**: text `#0a85ea` → `#0066c0` over 100ms; underline thickens 1px → 2px.
- **Input focus**: 2px action-blue ring fades in over 100ms; border `rgba(0, 0, 0, 0.20)` → `#0a85ea`.
- **Nav link hover**: colour shift to `#0a85ea`.
- **Franklin mascot**: gentle 4–6 second loop animation (eyebrow raise, hand wave, head turn). Pauses on `prefers-reduced-motion`.
### Page Transitions
Hero text fades in over 400ms with a 12px translate-up; below-fold sections use `IntersectionObserver` triggered at 70% viewport, 280ms duration, opacity-only. The Franklin scenes never auto-play with attention-grabbing motion — they cycle gently in their cream bands.
### Reduced Motion
`@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. **Franklin mascot animations pause at the first frame** (the figure remains visible but motionless). Translate animations disabled entirely; scroll-linked reveals snap to final state. The brand respects motion preferences as a first-class a11y concern, especially because the mascot animation is the most motion-heavy element on the site.
## 9. Accessibility & A11y
### Contrast Pairs
- **`#000000` text on `#ffffff` bg**: 21.0:1 — AAA at all sizes (maximum contrast).
- **`#4a5568` text-muted on `#ffffff` bg**: 8.6:1 — AAA at body sizes.
- **`#7a8390` text-soft on `#ffffff` bg**: 4.4:1 — AA at large sizes only.
- **`#ffffff` text on `#000000` CTA**: 21.0:1 — AAA.
- **`#0a85ea` link on `#ffffff` bg**: 4.6:1 — AA at body sizes; underline reinforces.
- **`#003c80` text on `#dceeff` info bg**: 9.4:1 — AAA.
- **`#000000` text on `#eaf3ff` blue panel**: 18.6:1 — AAA.
- **`#000000` text on `#f3efe6` cream panel**: 18.4:1 — AAA.
### Focus Indicators
- Default focus ring: `0 0 0 2px rgba(10, 133, 234, 0.40)` with 2px offset on white pages.
- Inputs: ring + border colour shift to `#0a85ea`.
- On dark surfaces (rare): `0 0 0 2px #ffffff`.
- All interactive surfaces have visible focus states — no `outline: none` without a replacement.
### ARIA Patterns
- **Navigation**: `<nav aria-label="Main">` with skip-link to main content.
- **Disclosure**: `<button aria-expanded aria-controls>` for collapsible sections in pricing tables.
- **Dialog**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap and Esc-to-close.
- **Plaid Link consent dialog**: `role="dialog" aria-modal="true"` with bank list as `<ul role="listbox">`.
- **Live regions**: `aria-live="polite"` for form validation messages.
- **Franklin mascot**: `aria-hidden="true"` — decorative animation never carries content meaning.
### Keyboard Navigation
- Tab order matches visual flow: skip-link → nav → hero CTA → main content → footer.
- All buttons, links, inputs reachable via Tab.
- Modals trap focus inside until dismissed.
- `Esc` closes modals and dropdowns.
- Plaid Link consent dialog: Arrow keys navigate the bank list; Enter selects; Esc closes.
### Screen Reader Hints
- Decorative illustrations (Franklin mascot, abstract trust graphics) marked `aria-hidden="true"`.
- Icon-only buttons have `aria-label`.
- Stat callouts include hidden context: "Plaid moves \$2 trillion per year" reads as full sentence rather than just "$2T".
- Mono eyebrow labels (`API Reference`, `Quickstart`) are visible text, not pseudo-content.
### Reduced Motion
Honoured via the global media query. Franklin mascot animations halt at first frame; transitions become opacity-only; durations halved. The brand never requires motion to convey information.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single column, full-bleed sections, hamburger nav |
| Tablet | 640–1024px | 2-column rails, narrower gutters, condensed hero |
| Desktop | 1024–1280px | Full 12-col grid, 720px prose column |
| Wide | 1280–1440px | Site max width hits at 1200px |
| Ultra | > 1440px | Page locks to 1200, gutters expand symmetrically |
### Touch Targets
- Minimum tap target: 44×44px (WCAG AAA).
- Buttons: 44px minimum height on mobile (12px vertical padding × 2 + line-height accommodates).
- Nav link tap area: 44×44px even when visual padding is smaller.
- Plaid Link bank-list rows: 56px minimum on mobile for thumb-friendly selection.
### Collapsing Strategy
- **Header**: full nav at ≥1024px; hamburger sheet below.
- **Hero**: 64px headline → 48px → 36px across desktop / tablet / mobile.
- **Capability grid**: 3-up at desktop, 2-up at tablet, 1-up at mobile.
- **Body width**: 720px → fluid 92vw at mobile.
- **Section spacing**: 128px → 80px → 56px across sizes.
- **Franklin band**: full-bleed cream on all sizes; mascot scales proportionally.
### Image Behavior
- Illustrations (Franklin scenes, capability hero art) use `srcset` with 1x/2x for retina.
- Hero imagery uses `aspect-ratio` to prevent layout shift.
- Lazy-loading on below-fold images; eager on hero.
- SVG illustrations preferred for crisp rendering at any size.
### Container Queries
Used inside capability cards to switch layout when card width crosses 360px (icon-left vs. icon-top).
## 11. Content & Voice
### Tone
**Institutional, precise, dryly confident.** Plaid writes like a primary bank's communications team — full sentences, technical specificity, no hype, no exclamation points, no emoji. Statistics are stated plainly: "Plaid powers 12,000+ apps." Headlines describe outcomes ("Connect financial accounts in seconds"); subheads explain mechanism. The brand sounds like infrastructure rather than software.
### Microcopy Patterns
- **Button verbs**: "Get started," "Talk to sales," "Read the docs," "Try Plaid Link," "Watch demo," "View pricing." Never "Sign up free!" or "Get instant access →".
- **Error messages**: "We couldn't connect to your bank. Try again, or [contact support]." Specific, no shame, no apologetic exclamation.
- **Success confirmations**: "Connected." "Account linked." Brief, declarative, present-tense.
- **Loading states**: "Connecting…" "Verifying account…" "Encrypting…" — process-aware, security-flavoured.
- **Trust statements**: Numerical and specific. "AES-256 encryption", "SOC 2 Type II certified", "Used by 1 in 4 Americans with a bank account."
### Empty States
What they say: explain the empty state and offer the next step. *"No connections yet. Add your first account to begin."* *"Your transaction history is empty."*
What they don't say: "Oops!", "Sorry!", any apologetic exclamation. Empty states are functional notes, not failures.
### CTA Verb Conventions
- Primary on hero: "Get started," "Talk to sales," "Try Plaid Link"
- Secondary: "Read the docs," "Watch demo," "View pricing"
- Footer: "Read our research," "Browse the API," "View status"
The brand never uses "Sign up free!" or "Get instant access today!" — the tone is institutional and unhurried. Plaid never trades in scarcity, never uses time-pressure CTAs, never countdowns. The Franklin mascot occasionally narrates with first-person voice ("Hi, I'm Ben") inside the cream band — that's the only first-person moment on the site, and it's a deliberate emotional break from the otherwise impersonal institutional voice.
## 12. Dark Mode & Theming
**Light-only — no dark variant offered on the marketing surface.** The white canvas, near-black ink, and pale-blue trust palette are the brand's defining institutional posture; a dark mode would require re-keying the entire system — including the Franklin cream band, which doesn't translate to dark — and would collapse the trust register that distinguishes Plaid from consumer-fintech competitors.
The product UI (Plaid Dashboard, the Plaid Link consent dialog) handles its own theming and supports a partial dark variant for developers, but that variant is documented separately. The marketing site at `plaid.com` is intentionally light-only across all viewports and times of day.
If a downstream surface ever needs a dark companion, the rules would be: keep the action blue at full saturation (`#0a85ea` is one of the rare blues that holds at AA contrast on both white *and* deep navy), drop the cream Franklin band entirely (no warm-on-dark equivalent works), and swap white for a deep institutional navy `#0a1530` rather than pure black. But this is not currently shipped.
## 13. Lineage & Influences
Plaid's marketing site descends directly from the **Stripe-era fintech trust palette**: white canvas, near-pure-black type, pale-blue panels, single confident action blue. The rendition is quieter and more institutional than today's Stripe — Plaid leans on classical typography (a Plaid-Sans variant of Inter at 500–600, no serif) and 1px / 10% black hairlines rather than gradients.
The single moment of personality in an otherwise restrained system is the Benjamin Franklin mascot — an animated, illustrated figure who narrates feature sections from inside a warm cream band `#f3efe6`. That break from cool blue-greys to warm cream is Plaid's signature trick, and it positions Plaid as more *consumer-friendly* than the Visa/Mastercard infrastructure plays it competes against. The 12px card radius and 8px button radius sit at the modern 2026 SaaS consensus, neither archaic (Mercury's 6px) nor consumer-soft (Wise's full pill).
What it inherits: **Stripe-2017 trust palette discipline** (pale-blue + white + black + single accent blue), **Inter-class neo-grotesque** typography, **hairline elevation** as the default. What it borrows from contemporaries: Vercel's black CTA on white canvas with mono micro-labels, Mailchimp/Slack's mascot-as-narrative-device tradition, Linear's institutional restraint. What it rejects: gradient meshes, neon accents, hero animations beyond the Franklin scene, AI-tech iconography, the consumer-app rounded-corner softness.
**Named influences:**
- **Stripe (2017–2019 era)** — Pale-blue trust palette, single-accent CTA discipline, classical sans typography. *https://stripe.com*
- **Vercel** — Black CTA on white canvas with mono micro-labels. *https://vercel.com*
- **Mailchimp / Slack illustrations** — Mascot-as-narrative-device — Plaid's Franklin echoes that warm-illustration tradition inside a fintech context. *https://mailchimp.com*
- **Mercury** — Cousin in the modern-fintech-restraint lineage; Mercury runs slightly tighter radii (6px) for a more archaic feel. *https://mercury.com*
- **Linear** — Institutional discipline; hairline-only depth strategy.
- **Inter / Rasmus Andersson** — DNA reference for Plaid Sans neo-grotesque proportions.
## 14. Do's and Don'ts
### Do
- **Do** keep the action CTA black (`#000000` / `#ffffff` / 8px radius), not blue — the `#0a85ea` is reserved for links and accent, never as a primary fill.
- **Do** use the cream Franklin band (`#f3efe6`) as the brand's only warm zone; pale blue handles cool-trust sections.
- **Do** keep type fully sans — Plaid does not use serif anywhere on the marketing site.
- **Do** open every section with a mono eyebrow label (12px / 0.04em / uppercase JetBrains Mono in `#4a5568`).
- **Do** use 1px / 10% black hairlines (`rgba(0, 0, 0, 0.10)`) for borders — never thicker rules, never coloured borders on standard cards.
- **Do** cap H1 at 56–64px — restrained vs Brex 72 or Ramp 80, the institutional gesture.
- **Do** alternate white → pale-blue → cream → white for sectional rhythm.
- **Do** lift cards via 1px hairline border, never via drop shadow.
- **Do** mark the Franklin mascot `aria-hidden="true"` and pause animation on `prefers-reduced-motion`.
- **Do** keep all motion subtle (≤280ms) and respect motion preferences as a first-class a11y concern.
### Don't
- **Don't** introduce gradients, glassmorphism, or glow — Plaid's discipline is hairline-and-flat.
- **Don't** swap the H1 size larger than 64px; the restraint is a deliberate institutional gesture.
- **Don't** centre layouts; left-aligned grid is the brand's classical posture.
- **Don't** fill primary buttons with action blue. Black-on-white CTA is non-negotiable.
- **Don't** use serif typography. Plaid is fully sans.
- **Don't** stack multiple Franklin bands per page — the mascot is precious; one scene per page.
- **Don't** introduce a second brand colour. Action blue + black is the entire palette; don't add a green-success or orange-accent.
- **Don't** use exclamation marks, emoji, or "Get started today!" urgency. The voice is institutional.
- **Don't** apply warm-toned shadows. Plaid's shadows are cool-tinted (`rgba(0, 0, 30, ...)`) when they appear at all.
- **Don't** round buttons to 9999px. The 8px button radius is the modern-institutional move; full pills shift Plaid into consumer-app territory.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
bg-soft: #f7f9fb
bg-blue: #eaf3ff
bg-cream: #f3efe6
text: #000000
text-muted: #4a5568
brand: #0a85ea
brand-soft: #dceeff
cta-bg: #000000
cta-text: #ffffff
border: rgba(0, 0, 0, 0.10)
```
### Example Component Prompts
1. **"Create a Plaid-style hero — white `#ffffff` canvas, mono eyebrow label `API REFERENCE` in JetBrains Mono 12px / 0.04em / uppercase / `#4a5568`, 56px Plaid Sans 600 H1 in pure black with -0.02em tracking, 20px Plaid Sans 400 lede, dual CTA: black `#000000` primary + outlined `rgba(0, 0, 0, 0.10)` secondary at 8px radius. No gradient, no shadow, left-aligned."**
2. **"Design a feature card — white `#ffffff` background, 12px radius, 1px `rgba(0, 0, 0, 0.10)` hairline border (not shadow), 32px interior padding, 24px Plaid Sans 600 heading, 16px Plaid Sans 400 body, link in `#0a85ea` action blue with underline. Hover: border deepens to `rgba(0, 0, 0, 0.20)`."**
3. **"Build a pale-blue trust panel — full-bleed `#eaf3ff` background, 96px vertical padding, mono eyebrow label `TRUST` in `#4a5568`, 44px Plaid Sans 600 stat heading in pure black, 20px supporting copy in `#4a5568`, no border, no shadow."**
4. **"Compose a cream Franklin band — full-bleed `#f3efe6` background, 80px vertical padding, illustrated Benjamin Franklin character anchored left (aria-hidden, animation pauses on prefers-reduced-motion), 32px Plaid Sans 600 heading right-column, 16px Plaid Sans 400 body, single primary CTA. The brand's emotional zone — one per page only."**
5. **"Render a developer code block — JetBrains Mono 14px, `#f7f9fb` background, 8px radius, 1px `rgba(0, 0, 0, 0.10)` border, 16px / 20px padding, syntax highlighting in muted institutional palette (no neon). Inline code: same font, 4px radius, `rgba(0, 0, 0, 0.04)` background."**
6. **"Create the primary nav — 72px header height, white `#ffffff` background, Plaid wordmark left-aligned in pure black, links 15px Plaid Sans 500 in `#000000` with `#0a85ea` action-blue hover. Right-aligned tertiary 'Sign in' + black-on-white primary 'Get started' at 8px radius."**
### Iteration Guide
1. **Black CTA, blue link.** If the primary button is action-blue-filled, change it to black-on-white. The action blue lives in links only.
2. **Hairline, not shadow.** Replace any drop-shadow on cards with a `1px solid rgba(0, 0, 0, 0.10)` border. Plaid's depth is hairline-flat.
3. **Drop the gradient.** Any mesh, conic, or radial gradient is wrong — replace with flat white, pale-blue panel, or cream Franklin band.
4. **Cap the H1.** If the headline is over 64px, scale it down. Plaid's institutional restraint demands ≤56–64px.
5. **Mono eyebrow.** Add a `JetBrains Mono 12px / uppercase / 0.04em` micro-label above every section heading. It's the brand's typographic signature.
6. **Drop the serif.** If any heading is in serif, change it to Plaid Sans. The brand is fully sans.
7. **Left-align.** Centre layouts shift Plaid toward consumer-app register. Default to left-aligned.
8. **Calm the verbs.** Replace "Sign up free!" with "Get started"; replace "Try now →" with "Try Plaid Link". The voice is institutional, never urgent.
1. Visual Theme & Atmosphere
Plaid’s homepage is the trust-fintech archetype, refined. White canvas, black H1, pale-blue trust panels, a single confident #0a85ea link blue, and 10%-black hairlines doing the structural work. Where contemporary Stripe reaches for chromatic gradient, animated grids, and 3D meshes, Plaid stays with the older Stripe-era restraint — near-pure black on white, single-accent blue, generous whitespace, hairline rules. The page reads as infrastructure rather than campaign: the visual register is closer to a primary-bank annual report than to a Y Combinator pitch deck, and the discipline is the point.
The single moment of personality in this otherwise institutional layout is the Benjamin Franklin mascot — an illustrated, gently-animated figure who narrates feature sections from inside warm-cream #f3efe6 bands. That mascot is the brand’s emotional signature: cool-blue-and-white precision broken once per page by a hand-drawn historical figure with subtle motion. The break from cool greys into warm cream — and from typographic restraint into character animation — is what differentiates Plaid from the otherwise-similar Stripe-trust-palette competitors. It positions Plaid as more consumer-friendly than the Visa/Mastercard infrastructure plays it competes against without abandoning the developer-credibility surface.
Typographically, Plaid runs one family across the entire site — a custom Plaid Sans (an Inter-class neo-grotesque) at 500–600 weight for both display and body. There is no serif anywhere on the marketing surface. H1 holds at 56–64px with negative tracking; body is the same family at 16px on a 24px line; mono micro-labels appear at 12px with 0.04em tracking as eyebrow text. The typographic discipline reinforces the institutional tone — no mixed faces, no decorative weights, no ornamental italics.
The CTA convention is decisive: the action blue #0a85ea is reserved for links and accent, never as a primary button fill. Primary buttons are black-on-white (#000000 bg, #ffffff text, 8px radius). That distinction — blue for inline action, black for page-level commitment — is one of Plaid’s signature design rules and the easiest way to break the brand if you ignore it.
Atmospheric vocabulary that captures the feeling: primary-bank, hairline-only, pale-blue-trust, near-pure-black-on-white, mono-micro-eyebrow, Franklin-cream-band, Stripe-2017, institutional-quiet, no-gradient-ever, structural-not-decorative. The brand reads as if it were laid out by a CFO with taste.
Key Characteristics
- White
#ffffffcanvas — the trust default, never substituted - Action blue
#0a85eafor links only — never a primary button fill - Primary CTA is black-on-white (
#000000/#ffffff/ 8px radius) - Pale-blue
#eaf3fftrust panels alternating with white sections - Cream Franklin band
#f3efe6— the brand’s singular emotional zone - 10%-black hairlines (
rgba(0, 0, 0, 0.10)) — every border, every divider - No shadows, no gradients, no glow — flat-and-hairline discipline
- Single typeface across site (Plaid Sans / Inter) — no serif
- Mono micro-labels at 12px / 0.04em tracking as section eyebrows
- 12px card radius, 8px button radius — modern but not consumer-soft
- Animated Benjamin Franklin mascot — illustrated, decorative, signature
2. Color Palette & Roles
Primary
- bg
#ffffff— white canvas; the trust default, never substituted on body surfaces. - bg-soft
#f7f9fb— palest blue-grey panel, a quieter alternation between white sections. - text
#000000— near-pure black, no opacity softening. Plaid keeps body type at full strength. - cta-bg
#000000— primary CTA fill; the brand’s deliberate institutional move. - on-cta
#ffffff— pure white label on black; maximum value contrast.
Brand & Accent
- brand
#0a85ea— Plaid action blue. Used for links and inline action only — never as a primary button fill. - brand-strong
#0066c0— pressed / hover state. - brand-deep
#003c80— rare deep blue for emphasis or info text. - brand-soft
#dceeff— info wash, soft pill backgrounds. - brand-wash
rgba(10, 133, 234, 0.08)— hover tint for blue-themed surfaces. - accent
#000000— secondary brand colour is black, not a second hue. The CTA itself uses black, not blue.
Sectional Bands
- bg-blue
#eaf3ff— signature pale-blue trust band; appears 1–2× per page. - bg-cream
#f3efe6— warm-cream Franklin storytelling band; the brand’s emotional zone. - bg-ink
#000000— rare full-black band reserved for hero statements (e.g. trust statistics, security claims).
Interactive
- link
#0a85ea— action blue, with underline by default in body. - link-hover
#0066c0— deeper pressed blue. - selected-bg
#eaf3ff— pale-blue selection wash. - disabled
#c4cad3— cool-grey muted.
Neutral Scale
- text-strong
#000000— near-pure black, the headline ink. - text-medium
#1a1f29— deeper-cool variant for high-emphasis copy. - text-muted
#4a5568— secondary copy, metadata. - text-soft
#7a8390— captions, helper text. - text-faint
#a0a8b3— disabled labels, footer microcopy.
Surface & Borders
- surface-0 (page) —
#ffffffwhite canvas. - surface-1 (panel) —
#f7f9fbpalest blue-grey. - surface-2 (card) —
#ffffffwhite card on coloured panel; or#f3f5f8cool-grey card on white. - surface-cream —
#faf6edquieter cream tint inside Franklin sections. - border
rgba(0, 0, 0, 0.10)— 10%-black hairline, the brand’s defining border. - border-strong
rgba(0, 0, 0, 0.20)— emphasized rule, hover deepening. - border-soft
rgba(0, 0, 0, 0.06)— quietest separation. - border-blue
rgba(10, 133, 234, 0.30)— rare brand-tinted divider on blue surfaces.
Shadow Colors
Plaid’s shadows are cool-tinted and sparse. The brand prefers hairline borders to drop shadows on every content surface — cards lift via 1px borders rather than elevation. When shadows do appear (modals, popover layers, the floating Plaid Link consent dialog), they’re tinted with low-opacity cool blue (rgba(0, 0, 30, 0.04) to 0.08), never neutral grey, and never warm. The cool tint reinforces the trust-palette temperature.
Semantic
- success — bg
#dcf3e3, text#1f5d3f, borderrgba(74, 122, 91, 0.30). - warning — bg
#fff0c5, text#7a5e1f, borderrgba(180, 145, 60, 0.30). - danger — bg
#fde0e0, text#8a2828, borderrgba(180, 50, 50, 0.30). - info — bg
#dceeff(brand-soft), text#003c80, borderrgba(10, 133, 234, 0.30).
The semantic palette is calm and institutional — no fluorescent warning yellow, no neon green-success. Every semantic colour stays within the cool-and-warm-cream temperature range of the brand.
3. Typography Rules
Font Family
- Display & UI:
"Plaid Sans", "Inter Display", Inter, "Helvetica Neue", Arial, sans-serif— custom Plaid Sans is an Inter-class neo-grotesque cut for Plaid’s house. Falls back gracefully to Inter or Helvetica Neue on slow connections. - Body: same family, weight 400/500/600.
- Mono:
"JetBrains Mono", Menlo, Consolas, "SF Mono", monospace— used for eyebrow micro-labels (12px / 0.04em tracking / uppercase) and code blocks in developer documentation. - No serif anywhere on the marketing surface.
- OpenType features:
ligaandkernalways on;tnumandzero(slashed zero) in mono for tabular alignment;ss01for stylistic alternate at display sizes.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | Plaid Sans | 80px | 600 | 1.05 | -0.025em | ss01 liga | Homepage hero ceiling — rare |
| Display | Plaid Sans | 64px | 600 | 1.05 | -0.02em | ss01 | Section intro at scale |
| H1 | Plaid Sans | 56px | 600 | 1.08 | -0.02em | liga | Page title — restrained vs Brex 72 |
| H2 | Plaid Sans | 44px | 600 | 1.10 | -0.015em | liga | Major section |
| H3 | Plaid Sans | 32px | 600 | 1.20 | -0.01em | — | Sub-section |
| H4 | Plaid Sans | 24px | 600 | 1.25 | normal | — | Card heading |
| H5 | Plaid Sans | 18px | 600 | 1.40 | normal | — | Inline emphasis |
| Eyebrow | JetBrains Mono | 12px | 500 | 1.40 | 0.04em | uppercase | Mono micro-label — signature |
| Body Large | Plaid Sans | 20px | 400 | 1.50 | normal | — | Lede paragraph |
| Body | Plaid Sans | 16px | 400 | 1.50 | normal | — | Default body |
| Body Small | Plaid Sans | 14px | 400 | 1.50 | normal | — | Compact copy |
| Caption | Plaid Sans | 13px | 400 | 1.40 | normal | — | Image captions |
| Caption Tabular | JetBrains Mono | 13px | 500 | 1.40 | normal | tnum | Stats, transaction lists |
| Label | JetBrains Mono | 12px | 500 | 1.30 | 0.04em | uppercase | UI labels, section dividers |
| Pull Quote | Plaid Sans | 28px | 500 | 1.30 | normal | — | Testimonial pull-quote |
| Code | JetBrains Mono | 14px | 400 | 1.55 | normal | tnum zero | Inline + block |
| Code Micro | JetBrains Mono | 12px | 400 | 1.40 | normal | — | API endpoint refs |
Principles
- One typeface, full system. Plaid Sans + JetBrains Mono is the entire family. No serif, no decorative face. The mono is reserved for eyebrows, labels, and code — every other context uses Plaid Sans.
- Weight 600 is the headline ceiling. Plaid never reaches for 700 or 800. The institutional register requires restraint; weight 600 reads as confident, not shouting.
- H1 caps at 56–64px. Brex hits 72; Ramp hits 80; Plaid plays it quieter at 56, hitting 64 only on rare hero statements. The size restraint is a deliberate institutional gesture.
- Negative tracking scales with size. -0.025em at 80px, -0.02em at 56–64px, -0.015em at 44px, -0.01em at 32px, normal below. Standard broadsheet compression.
- Mono eyebrow as section signature. The 12px / 0.04em / uppercase JetBrains Mono micro-label is the brand’s most distinctive typographic move — every section opens with one.
- Body width capped at 720px even on a 1200px page — institutional reading column.
- Tabular figures everywhere numbers matter.
tnumdiscipline in mono so stats, transaction lists, and code line numbers align cleanly. - No italic in display. Italics are reserved for body emphasis only. Display type is upright, the institutional voice is calm.
4. Component Stylings
Buttons
Primary (Black-on-White)
- Background:
#000000near-pure black. - Text:
#ffffffpure white, Plaid Sans 500 / 15px. - Padding:
12px 20px. Radius:8px. Border:1px solid #000000. - Hover: bg →
#1a1f29; transition180ms ease-standard. - Active: bg →
#000000(depressed micro-shift). - Use: Primary CTA — Get started, Talk to sales, Try Plaid. The institutional fintech move.
Secondary (Outlined)
- Background:
#ffffff. Text:#000000. Border:1px solid rgba(0, 0, 0, 0.10). - Same padding, radius, font as primary.
- Hover: bg →
#f7f9fb. - Use: Twin to primary — Read more, Watch demo, Read the docs.
Tertiary (Quietest)
- Background: transparent. Text:
#000000. Border:1px solid rgba(0, 0, 0, 0.06). - Hover: bg →
rgba(0, 0, 0, 0.03). - Use: Footer links, repeated in-section CTAs.
Link (Inline Action Blue)
- Background: transparent. Text:
#0a85eaPlaid action blue, underlined. - Padding: 0. Font: Plaid Sans 500 / 16px.
- Hover: text →
#0066c0. - Use: Inline CTAs — “learn more →”, “see the docs”. The action blue’s primary home.
Cards
Feature Card (White on Panel)
- Background:
#ffffff. Border:1px solid rgba(0, 0, 0, 0.10). Radius:12px. Padding:32px. - Shadow: none — 1px hairline border alone.
- Hover: border →
rgba(0, 0, 0, 0.20); transition180ms. - Use: Capability tile, pricing block, feature explanation.
Blue Trust Panel (Sectional)
- Background:
#eaf3ff. Border: none. Radius:12px(or full-bleed). - Padding:
48pxto96pxdepending on context. - Use: Trust statement, security stat, “Plaid moves $X trillion / year” type sectional.
Cream Franklin Card (Sectional)
- Background:
#f3efe6. Border: none. Radius:12px(or full-bleed). - Padding:
40px 32px. - Use: Illustrated Franklin scenes — the brand’s emotional zone. Always paired with character animation.
Badges, Tags, Pills
Mono Eyebrow Label — bg transparent, text #4a5568, padding 0, radius 0, font JetBrains Mono 500 / 12px / 0.04em / uppercase. The brand’s most distinctive typographic chrome.
Blue Status Pill — bg rgba(10, 133, 234, 0.08), text #003c80, radius 4px, padding 4px 10px. Subtle blue-tinted status on white card.
Earth-Tone Status (Semantic) — bg from semantic palette (success / warning / danger / info), radius 4px, padding 4px 10px. Calm, institutional, no fluorescents.
Inputs / Forms
- Background:
#ffffff. Border:1px solid rgba(0, 0, 0, 0.20). Radius:8px. Padding:12px 16px. - Font: Plaid Sans 400 / 16px. Placeholder:
#7a8390. - Focus:
0 0 0 2px rgba(10, 133, 234, 0.40)ring, border →#0a85ea. Transition 100ms. - Error: border →
#8a2828, ring →rgba(180, 50, 50, 0.30). - Helper: caption 13px text-soft below.
Navigation
- Header height
72px. Background#ffffff(transparent on hero scrolling). - Logo: Plaid wordmark left-aligned, black.
- Nav links: Plaid Sans 500 / 15px, colour
#000000, padding8px 12px. Hover →#0a85eaaction blue; underline appears under active link. - Right-side CTA pair: tertiary “Sign in” + primary black “Get started”.
- Mobile: full-screen sheet, links stack at 18px / 500 with 24px gap.
Optional Components
Pull Quote — Plaid Sans 28px / 500, text-medium, with a 3px action-blue left rule. Reserved for customer-testimonial sections.
Code Block (Developer Docs) — JetBrains Mono 14px, bg #f7f9fb, radius 8px, padding 16px 20px, border rgba(0, 0, 0, 0.10). Inline code: same font, bg rgba(0, 0, 0, 0.04), padding 2px 6px, radius 4px.
Tooltip — bg #000000, text #ffffff, radius 6px, padding 8px 12px, font Plaid Sans 500 / 13px.
Modal — bg #ffffff, radius 16px, shadow rgba(0, 0, 30, 0.08) 0 12px 32px -8px, max-width 560px. Cool overlay backdrop at 50% opacity.
Plaid Link Modal (Product UI) — branded consent dialog with bank-logo grid, action-blue primary button, hairline-bordered list rows. The product UI’s signature surface.
Toast — bg #000000, text #ffffff, radius 8px, padding 12px 20px. Black-on-white inverted to match the CTA family.
5. Layout Principles
Spacing System
- Base unit: 8px — the standard institutional rhythm.
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160 — modular, generous at the upper end.
- Density observation: Plaid runs medium-density — denser than Anthropic’s editorial layout but lighter than tech-heavy SaaS. Section padding sits at 96–128px vertical; intra-section spacing uses 16–32px.
Grid & Container
- Page max width:
1200px— moderate, primary-bank proportions. - Site gutter:
clamp(24px, 4vw, 56px)— comfortable on desktop, accommodating on mobile. - Grid: 12 columns with 24px gutters. Hero blocks span full width; capability rails span 8 columns; supporting sidebars span 4.
- Hero treatment: full-bleed white, 56–64px headline left-aligned, body confined to a 720px column anchored left of centre.
- Capability rail: 3-up cards on desktop, 2-up on tablet, 1-up on mobile.
Whitespace Philosophy
The whitespace is institutional clearance. Plaid leaves more empty space than necessary, and that calculated emptiness is the brand’s claim to gravity. Section gutters run 96–128px between major blocks; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. The page never crowds; the page never extends; the page reads as an annual report’s interior layout.
Section Cadence
- Hero (white) → Mono-eyebrow + H1 + lede + dual CTA → Blue trust panel (
#eaf3ff) with stat — Capability rail (3-up white cards on#f7f9fb) → Cream Franklin band (#f3efe6with illustrated character animation) → Pricing or trust-detail (white) → Footer (#ffffffwithrgba(0, 0, 0, 0.10)top border). - The cream Franklin band appears once or twice per page — never more, or its emotional weight dilutes.
- Pages alternate cool-blue → warm-cream → white in a deliberate sectional rhythm.
- Layouts are left-aligned by default; centred layouts are reserved for testimonial pull-quotes and rare hero statements.
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Decorative dividers, slim chip corners |
| XS | 4px | Status pills, inline tags, semantic badges |
| Small (sm) | 6px | Tooltip corners, code-inline pills |
| Comfortable (md) | 8px | Buttons, inputs, dropdowns — the dominant interactive radius |
| Relaxed (lg) | 12px | Cards — feature tiles, pricing blocks, capability cards |
| Featured (xl) | 16px | Modals, large editorial callouts |
| Pill | 9999px | Reserved for status chips and tags only |
The signature radii are 8px on buttons / inputs and 12px on cards. Plaid sits at the modern 2026 SaaS consensus — neither archaic (Mercury’s 6px) nor consumer-soft (Wise’s full-pill buttons). The discipline is deliberate: softer radii would shift Plaid toward consumer brand; harder radii toward legacy finance. The 8/12 pairing is the mid-point that signals modern institutional trust.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Default page surface, hero, body sections |
| 1 | 1px hairline border (rgba(0, 0, 0, 0.10)) | Cards, buttons, inputs — the dominant elevation |
| 2 | rgba(0, 0, 30, 0.04) 0 1px 3px | Sticky nav (rare), dropdown menus |
| 3 | rgba(0, 0, 30, 0.06) 0 4px 12px | Hover-lifted cards in product UI; rare on marketing |
| 4 | rgba(0, 0, 30, 0.08) 0 12px 32px -8px | Plaid Link modal, popover layers |
| 5 | rgba(0, 0, 30, 0.08) 0 24px 64px -16px | Marketing modals, dialogs |
Shadow Philosophy
Plaid’s depth is hairline-and-flat, not elevation. The defining elevation move is 1px / 10% black border rather than a drop shadow. Cards on white are bordered, not shadowed; cards on coloured panels (pale-blue, cream) are flat-and-borderless. Drop shadows appear only on overlay layers (modals, popovers, the Plaid Link consent dialog) and are tinted cool-blue (rgba(0, 0, 30, ...)) to reinforce the trust temperature. The brand never uses warm or neutral shadows — that would crack the cool-institutional posture. There is no glassmorphism, no glow, no gradient. The discipline is the brand asset.
8. Interaction & Motion
Easing Curves
ease-standard:cubic-bezier(0.4, 0, 0.2, 1)— Material-style; default for hover, focus, colour transitions.ease-emphasized:cubic-bezier(0.2, 0, 0, 1)— punchier exit; modal enter, hero reveal.ease-institutional:cubic-bezier(0.32, 0.72, 0, 1)— slow-out, fast-settle; used on Franklin animation cycles.
Duration Buckets
- Fast (100ms) — colour transitions, focus rings, link hovers.
- Standard (180ms) — button hover, card hover, dropdown reveal.
- Slow (280ms) — modal enter/exit, page-section fade-in.
- Page (400ms) — route transitions, hero reveal sequences.
Plaid’s motion is subtler and faster than tech-startup defaults — the institutional posture demands restraint. No 800ms grand reveals; no spring-bounce; no parallax.
Per-Component Micro-States
- Button hover (black primary): bg
#000000→#1a1f29over 180ms. No lift, no scale. - Button hover (outlined secondary): bg
#ffffff→#f7f9fb; border stays at 0.10. - Card hover: border deepens from
rgba(0, 0, 0, 0.10)torgba(0, 0, 0, 0.20)over 180ms; no shadow change. - Link hover (action blue): text
#0a85ea→#0066c0over 100ms; underline thickens 1px → 2px. - Input focus: 2px action-blue ring fades in over 100ms; border
rgba(0, 0, 0, 0.20)→#0a85ea. - Nav link hover: colour shift to
#0a85ea. - Franklin mascot: gentle 4–6 second loop animation (eyebrow raise, hand wave, head turn). Pauses on
prefers-reduced-motion.
Page Transitions
Hero text fades in over 400ms with a 12px translate-up; below-fold sections use IntersectionObserver triggered at 70% viewport, 280ms duration, opacity-only. The Franklin scenes never auto-play with attention-grabbing motion — they cycle gently in their cream bands.
Reduced Motion
@media (prefers-reduced-motion: reduce) — all transitions become opacity-only, durations halved. Franklin mascot animations pause at the first frame (the figure remains visible but motionless). Translate animations disabled entirely; scroll-linked reveals snap to final state. The brand respects motion preferences as a first-class a11y concern, especially because the mascot animation is the most motion-heavy element on the site.
9. Accessibility & A11y
Contrast Pairs
#000000text on#ffffffbg: 21.0:1 — AAA at all sizes (maximum contrast).#4a5568text-muted on#ffffffbg: 8.6:1 — AAA at body sizes.#7a8390text-soft on#ffffffbg: 4.4:1 — AA at large sizes only.#fffffftext on#000000CTA: 21.0:1 — AAA.#0a85ealink on#ffffffbg: 4.6:1 — AA at body sizes; underline reinforces.#003c80text on#dceeffinfo bg: 9.4:1 — AAA.#000000text on#eaf3ffblue panel: 18.6:1 — AAA.#000000text on#f3efe6cream panel: 18.4:1 — AAA.
Focus Indicators
- Default focus ring:
0 0 0 2px rgba(10, 133, 234, 0.40)with 2px offset on white pages. - Inputs: ring + border colour shift to
#0a85ea. - On dark surfaces (rare):
0 0 0 2px #ffffff. - All interactive surfaces have visible focus states — no
outline: nonewithout a replacement.
ARIA Patterns
- Navigation:
<nav aria-label="Main">with skip-link to main content. - Disclosure:
<button aria-expanded aria-controls>for collapsible sections in pricing tables. - Dialog:
role="dialog" aria-modal="true" aria-labelledbywith focus trap and Esc-to-close. - Plaid Link consent dialog:
role="dialog" aria-modal="true"with bank list as<ul role="listbox">. - Live regions:
aria-live="polite"for form validation messages. - Franklin mascot:
aria-hidden="true"— decorative animation never carries content meaning.
Keyboard Navigation
- Tab order matches visual flow: skip-link → nav → hero CTA → main content → footer.
- All buttons, links, inputs reachable via Tab.
- Modals trap focus inside until dismissed.
Esccloses modals and dropdowns.- Plaid Link consent dialog: Arrow keys navigate the bank list; Enter selects; Esc closes.
Screen Reader Hints
- Decorative illustrations (Franklin mascot, abstract trust graphics) marked
aria-hidden="true". - Icon-only buttons have
aria-label. - Stat callouts include hidden context: “Plaid moves $2 trillion per year” reads as full sentence rather than just “$2T”.
- Mono eyebrow labels (
API Reference,Quickstart) are visible text, not pseudo-content.
Reduced Motion
Honoured via the global media query. Franklin mascot animations halt at first frame; transitions become opacity-only; durations halved. The brand never requires motion to convey information.
10. Responsive Behavior
Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single column, full-bleed sections, hamburger nav |
| Tablet | 640–1024px | 2-column rails, narrower gutters, condensed hero |
| Desktop | 1024–1280px | Full 12-col grid, 720px prose column |
| Wide | 1280–1440px | Site max width hits at 1200px |
| Ultra | > 1440px | Page locks to 1200, gutters expand symmetrically |
Touch Targets
- Minimum tap target: 44×44px (WCAG AAA).
- Buttons: 44px minimum height on mobile (12px vertical padding × 2 + line-height accommodates).
- Nav link tap area: 44×44px even when visual padding is smaller.
- Plaid Link bank-list rows: 56px minimum on mobile for thumb-friendly selection.
Collapsing Strategy
- Header: full nav at ≥1024px; hamburger sheet below.
- Hero: 64px headline → 48px → 36px across desktop / tablet / mobile.
- Capability grid: 3-up at desktop, 2-up at tablet, 1-up at mobile.
- Body width: 720px → fluid 92vw at mobile.
- Section spacing: 128px → 80px → 56px across sizes.
- Franklin band: full-bleed cream on all sizes; mascot scales proportionally.
Image Behavior
- Illustrations (Franklin scenes, capability hero art) use
srcsetwith 1x/2x for retina. - Hero imagery uses
aspect-ratioto prevent layout shift. - Lazy-loading on below-fold images; eager on hero.
- SVG illustrations preferred for crisp rendering at any size.
Container Queries
Used inside capability cards to switch layout when card width crosses 360px (icon-left vs. icon-top).
11. Content & Voice
Tone
Institutional, precise, dryly confident. Plaid writes like a primary bank’s communications team — full sentences, technical specificity, no hype, no exclamation points, no emoji. Statistics are stated plainly: “Plaid powers 12,000+ apps.” Headlines describe outcomes (“Connect financial accounts in seconds”); subheads explain mechanism. The brand sounds like infrastructure rather than software.
Microcopy Patterns
- Button verbs: “Get started,” “Talk to sales,” “Read the docs,” “Try Plaid Link,” “Watch demo,” “View pricing.” Never “Sign up free!” or “Get instant access →”.
- Error messages: “We couldn’t connect to your bank. Try again, or [contact support].” Specific, no shame, no apologetic exclamation.
- Success confirmations: “Connected.” “Account linked.” Brief, declarative, present-tense.
- Loading states: “Connecting…” “Verifying account…” “Encrypting…” — process-aware, security-flavoured.
- Trust statements: Numerical and specific. “AES-256 encryption”, “SOC 2 Type II certified”, “Used by 1 in 4 Americans with a bank account.”
Empty States
What they say: explain the empty state and offer the next step. “No connections yet. Add your first account to begin.” “Your transaction history is empty.” What they don’t say: “Oops!”, “Sorry!”, any apologetic exclamation. Empty states are functional notes, not failures.
CTA Verb Conventions
- Primary on hero: “Get started,” “Talk to sales,” “Try Plaid Link”
- Secondary: “Read the docs,” “Watch demo,” “View pricing”
- Footer: “Read our research,” “Browse the API,” “View status”
The brand never uses “Sign up free!” or “Get instant access today!” — the tone is institutional and unhurried. Plaid never trades in scarcity, never uses time-pressure CTAs, never countdowns. The Franklin mascot occasionally narrates with first-person voice (“Hi, I’m Ben”) inside the cream band — that’s the only first-person moment on the site, and it’s a deliberate emotional break from the otherwise impersonal institutional voice.
12. Dark Mode & Theming
Light-only — no dark variant offered on the marketing surface. The white canvas, near-black ink, and pale-blue trust palette are the brand’s defining institutional posture; a dark mode would require re-keying the entire system — including the Franklin cream band, which doesn’t translate to dark — and would collapse the trust register that distinguishes Plaid from consumer-fintech competitors.
The product UI (Plaid Dashboard, the Plaid Link consent dialog) handles its own theming and supports a partial dark variant for developers, but that variant is documented separately. The marketing site at plaid.com is intentionally light-only across all viewports and times of day.
If a downstream surface ever needs a dark companion, the rules would be: keep the action blue at full saturation (#0a85ea is one of the rare blues that holds at AA contrast on both white and deep navy), drop the cream Franklin band entirely (no warm-on-dark equivalent works), and swap white for a deep institutional navy #0a1530 rather than pure black. But this is not currently shipped.
13. Lineage & Influences
Plaid’s marketing site descends directly from the Stripe-era fintech trust palette: white canvas, near-pure-black type, pale-blue panels, single confident action blue. The rendition is quieter and more institutional than today’s Stripe — Plaid leans on classical typography (a Plaid-Sans variant of Inter at 500–600, no serif) and 1px / 10% black hairlines rather than gradients.
The single moment of personality in an otherwise restrained system is the Benjamin Franklin mascot — an animated, illustrated figure who narrates feature sections from inside a warm cream band #f3efe6. That break from cool blue-greys to warm cream is Plaid’s signature trick, and it positions Plaid as more consumer-friendly than the Visa/Mastercard infrastructure plays it competes against. The 12px card radius and 8px button radius sit at the modern 2026 SaaS consensus, neither archaic (Mercury’s 6px) nor consumer-soft (Wise’s full pill).
What it inherits: Stripe-2017 trust palette discipline (pale-blue + white + black + single accent blue), Inter-class neo-grotesque typography, hairline elevation as the default. What it borrows from contemporaries: Vercel’s black CTA on white canvas with mono micro-labels, Mailchimp/Slack’s mascot-as-narrative-device tradition, Linear’s institutional restraint. What it rejects: gradient meshes, neon accents, hero animations beyond the Franklin scene, AI-tech iconography, the consumer-app rounded-corner softness.
Named influences:
- Stripe (2017–2019 era) — Pale-blue trust palette, single-accent CTA discipline, classical sans typography. https://stripe.com
- Vercel — Black CTA on white canvas with mono micro-labels. https://vercel.com
- Mailchimp / Slack illustrations — Mascot-as-narrative-device — Plaid’s Franklin echoes that warm-illustration tradition inside a fintech context. https://mailchimp.com
- Mercury — Cousin in the modern-fintech-restraint lineage; Mercury runs slightly tighter radii (6px) for a more archaic feel. https://mercury.com
- Linear — Institutional discipline; hairline-only depth strategy.
- Inter / Rasmus Andersson — DNA reference for Plaid Sans neo-grotesque proportions.
14. Do’s and Don’ts
Do
- Do keep the action CTA black (
#000000/#ffffff/ 8px radius), not blue — the#0a85eais reserved for links and accent, never as a primary fill. - Do use the cream Franklin band (
#f3efe6) as the brand’s only warm zone; pale blue handles cool-trust sections. - Do keep type fully sans — Plaid does not use serif anywhere on the marketing site.
- Do open every section with a mono eyebrow label (12px / 0.04em / uppercase JetBrains Mono in
#4a5568). - Do use 1px / 10% black hairlines (
rgba(0, 0, 0, 0.10)) for borders — never thicker rules, never coloured borders on standard cards. - Do cap H1 at 56–64px — restrained vs Brex 72 or Ramp 80, the institutional gesture.
- Do alternate white → pale-blue → cream → white for sectional rhythm.
- Do lift cards via 1px hairline border, never via drop shadow.
- Do mark the Franklin mascot
aria-hidden="true"and pause animation onprefers-reduced-motion. - Do keep all motion subtle (≤280ms) and respect motion preferences as a first-class a11y concern.
Don’t
- Don’t introduce gradients, glassmorphism, or glow — Plaid’s discipline is hairline-and-flat.
- Don’t swap the H1 size larger than 64px; the restraint is a deliberate institutional gesture.
- Don’t centre layouts; left-aligned grid is the brand’s classical posture.
- Don’t fill primary buttons with action blue. Black-on-white CTA is non-negotiable.
- Don’t use serif typography. Plaid is fully sans.
- Don’t stack multiple Franklin bands per page — the mascot is precious; one scene per page.
- Don’t introduce a second brand colour. Action blue + black is the entire palette; don’t add a green-success or orange-accent.
- Don’t use exclamation marks, emoji, or “Get started today!” urgency. The voice is institutional.
- Don’t apply warm-toned shadows. Plaid’s shadows are cool-tinted (
rgba(0, 0, 30, ...)) when they appear at all. - Don’t round buttons to 9999px. The 8px button radius is the modern-institutional move; full pills shift Plaid into consumer-app territory.
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
bg-soft: #f7f9fb
bg-blue: #eaf3ff
bg-cream: #f3efe6
text: #000000
text-muted: #4a5568
brand: #0a85ea
brand-soft: #dceeff
cta-bg: #000000
cta-text: #ffffff
border: rgba(0, 0, 0, 0.10)Example Component Prompts
-
“Create a Plaid-style hero — white
#ffffffcanvas, mono eyebrow labelAPI REFERENCEin JetBrains Mono 12px / 0.04em / uppercase /#4a5568, 56px Plaid Sans 600 H1 in pure black with -0.02em tracking, 20px Plaid Sans 400 lede, dual CTA: black#000000primary + outlinedrgba(0, 0, 0, 0.10)secondary at 8px radius. No gradient, no shadow, left-aligned.” -
“Design a feature card — white
#ffffffbackground, 12px radius, 1pxrgba(0, 0, 0, 0.10)hairline border (not shadow), 32px interior padding, 24px Plaid Sans 600 heading, 16px Plaid Sans 400 body, link in#0a85eaaction blue with underline. Hover: border deepens torgba(0, 0, 0, 0.20).” -
“Build a pale-blue trust panel — full-bleed
#eaf3ffbackground, 96px vertical padding, mono eyebrow labelTRUSTin#4a5568, 44px Plaid Sans 600 stat heading in pure black, 20px supporting copy in#4a5568, no border, no shadow.” -
“Compose a cream Franklin band — full-bleed
#f3efe6background, 80px vertical padding, illustrated Benjamin Franklin character anchored left (aria-hidden, animation pauses on prefers-reduced-motion), 32px Plaid Sans 600 heading right-column, 16px Plaid Sans 400 body, single primary CTA. The brand’s emotional zone — one per page only.” -
“Render a developer code block — JetBrains Mono 14px,
#f7f9fbbackground, 8px radius, 1pxrgba(0, 0, 0, 0.10)border, 16px / 20px padding, syntax highlighting in muted institutional palette (no neon). Inline code: same font, 4px radius,rgba(0, 0, 0, 0.04)background.” -
“Create the primary nav — 72px header height, white
#ffffffbackground, Plaid wordmark left-aligned in pure black, links 15px Plaid Sans 500 in#000000with#0a85eaaction-blue hover. Right-aligned tertiary ‘Sign in’ + black-on-white primary ‘Get started’ at 8px radius.”
Iteration Guide
- Black CTA, blue link. If the primary button is action-blue-filled, change it to black-on-white. The action blue lives in links only.
- Hairline, not shadow. Replace any drop-shadow on cards with a
1px solid rgba(0, 0, 0, 0.10)border. Plaid’s depth is hairline-flat. - Drop the gradient. Any mesh, conic, or radial gradient is wrong — replace with flat white, pale-blue panel, or cream Franklin band.
- Cap the H1. If the headline is over 64px, scale it down. Plaid’s institutional restraint demands ≤56–64px.
- Mono eyebrow. Add a
JetBrains Mono 12px / uppercase / 0.04emmicro-label above every section heading. It’s the brand’s typographic signature. - Drop the serif. If any heading is in serif, change it to Plaid Sans. The brand is fully sans.
- Left-align. Centre layouts shift Plaid toward consumer-app register. Default to left-aligned.
- Calm the verbs. Replace “Sign up free!” with “Get started”; replace “Try now →” with “Try Plaid Link”. The voice is institutional, never urgent.
Drop plaid into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add plaid 2 · ship landing page
npx agentkit init --design plaid light editorial
Stripe
Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, sig…
Docs
Install
Stripe
webdesignhot
light minimal
Vercel
Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white ty…
Docs
Install
Vercel
webdesignhot
light minimal
Mintlify
Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight…
Docs
Install
Mintlify
webdesignhot