What is MetaMask's primary brand color?

MetaMask's dominant chromatic brand signal is deep plum-purple #3d065f, wired as --institution-purple-dark, --developer-purple-dark, and --consumer-purple-dark. It appears 70 times in the extraction (32 as text, 32 as border, 6 as background fill) — the highest frequency non-structural color. It fills the hero headline text and the structural UI headers. The secondary brand color is a near-black #0a0a0a wired as --general-black, which appears 1261 times as the dominant ink tone. The domain-specific feature tiles use deep indigo (#190066) for consumer blue tiles, chartreuse-green (#baf24a) for developer green tiles, and deep teal (#013330) for institution green tiles — these are audience-scoped rather than brand-primary.

What typefaces does MetaMask use, and what should I use as substitutes?

MetaMask runs three proprietary typefaces: MMPolyVariable (wired as --font-mm-poly-variable) for display headlines at 128-160px, MMEuclidCircularB (wired as --font-mm-euclid) for all UI chrome and body copy, and MMSansMono (wired as --font-mm-sans-mono) for code and metadata contexts. A fourth family, MMSansVariable (wired as --font-mm-sans-variable), appears for section h2 headings at 24px. All four are proprietary. For substitutes: MMPolyVariable at 160px in weight 400 reads as an ultra-heavy compressed display variable font — the closest open-source match is Bebas Neue (condensed, heavy) or Anybody (variable, compressed). MMEuclidCircularB shares proportions with Circular by Lineto; open-source alternatives include Nunito or DM Sans with round terminals. For MMSansMono, JetBrains Mono is a close match.

Why does MetaMask use a warm blush-peach background instead of dark or white?

The warm blush-peach canvas (#fff1eb, named --home-light-pink in the MetaMask CSS) is a deliberate departure from the crypto-dark convention. Coinbase, Phantom, Kraken, and Rainbow all default to dark canvases with electric neon accents, signaling technical authority through nighttime aesthetics. MetaMask's blush canvas — combined with the deep plum-purple headline and fox-orange triangular shapes — reads as art-forward and approachable. The specific warmth of #fff1eb also sets up the colorful product tiles below the fold: chartreuse-green (#baf24a), deep indigo (#190066), and salmon-orange (#ffa680) all read with more chromatic presence against warm off-white than they would against pure white. The canvas is doing perceptual contrast work, not just brand differentiation.

What is the MetaMask domain color system and how should I use it?

MetaMask's CSS variable system exposes three audience domains, each with a full color scale: Consumer (orange as primary, with --consumer-orange #ff5c16, --consumer-orange-light #ffa680, --consumer-orange-dark #661800), Developer (purple + orange), and Institution (blue + purple + green). Each domain also gets a perps-green variant (for perpetuals trading) and a blue variant. The convergence color shared across all three domains is plum-purple #3d065f (--consumer-purple-dark = --developer-purple-dark = --institution-purple-dark). In practice: use {colors.ink-plum} as the universal brand primary, reach into the domain colors only when building surfaces explicitly for one audience, and never mix domain colors within a single UI surface — they are meant to signal context, not decorate.

Can I use this DESIGN.md to build my own crypto-wallet marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce MetaMask's specific moves: a warm blush-peach canvas instead of dark, plum-purple for structural text and borders, a 160px variable-font display headline, 70px superellipse card rounding, and the domain-color tile system. Token references resolve cleanly: {colors.canvas} for the blush-peach floor, {colors.ink-plum} for the display text, {colors.feature-indigo} and {colors.feature-chartreuse} for domain tiles. The one move to borrow selectively is the 160px display: it only works at near-full viewport width with 1-3 short words. Multi-word phrases at that scale require responsive type scaling or the letterforms become illegible at tablet width.

MetaMask Design System

MetaMask's marketing system runs three custom typefaces against a warm blush-peach canvas, with a 160px ultra-heavy display hero in deep plum-purple and domain-scoped CSS color to…

About MetaMask DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source metamask.io

Fintech & Crypto

MetaMask's hero breaks two conventions simultaneously. Most crypto brands — Coinbase, Phantom, Rainbow — use a dark canvas with electric accent colors to signal technological authority. MetaMask uses a warm blush-peach background (#fff1eb, named --home-light-pink in the CSS) and renders the headline "YOUR HOME ONCHAIN" in deep plum-purple (#3d065f) at 160px using a proprietary variable font named MMPolyVariable. The effect reads as poster art rather than software marketing: massive, colored letterforms on a warm neutral ground, flanked by stylized fox-orange and crimson triangular shapes that suggest the MetaMask fox-mascot without literalism. The brand is the mascot's colors, not the crypto-dark convention.

The DESIGN.md file packages three custom font families: MMPolyVariable (the display voice, used at 160px, 128px, and 32px), MMEuclidCircularB (the interface voice, appearing 26 times at 16px/500 and across all UI chrome), and MMSansMono (the code/metadata voice). All three are MetaMask proprietary. The color system exposes unusual architectural transparency: CSS variable names follow a domain-audience pattern — `--consumer-orange`, `--developer-purple`, `--institution-blue`, `--consumer-perps-green` — revealing that MetaMask has three distinct product audiences (consumer wallet, developer tools, institutional clients) each with their own domain color. The deep plum-purple (#3d065f) is the convergence tone that all three audiences share.

The feature card system below the fold is where the domain colors activate. Product tiles use saturated indigo (#190066) for one cluster, chartreuse-green (#baf24a) for another, and deep teal (#013330) for a third. Each tile uses 70px border radius — producing a superellipse shape that reads distinctly at the ~200px tile scale. The overall effect is that the brand page functions as both a consumer-facing marketing site and a signal to developers and institutions that MetaMask is a platform with distinct surfaces for each audience.

What makes it distinct

160px display at weight 400MMPolyVariable at 160px renders the hero headline at a scale almost no other crypto or fintech brand attempts; the visual mass of the letterforms carries the page
Blush-peach canvasthe page floor uses a warm off-white (#fff1eb, wired as --home-light-pink) rather than pure white or dark navy, giving MetaMask immediate differentiation from the dark-canvas crypto convention
Deep plum-purple ink#3d065f fills the hero headline and structural UI at 70 total occurrences, establishing a distinct brand signature separate from the generic violet of most web3 tools
Domain-scoped color systemCSS variables follow the pattern --consumer-orange, --developer-purple, --institution-blue, exposing the three-audience architecture directly in the token naming
70px as the dominant card radius96 of the extracted radius values are 70px, producing a distinctive superellipse card shape used across the product feature tiles

Live at metamask.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

metamask.io

Explore MetaMask

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

MetaMask design system FAQ

Common questions about MetaMask's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

MetaMask — official site

MetaMask's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.