light · structured · sans · warm
DESIGN.md inspired by MetaMask
Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice.
By webdesignhot · metamask.io ↗
$ npx @webdesignhot/design-md add metamask
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. Arbitrum Arbitrum Blue on white — Layer 2 chain marketing with Inter sans, structured grids, sophisticated-restraint contrasted with Solana's cinematic. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. 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. Bandcamp Bandcamp Cyan + Helvetica — indie-music marketplace honesty, no streaming-platform polish, no algorithmic carousels. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. 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. Booking.com Booking Blue + signal yellow — the deal-finder design language at maximum density, optimized for conversion not contemplation. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Brilliant STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilliant Sans, illustrated geometry as hero. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Calm Mindfulness in a serif — Calm Cream canvas, soft moonlit blue and forest green, Visby Round display, breathing-pace motion. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. 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. ClassPass Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographed-class-as-hero pattern. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. 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. Deliveroo Deliveroo Teal on white — food-delivery design at maximum saturation, custom Roo Sans, kangaroo-mark mascot energy. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Delta Air Lines Whitney sans on near-white, Delta navy + signal red — the Hartsfield-Jackson aircraft livery translated to web typography. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Duolingo Owl-green confidence and DIN-Round buttons that lift like candy — the gamified language app distilled to four colors and one mascot. Dyson Engineering-greyscale on white — Dyson Futura Light at 44px (weight `300`, never bold), body ink `#333` not pure black, zero-radius CTAs with a fluid-dynamics ripple hover, and a single magenta accent reserved for haircare. The web brand of an engineering company that refuses to look like a marketing site. ElevenLabs Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand. 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. Fortnite Battle-royale design at maximum saturation — neon yellow + electric blue on near-black, Burbank Big condensed display, season-driven brand kaleidoscope. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Glossier Post-pink austerity — white canvas, single-family Apercu, 0px radius rectangles. The brand that invented millennial-pink chrome in 2014 has retired pink to a footer wash and a single badge color. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. 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. Hilton Hilton Blue on white — confident-contemporary hospitality with Söhne-adjacent sans, blue-on-white photography-led layouts. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. 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 JetBlue JetBlue Blue on white — friendly aviation with a custom rounded sans, Mint cabin orange accent, lower-case microcopy. 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. Lego Lego Yellow + Red on white — primary-color toy theatre, custom Lego Sans, brick-as-hero photography. 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. lululemon Quiet-luxury athleisure — Saans variable on bone-off-white, off-black ink (`#140f0f`, not pure black), pill CTAs on square product cards, mixed-case sentence-cased headlines tracked −4px. The athletic brand that murmurs. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Marriott Luxury-hospitality restraint — Caudex serif for editorial moments, off-white canvas, gold-bronze CTA, photographed-resort hero. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. 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. MyFitnessPal Fitness-tracking utility — MFP Blue on white, Inter sans, dense calorie-and-macro grids, conversion-first navigation. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Nintendo Joyful red on paper-white — Nintendo's site is the toy-aisle of the web, illustration-rich and refusal-of-darkness intentional. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. 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. Patagonia Outdoor-cooperative editorial — Futura sans on cream, ranger-station palette, photography-led story-first marketing. Patreon Patreon Coral on white — creator-economy patronage with Söhne sans, photographer-led marketing, mid-2024 brand refresh language. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Phantom Phantom Purple on near-black — crypto wallet design that respects the user's intelligence with editorial restraint. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. PlayStation Sony's Cinema-Black canvas with PS Blue and a custom SST sans — gaming-as-cinema, premium hardware in editorial restraint. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Quizlet Study-buddy design — Quizlet purple-blue on white, custom Hurmes Geometric, flashcard-as-hero pattern. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Rare Beauty Soft lavender on cream — Selena Gomez's beauty brand with mental-health-aware editorial restraint and serif-led product cards. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' 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. Solana Solana Gradient + Diatype on near-black — Layer 1 chain marketing as cinematic experiment, magenta-purple-cyan brand prism. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. 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. Uniswap Uniswap Pink on white — DEX design with Basel sans, unicorn-mark whimsy, and rounded-card softness in a usually-brutalist DeFi space. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Valorant Tactical-shooter design language — Tungsten condensed all-caps, signal-red CTAs, and an off-white text the brand calls "ECE8E1". 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. Wikipedia System-default information design — Linux Libertine serif headings, Vector skin, deliberate non-branding for the encyclopedia of record. 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. Xbox Xbox Green on near-black, Microsoft's Segoe UI Display dialed to gamer-coded confidence — bold, energetic, Game Pass-first. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens webdesignhot/0.1
- bg
#ffffff - bg-soft
#f5f5f5 - bg-warm
#fdf6ed - surface
#ffffff - surface-soft
#fafafa - surface-strong
#f0f0f0 - brand — · 2.5
#f6851b - brand-hover
#e3760e - brand-pressed
#cc6800 - brand-deep
#a85400 - brand-tint
#fde5cc - brand-soft
#fbcc99 - on-brand
#ffffff - fox-blue
#037dd6 - fox-blue-deep
#0260a4 - fox-red
#d73a49 - text AAA · 17.4
#1a1a1a - text-strong
#000000 - text-muted
#535a61 - text-soft
#8e8e8e - text-faint — · 1.9
#bcbcbc - text-on-brand
#ffffff - link
#037dd6 - link-hover
#0260a4 - selected-bg
#fde5cc - border — · 1.4
#d6d9dc - border-strong — · 1.8
#bbbfc4 - border-soft
#eaecef - border-brand
#f6851b - network-eth
#627eea - network-polygon
#8247e5 - network-arbitrum
#28a0f0 - network-optimism
#ff0420 - success
#1a8757 - warning
#cc8800 - danger
#d73a49 - info
#037dd6
Ship faster than ever.
display-hero "MM Sans" 72px w800 -0.02em
Ship faster than ever.
display-xl "MM Sans" 56px w800 -0.018em
Ship faster than ever.
display-lg "MM Sans" 48px w700 -0.012em
Ship faster than ever.
h1 "MM Sans" 36px w700 -0.008em
Built for teams that ship.
h2 "MM Sans" 28px w700 -0.005em
A complete kit
h3 "MM Sans" 22px w700 0
The quick brown fox jumps over the lazy dog.
h4 "MM Sans" 18px w600 0
The quick brown fox jumps over the lazy dog.
body-lg "MM Sans" 18px w400 0
The quick brown fox jumps over the lazy dog.
body "MM Sans" 16px w400 0
The quick brown fox jumps over the lazy dog.
button "MM Sans" 15px w700 0.02em
The quick brown fox jumps over the lazy dog.
body-sm "MM Sans" 14px w400 0
OUR DESIGN SYSTEM
label "MM Sans" 13px w700 0.04em
The quick brown fox jumps over the lazy dog.
address "JetBrains Mono" 13px w400 0
The quick brown fox jumps over the lazy dog.
eyebrow "MM Sans" 12px w700 0.10em
- step-0 0px
- step-1 4px
- step-2 8px
- step-3 12px
- step-4 16px
- step-5 20px
- step-6 24px
- step-7 32px
- step-8 40px
- step-9 56px
- step-10 80px
- step-11 96px
- step-12 120px
- micro
4px - sm
8px - md
12px - lg
16px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
Design roles 7/8 mapped · webdesignhot/0.1
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background → bg
- foreground → text
- primary → brand
- primary-foreground → on-brand
- accent → —
- muted → text-muted
- border → border
- ring → border-brand
MetaMask's marketing system descends from the 2016 ConsenSys-era Ethereum-onboarding origin. Foxy Orange `#f6851b` was lifted directly from the iconic 8-bit fox mascot (named Cipher), drawn by Aaron Davis in 2018. MM Sans (custom geometric sans, Inter-adjacent) handles every heading. The fox mascot appears more frequently than Phantom's ghost — wave-animated on hero, idle-bobbing on dashboard, present in 70% of marketing images. Network accent palette (Ethereum blue, Polygon purple, Arbitrum blue, Optimism red) chips chains across UI. Voice is friendly-utility: making Ethereum approachable without dumbing it down. The whole brand reads as crypto-onboarding-friendly — for the user who heard about NFTs from a friend, not the user already running a node.
- Ethereum-foundation incubator shaping crypto-onboarding instincts
- pixel-art mascot anchoring brand identity
- warm orange lineage
- crypto-wallet contemporaries
- mascot visual lineage — pixelated, friendly, retro
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: MetaMask
tagline: Foxy Orange on white — Ethereum wallet design with custom MM Sans, 8-bit fox mascot, friendly-utility voice.
updated_at: 2026-05-08T00:00:00.000Z
published_at: 2026-05-07T20:02:42.541Z
author: webdesignhot
source_url: https://metamask.io
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [fintech]
tags: [light, structured, sans, warm]
preview_swatch: ['#ffffff', '#f6851b', '#1a1a1a']
related: [phantom-app, uniswap, arbitrum]
description: 'MetaMask''s site is the Ethereum-side counterpart to Phantom''s Solana editorial-restraint. The canvas is white, headings sit in MM Sans (a custom geometric sans, Inter-adjacent) at 48–72px, and the brand color is "Foxy Orange" `#f6851b` — a warm orange picked from the iconic 8-bit fox mascot Cipher. Where Phantom went dark editorial, MetaMask went light-friendly with the fox as the brand''s identity. Cards have 8-12px radius. Voice is friendly-utility: "Your gateway to Ethereum and the decentralized web". The 8-bit pixelated fox appears more frequently than Phantom''s ghost — wave-animated on hero, idle-bobbing on dashboard, present in 70% of marketing images. The whole brand reads as crypto-onboarding-friendly: making Ethereum approachable without dumbing it down.'
# Canonical 8-role aliases (per google-labs-code/design.md PR #76).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
muted: text-muted
border: border
ring: border-brand
colors:
bg: '#ffffff'
bg-soft: '#f5f5f5'
bg-warm: '#fdf6ed'
surface: '#ffffff'
surface-soft: '#fafafa'
surface-strong: '#f0f0f0'
brand: '#f6851b'
brand-hover: '#e3760e'
brand-pressed: '#cc6800'
brand-deep: '#a85400'
brand-tint: '#fde5cc'
brand-soft: '#fbcc99'
on-brand: '#ffffff'
fox-blue: '#037dd6'
fox-blue-deep: '#0260a4'
fox-red: '#d73a49'
text: '#1a1a1a'
text-strong: '#000000'
text-muted: '#535a61'
text-soft: '#8e8e8e'
text-faint: '#bcbcbc'
text-on-brand: '#ffffff'
link: '#037dd6'
link-hover: '#0260a4'
selected-bg: '#fde5cc'
border: '#d6d9dc'
border-strong: '#bbbfc4'
border-soft: '#eaecef'
border-brand: '#f6851b'
network-eth: '#627eea'
network-polygon: '#8247e5'
network-arbitrum: '#28a0f0'
network-optimism: '#ff0420'
success: '#1a8757'
warning: '#cc8800'
danger: '#d73a49'
info: '#037dd6'
typography:
display:
family: '"MM Sans", "Inter", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif'
weights: [500, 700, 800]
body:
family: '"MM Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif'
weights: [400, 500, 600, 700]
mono:
family: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace'
weights: [400, 500]
scale:
display-hero: { size: 72, weight: 800, lineHeight: 1.05, tracking: '-0.02em', family: display }
display-xl: { size: 56, weight: 800, lineHeight: 1.1, tracking: '-0.018em', family: display }
display-lg: { size: 48, weight: 700, lineHeight: 1.15, tracking: '-0.012em', family: display }
h1: { size: 36, weight: 700, lineHeight: 1.2, tracking: '-0.008em', family: display }
h2: { size: 28, weight: 700, lineHeight: 1.25, tracking: '-0.005em', family: display }
h3: { size: 22, weight: 700, lineHeight: 1.3, tracking: '0', family: display }
h4: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: display }
eyebrow: { size: 12, weight: 700, lineHeight: 1.2, tracking: '0.10em', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 13, weight: 700, lineHeight: 1.3, tracking: '0.04em', family: body }
button: { size: 15, weight: 700, lineHeight: 1.0, tracking: '0.02em', family: body }
address: { size: 13, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
radius:
micro: 4
sm: 8
md: 12
lg: 16
pill: 9999
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 56, 80, 96, 120]
layout:
page-width: 1280
prose-width: 720
header-height: 72
motion:
ease-standard: 'cubic-bezier(0.25, 0.1, 0.25, 1)'
ease-emphasized: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 400
reduced-motion: 'respects prefers-reduced-motion: reduce — disables fox-mascot animations'
breakpoints:
mobile: 480
tablet: 768
desktop: 1280
wide: 1440
shadows:
card: '0 2px 8px rgba(246, 133, 27, 0.08)'
card-hover: '0 6px 20px rgba(246, 133, 27, 0.14)'
modal: '0 20px 60px rgba(0, 0, 0, 0.20)'
accessibility:
contrast-text-on-bg: 16.1
contrast-text-on-brand: 4.6
focus-ring: '3px solid #037dd6'
reduced-motion-honored: true
components:
button-primary: { bg: brand, text: on-brand, padding: '14px 28px', radius: pill, font: button }
button-secondary: { bg: bg, text: brand-pressed, padding: '12px 26px', radius: pill, border: '2px solid border-brand' }
button-ghost: { bg: transparent, text: brand-pressed, padding: '10px 20px' }
card: { bg: surface, radius: 12, padding: 24, border: '1px solid border-soft', shadow: 'card' }
pill: { bg: brand-tint, text: brand-pressed, radius: pill, padding: '4px 12px', font: 'label' }
network-pill: { bg: 'transparent', text: 'network-color', radius: pill, padding: '4px 12px', border: '1px solid network-color', font: 'label' }
input: { bg: bg, border: '1px solid border-strong', text: text, radius: 8, padding: '12px 16px', focus-border: brand }
lineage:
summary: 'MetaMask''s marketing system descends from the 2016 ConsenSys-era Ethereum-onboarding origin. Foxy Orange `#f6851b` was lifted directly from the iconic 8-bit fox mascot (named Cipher), drawn by Aaron Davis in 2018. MM Sans (custom geometric sans, Inter-adjacent) handles every heading. The fox mascot appears more frequently than Phantom''s ghost — wave-animated on hero, idle-bobbing on dashboard, present in 70% of marketing images. Network accent palette (Ethereum blue, Polygon purple, Arbitrum blue, Optimism red) chips chains across UI. Voice is friendly-utility: making Ethereum approachable without dumbing it down. The whole brand reads as crypto-onboarding-friendly — for the user who heard about NFTs from a friend, not the user already running a node.'
influences:
- { name: 'ConsenSys (2016 origin)', role: 'Ethereum-foundation incubator shaping crypto-onboarding instincts', url: 'https://consensys.io' }
- { name: 'Cipher the 8-bit fox (Aaron Davis, 2018)', role: 'pixel-art mascot anchoring brand identity', url: 'https://metamask.io' }
- { name: 'Pantone 144 / web-orange palette', role: 'warm orange lineage', url: 'https://www.pantone.com' }
- { name: 'Phantom + Coinbase + Trust Wallet', role: 'crypto-wallet contemporaries', url: 'https://phantom.com' }
- { name: '8-bit pixel art aesthetic (NES/SNES era)', role: 'mascot visual lineage — pixelated, friendly, retro', url: 'https://en.wikipedia.org/wiki/Pixel_art' }
---
## 1. Visual Theme & Atmosphere
MetaMask's site is the Ethereum-side counterpart to Phantom's Solana editorial-restraint. The canvas is white `#ffffff`, headings sit in MM Sans (custom geometric sans) at 48–72px, and the brand color is **Foxy Orange** `#f6851b` — a warm orange lifted from the iconic 8-bit fox mascot Cipher. Where Phantom went dark editorial, MetaMask went light-friendly with the fox as the brand's defining visual identity.
The 8-bit pixelated fox appears more frequently than Phantom's ghost — wave-animated on hero, idle-bobbing on dashboard, present in 70% of marketing images. Network accent palette (Ethereum blue `#627eea`, Polygon purple `#8247e5`, Arbitrum blue `#28a0f0`, Optimism red `#ff0420`) chips chains across UI. Voice is friendly-utility: "Your gateway to Ethereum and the decentralized web" — making the chain approachable without dumbing it down.
CTAs are pill-radius (9999px), with bg Foxy Orange and white text. Cards have 12px radius and soft orange-tinted shadows. Body uses 16px line-height 1.55. The whole brand reads as **crypto-onboarding-friendly**: for the user who heard about NFTs from a friend, not the user already running a node.
**Key Characteristics:**
- White canvas + Foxy Orange `#f6851b`
- 8-bit fox mascot Cipher — present in 70% of marketing
- MM Sans (custom geometric, Inter-adjacent)
- Pill-radius CTAs, 12px card radius
- Network-color chips (ETH/Polygon/Arbitrum/Optimism)
- Soft orange-tinted shadows
- Mono for addresses
- Light-only canvas
- Friendly-utility voice
- Pixel-art animation on fox
## 2. Color Palette & Roles
### Primary
- **Background** (`#ffffff`): white.
- **Bg Warm** (`#fdf6ed`): peach wash for hero.
- **Text** (`#1a1a1a`): body.
### Brand — Foxy Orange
- **Brand** (`#f6851b`): primary CTA, fox-mascot color.
- **Brand Hover** (`#e3760e`), **Pressed** (`#cc6800`), **Deep** (`#a85400`).
- **Brand Tint** (`#fde5cc`): selection wash.
### Fox Palette (mascot)
- **Fox Blue** (`#037dd6`): mascot accents, links.
- **Fox Red** (`#d73a49`): danger.
### Network Accents (chips only)
- **ETH Blue** (`#627eea`), **Polygon Purple** (`#8247e5`), **Arbitrum Blue** (`#28a0f0`), **Optimism Red** (`#ff0420`)
### Surface
- **Surface** (`#ffffff`), **Surface Soft** (`#fafafa`), **Surface Strong** (`#f0f0f0`).
### Borders
- **Border** (`#d6d9dc`), **Border Strong** (`#bbbfc4`), **Border Soft** (`#eaecef`).
### Semantic
- success `#1a8757`, warning `#cc8800`, danger `#d73a49`, info fox-blue.
## 3. Typography Rules
### Font Family
- **Display + Body**: MM Sans (custom geometric). Falls back to Inter → Söhne.
- **Mono**: JetBrains Mono / IBM Plex Mono for blockchain addresses.
### Hierarchy
| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | MM Sans | 72 | 800 | 1.05 | -0.02em |
| display-lg | MM Sans | 48 | 700 | 1.15 | -0.012em |
| h1 | MM Sans | 36 | 700 | 1.2 | -0.008em |
| h2 | MM Sans | 28 | 700 | 1.25 | -0.005em |
| h3 | MM Sans | 22 | 700 | 1.3 | 0 |
| eyebrow | MM Sans | 12 | 700 | 1.2 | 0.10em UPPER |
| body | MM Sans | 16 | 400 | 1.55 | 0 |
| label | MM Sans | 13 | 700 | 1.3 | 0.04em |
| button | MM Sans | 15 | 700 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
### Principles
- **MM Sans for everything**, mono for addresses.
- **Bold weights on display** (700-800).
- **Mixed case display, UPPER eyebrows.**
## 4. Component Stylings
### Buttons (3 variants — pill-radius)
**Primary** — Foxy Orange:
- bg `#f6851b`, text white, 15px MM Sans 700 0.02em
- Padding 14×28, radius 9999 (pill)
- Hover: bg `#e3760e`, scale 1.02
**Secondary** — bordered:
- bg white, text brand-pressed, 2px brand border, pill radius
**Ghost**: bg transparent, text brand-pressed, padding 10×20.
### Cards
- bg white, **12px radius**, padding 24
- 1px soft border + soft orange-tinted shadow `0 2px 8px rgba(246,133,27,0.08)`
### Pills
- Default: `brand-tint` bg, `brand-pressed` text, pill radius
- Network pills: outlined in network color, transparent bg, network-color text
### Inputs
- bg white, 1px gray border, 8px radius, padding 12×16
- Focus: border Foxy Orange
### Navigation
- 72px sticky header, white bg
- MetaMask wordmark left (with fox-mascot icon), top-level nav center, "Download" pill CTA right
## 5. Layout Principles
- Base 4px, 96-120px between sections
- Page max width 1280px
- Hero: fox-mascot animation right + headline left
- Network chain grid: 4-up at desktop, 2-up at tablet
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | tags |
| Standard | 8 | inputs, dropdowns |
| Comfortable | 12 | **cards** |
| Relaxed | 16 | featured cards |
| Pill | 9999 | **buttons + pills** |
## 7. Depth & Elevation
| Level | Treatment |
|-------|-----------|
| 1 | `0 2px 8px rgba(246,133,27,0.08)` resting |
| 2 | `0 6px 20px rgba(246,133,27,0.14)` hover |
| 3 | `0 12px 32px rgba(246,133,27,0.18)` featured |
| 4 | `0 20px 60px rgba(0,0,0,0.20)` modal |
## 8. Interaction & Motion
- Standard ease, emphasized for fox-mascot bounces
- 150ms hover, 240ms standard, 400ms slow
- Fox waves on hero load (300ms), idle-bobs ±2px on dashboard
- Card hover: shadow lift + 1.01 scale
## 9. Accessibility & A11y
- text on bg = **16.1:1** AAA
- on-brand on brand: white on Foxy Orange = **4.6:1** AA
- 3px fox-blue focus ring (distinct from brand)
Fox-mascot is `aria-hidden="true"` — decorative. Network chips have `aria-label="Connected to Ethereum mainnet"`.
## 10. Responsive Behavior
mobile <479: hero 72→44; nav hamburger; 1-up. tablet: 2-up. desktop+: 3-4-up.
## 11. Content & Voice
### Tone
**Friendly-utility.** Approachable for newcomers, capable for power users.
### Microcopy patterns
- Primary CTA: **"Download MetaMask"** / **"Connect wallet"**
- Sign-up: implicit
- Errors: **"Couldn't connect. Try refreshing."**
- Loading: **"Pending transaction…"**
- Empty: **"No tokens yet. Buy ETH to get started."**
### CTA verb conventions
- **Download / Connect / Send / Swap / Buy**
- Avoid: NFT-bro ("Ape in"), corporate ("Onboard")
## 12. Dark Mode & Theming
**Light + Dark.** MetaMask Extension UI has both modes. Marketing site is light-only.
Dark variant: bg `#1c1c1c`, text white, Foxy Orange unchanged.
## 13. Lineage & Influences
MetaMask descends from 2016 ConsenSys-era Ethereum-onboarding origins. Foxy Orange `#f6851b` was lifted from Aaron Davis's 2018 8-bit fox mascot Cipher. MM Sans (custom geometric) anchors typography. The fox appears in 70% of marketing — more frequently than Phantom's ghost — making MetaMask brand-warmer.
**Named influences:**
- **ConsenSys (2016 origin)** — Ethereum incubator
- **Cipher the 8-bit fox (Aaron Davis, 2018)** — pixel mascot
- **Pantone 144** — warm orange
- **Phantom + Coinbase + Trust Wallet** — wallet contemporaries
- **8-bit pixel art (NES/SNES era)** — mascot visual lineage
## 14. Do's and Don'ts
### Do
- **Foxy Orange `#f6851b` for primary CTA + brand only.**
- **MM Sans (or Inter fallback).**
- **Pill-radius CTAs, 12px cards.**
- **8-bit fox mascot on hero / 404 / empty states.**
- **Network-color chips for chain selection.**
- **Mono for addresses.**
- **Soft orange-tinted shadows.**
- **Friendly-utility voice.**
### Don't
- **Don't substitute Foxy Orange.**
- **Don't smooth-illustrate the fox.** Pixel-art is the brand.
- **Don't use network colors as primary CTA.**
- **Don't all-caps headlines.**
- **Don't add gradients on CTA.**
- **Don't add NFT-bro microcopy.**
## 15. Agent Prompt Guide
### Quick Color Reference
- bg: `#ffffff`
- text: `#1a1a1a`
- brand (Foxy Orange): `#f6851b` / hover `#e3760e`
- fox-blue: `#037dd6`
- network: ETH `#627eea`, Polygon `#8247e5`, Arbitrum `#28a0f0`, Optimism `#ff0420`
### Example Component Prompts
> Build a MetaMask-style hero: white canvas, 8-bit fox mascot (Cipher) animated wave right 50%, 72px MM Sans 800 heading "A wallet for the decentralized web" left. Pill-radius Foxy Orange `#f6851b` "Download MetaMask" CTA, white 15px MM Sans 700.
> Design a network selector: list of pills, each with network color outline + label "ETHEREUM" / "POLYGON" / "ARBITRUM" / "OPTIMISM". Active pill has filled bg in network color.
> Render an address display: JetBrains Mono 13px gray on white, "0xABCD...1234" truncated, copy-icon button in fox-blue.
> Build a "Connect Wallet" CTA: pill radius, Foxy Orange bg, white 15px MM Sans 700 0.02em "Connect Wallet", padding 14×28.
> Design a token card: white surface, 12px radius, 24px pad, soft orange-tinted shadow. Token icon left, token name 16px Bold, balance right-aligned in 24px Bold black. Network chip below.
### Iteration Guide
1. **White + Foxy Orange + MM Sans + Pixel Fox.**
2. **Pill-radius CTAs, 12px cards.**
3. **Network colors for chain chips, never primary CTA.**
4. **Mono for addresses.**
5. **8-bit pixel-art aesthetic preserved on fox.**
6. **Friendly-utility voice.**
7. **Reject smooth fox illustrations, NFT-bro language, gradient CTAs.**
1. Visual Theme & Atmosphere
MetaMask’s site is the Ethereum-side counterpart to Phantom’s Solana editorial-restraint. The canvas is white #ffffff, headings sit in MM Sans (custom geometric sans) at 48–72px, and the brand color is Foxy Orange #f6851b — a warm orange lifted from the iconic 8-bit fox mascot Cipher. Where Phantom went dark editorial, MetaMask went light-friendly with the fox as the brand’s defining visual identity.
The 8-bit pixelated fox appears more frequently than Phantom’s ghost — wave-animated on hero, idle-bobbing on dashboard, present in 70% of marketing images. Network accent palette (Ethereum blue #627eea, Polygon purple #8247e5, Arbitrum blue #28a0f0, Optimism red #ff0420) chips chains across UI. Voice is friendly-utility: “Your gateway to Ethereum and the decentralized web” — making the chain approachable without dumbing it down.
CTAs are pill-radius (9999px), with bg Foxy Orange and white text. Cards have 12px radius and soft orange-tinted shadows. Body uses 16px line-height 1.55. The whole brand reads as crypto-onboarding-friendly: for the user who heard about NFTs from a friend, not the user already running a node.
Key Characteristics:
- White canvas + Foxy Orange
#f6851b - 8-bit fox mascot Cipher — present in 70% of marketing
- MM Sans (custom geometric, Inter-adjacent)
- Pill-radius CTAs, 12px card radius
- Network-color chips (ETH/Polygon/Arbitrum/Optimism)
- Soft orange-tinted shadows
- Mono for addresses
- Light-only canvas
- Friendly-utility voice
- Pixel-art animation on fox
2. Color Palette & Roles
Primary
- Background (
#ffffff): white. - Bg Warm (
#fdf6ed): peach wash for hero. - Text (
#1a1a1a): body.
Brand — Foxy Orange
- Brand (
#f6851b): primary CTA, fox-mascot color. - Brand Hover (
#e3760e), Pressed (#cc6800), Deep (#a85400). - Brand Tint (
#fde5cc): selection wash.
Fox Palette (mascot)
- Fox Blue (
#037dd6): mascot accents, links. - Fox Red (
#d73a49): danger.
Network Accents (chips only)
- ETH Blue (
#627eea), Polygon Purple (#8247e5), Arbitrum Blue (#28a0f0), Optimism Red (#ff0420)
Surface
- Surface (
#ffffff), Surface Soft (#fafafa), Surface Strong (#f0f0f0).
Borders
- Border (
#d6d9dc), Border Strong (#bbbfc4), Border Soft (#eaecef).
Semantic
- success
#1a8757, warning#cc8800, danger#d73a49, info fox-blue.
3. Typography Rules
Font Family
- Display + Body: MM Sans (custom geometric). Falls back to Inter → Söhne.
- Mono: JetBrains Mono / IBM Plex Mono for blockchain addresses.
Hierarchy
| Role | Font | Size | Weight | LH | Tracking |
|---|---|---|---|---|---|
| display-hero | MM Sans | 72 | 800 | 1.05 | -0.02em |
| display-lg | MM Sans | 48 | 700 | 1.15 | -0.012em |
| h1 | MM Sans | 36 | 700 | 1.2 | -0.008em |
| h2 | MM Sans | 28 | 700 | 1.25 | -0.005em |
| h3 | MM Sans | 22 | 700 | 1.3 | 0 |
| eyebrow | MM Sans | 12 | 700 | 1.2 | 0.10em UPPER |
| body | MM Sans | 16 | 400 | 1.55 | 0 |
| label | MM Sans | 13 | 700 | 1.3 | 0.04em |
| button | MM Sans | 15 | 700 | 1.0 | 0.02em |
| address | JetBrains Mono | 13 | 400 | 1.5 | 0 |
Principles
- MM Sans for everything, mono for addresses.
- Bold weights on display (700-800).
- Mixed case display, UPPER eyebrows.
4. Component Stylings
Buttons (3 variants — pill-radius)
Primary — Foxy Orange:
- bg
#f6851b, text white, 15px MM Sans 700 0.02em - Padding 14×28, radius 9999 (pill)
- Hover: bg
#e3760e, scale 1.02
Secondary — bordered:
- bg white, text brand-pressed, 2px brand border, pill radius
Ghost: bg transparent, text brand-pressed, padding 10×20.
Cards
- bg white, 12px radius, padding 24
- 1px soft border + soft orange-tinted shadow
0 2px 8px rgba(246,133,27,0.08)
Pills
- Default:
brand-tintbg,brand-pressedtext, pill radius - Network pills: outlined in network color, transparent bg, network-color text
Inputs
- bg white, 1px gray border, 8px radius, padding 12×16
- Focus: border Foxy Orange
Navigation
- 72px sticky header, white bg
- MetaMask wordmark left (with fox-mascot icon), top-level nav center, “Download” pill CTA right
5. Layout Principles
- Base 4px, 96-120px between sections
- Page max width 1280px
- Hero: fox-mascot animation right + headline left
- Network chain grid: 4-up at desktop, 2-up at tablet
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| Micro | 4 | tags |
| Standard | 8 | inputs, dropdowns |
| Comfortable | 12 | cards |
| Relaxed | 16 | featured cards |
| Pill | 9999 | buttons + pills |
7. Depth & Elevation
| Level | Treatment |
|---|---|
| 1 | 0 2px 8px rgba(246,133,27,0.08) resting |
| 2 | 0 6px 20px rgba(246,133,27,0.14) hover |
| 3 | 0 12px 32px rgba(246,133,27,0.18) featured |
| 4 | 0 20px 60px rgba(0,0,0,0.20) modal |
8. Interaction & Motion
- Standard ease, emphasized for fox-mascot bounces
- 150ms hover, 240ms standard, 400ms slow
- Fox waves on hero load (300ms), idle-bobs ±2px on dashboard
- Card hover: shadow lift + 1.01 scale
9. Accessibility & A11y
- text on bg = 16.1:1 AAA
- on-brand on brand: white on Foxy Orange = 4.6:1 AA
- 3px fox-blue focus ring (distinct from brand)
Fox-mascot is aria-hidden="true" — decorative. Network chips have aria-label="Connected to Ethereum mainnet".
10. Responsive Behavior
mobile <479: hero 72→44; nav hamburger; 1-up. tablet: 2-up. desktop+: 3-4-up.
11. Content & Voice
Tone
Friendly-utility. Approachable for newcomers, capable for power users.
Microcopy patterns
- Primary CTA: “Download MetaMask” / “Connect wallet”
- Sign-up: implicit
- Errors: “Couldn’t connect. Try refreshing.”
- Loading: “Pending transaction…”
- Empty: “No tokens yet. Buy ETH to get started.”
CTA verb conventions
- Download / Connect / Send / Swap / Buy
- Avoid: NFT-bro (“Ape in”), corporate (“Onboard”)
12. Dark Mode & Theming
Light + Dark. MetaMask Extension UI has both modes. Marketing site is light-only.
Dark variant: bg #1c1c1c, text white, Foxy Orange unchanged.
13. Lineage & Influences
MetaMask descends from 2016 ConsenSys-era Ethereum-onboarding origins. Foxy Orange #f6851b was lifted from Aaron Davis’s 2018 8-bit fox mascot Cipher. MM Sans (custom geometric) anchors typography. The fox appears in 70% of marketing — more frequently than Phantom’s ghost — making MetaMask brand-warmer.
Named influences:
- ConsenSys (2016 origin) — Ethereum incubator
- Cipher the 8-bit fox (Aaron Davis, 2018) — pixel mascot
- Pantone 144 — warm orange
- Phantom + Coinbase + Trust Wallet — wallet contemporaries
- 8-bit pixel art (NES/SNES era) — mascot visual lineage
14. Do’s and Don’ts
Do
- Foxy Orange
#f6851bfor primary CTA + brand only. - MM Sans (or Inter fallback).
- Pill-radius CTAs, 12px cards.
- 8-bit fox mascot on hero / 404 / empty states.
- Network-color chips for chain selection.
- Mono for addresses.
- Soft orange-tinted shadows.
- Friendly-utility voice.
Don’t
- Don’t substitute Foxy Orange.
- Don’t smooth-illustrate the fox. Pixel-art is the brand.
- Don’t use network colors as primary CTA.
- Don’t all-caps headlines.
- Don’t add gradients on CTA.
- Don’t add NFT-bro microcopy.
15. Agent Prompt Guide
Quick Color Reference
- bg:
#ffffff - text:
#1a1a1a - brand (Foxy Orange):
#f6851b/ hover#e3760e - fox-blue:
#037dd6 - network: ETH
#627eea, Polygon#8247e5, Arbitrum#28a0f0, Optimism#ff0420
Example Component Prompts
Build a MetaMask-style hero: white canvas, 8-bit fox mascot (Cipher) animated wave right 50%, 72px MM Sans 800 heading “A wallet for the decentralized web” left. Pill-radius Foxy Orange
#f6851b“Download MetaMask” CTA, white 15px MM Sans 700.
Design a network selector: list of pills, each with network color outline + label “ETHEREUM” / “POLYGON” / “ARBITRUM” / “OPTIMISM”. Active pill has filled bg in network color.
Render an address display: JetBrains Mono 13px gray on white, “0xABCD…1234” truncated, copy-icon button in fox-blue.
Build a “Connect Wallet” CTA: pill radius, Foxy Orange bg, white 15px MM Sans 700 0.02em “Connect Wallet”, padding 14×28.
Design a token card: white surface, 12px radius, 24px pad, soft orange-tinted shadow. Token icon left, token name 16px Bold, balance right-aligned in 24px Bold black. Network chip below.
Iteration Guide
- White + Foxy Orange + MM Sans + Pixel Fox.
- Pill-radius CTAs, 12px cards.
- Network colors for chain chips, never primary CTA.
- Mono for addresses.
- 8-bit pixel-art aesthetic preserved on fox.
- Friendly-utility voice.
- Reject smooth fox illustrations, NFT-bro language, gradient CTAs.
Drop metamask into your project, then ship the actual sections in an afternoon.
1 · install design
npx @webdesignhot/design-md add metamask 2 · ship landing page
npx agentkit init --design metamask