---
version: alpha
name: "MetaMask"
website: "https://metamask.io"
description: >-
  A crypto wallet brand that uses three proprietary typefaces — MMPolyVariable at 160px for an ultra-heavy hero display, MMEuclidCircularB for all UI chrome, and MMSansMono for code contexts — against a warm blush-peach canvas (#fff1eb) as the page floor. The hero headline "YOUR HOME ONCHAIN" fills the viewport in deep plum-purple (#3d065f), flanked by stylized fox-orange triangle shapes. Product feature cards use saturated indigo (#190066) and chartreuse-green (#baf24a) fills as distinct domain tones. The system exposes an unusually detailed CSS variable system naming each color by product domain (consumer, developer, institution) and function (blue, purple, orange, green) — a rare case of brand architecture visible in the source.

seo:
  title: "MetaMask Design System for React — plum-purple on blush, MMPolyVariable, 16 components"
  metaDescription: "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 tokens for consumer, developer, and institution use cases. Tokens for React, Next.js, and AI tools."
  highlights:
    - "160px display at weight 400 — MMPolyVariable 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 canvas — the 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 system — CSS 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 radius — 96 of the extracted radius values are 70px, producing a distinctive superellipse card shape used across the product feature tiles"
  tags:
    - "Fintech & Crypto"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.

  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://metamask.io"
      title: "MetaMask — official site"
      description: "MetaMask's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is MetaMask's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does MetaMask use, and what should I use as substitutes?"
      answer: "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."
    - id: "blush-canvas"
      title: "Why does MetaMask use a warm blush-peach background instead of dark or white?"
      answer: "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."
    - id: "domain-color-system"
      title: "What is the MetaMask domain color system and how should I use it?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own crypto-wallet marketing site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  ink: "#0a0a0a"
  ink-plum: "#3d065f"
  ink-dark-gray: "#393d46"
  canvas: "#ffffff"
  canvas-blush: "#fff1eb"
  surface-1: "#e9edf6"
  surface-2: "#242628"
  hairline: "#c8ceda"
  feature-indigo: "#190066"
  feature-indigo-light: "#89b0ff"
  feature-indigo-tint: "#cce7ff"
  feature-plum: "#eac2ff"
  feature-chartreuse: "#baf24a"
  feature-chartreuse-light: "#e5ffc3"
  feature-teal: "#013330"
  feature-orange: "#ffa680"
  feature-orange-dark: "#661800"
  consumer-purple: "#d075ff"

typography:
  display-xl:
    fontFamily: "MMPolyVariable, \"MMPolyVariable Fallback\", \"Arial Bold\", Gadget, sans-serif"
    fontSize: 160px
    fontWeight: 400
    lineHeight: 160px
    letterSpacing: -0.96px
  display-lg:
    fontFamily: "MMPolyVariable, \"MMPolyVariable Fallback\", \"Arial Bold\", Gadget, sans-serif"
    fontSize: 128px
    fontWeight: 400
    lineHeight: 128px
    letterSpacing: -0.76px
  display-sm:
    fontFamily: "MMPolyVariable, \"MMPolyVariable Fallback\", \"Arial Bold\", Gadget, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0
  heading-lg:
    fontFamily: "MMSansVariable, \"MMSansVariable Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  heading-sm:
    fontFamily: "MMSansVariable, \"MMSansVariable Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0
  body-md:
    fontFamily: "MMEuclidCircularB, \"MMEuclidCircularB Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 19.84px
    letterSpacing: 0
  body-sm:
    fontFamily: "MMEuclidCircularB, \"MMEuclidCircularB Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: 0
  body-xs:
    fontFamily: "MMEuclidCircularB, \"MMEuclidCircularB Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 14px
    letterSpacing: 0
  label-caps:
    fontFamily: "MMEuclidCircularB, \"MMEuclidCircularB Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0
  caption:
    fontFamily: "MMEuclidCircularB, \"MMEuclidCircularB Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  button-md:
    fontFamily: "MMEuclidCircularB, \"MMEuclidCircularB Fallback\", Arial, \"Helvetica Neue\", Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "20px"
  card: "70px"
  pill: "100px"
  full: "9999px"

spacing:
  xs: "2px"
  sm: "4px"
  md: "6px"
  base: "8px"
  lg: "10px"
  xl: "16px"
  2xl: "24px"
  3xl: "25px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "16px 24px 15px"
    height: "48px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "10px 20px 11px"
    height: "40px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas-blush}"
    textColor: "{colors.ink}"
    typography: "{typography.body-xs}"
    padding: "0px 24px"
    height: "98px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-xs}"
    padding: "6px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-plum}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: "0px 6px"
  feature-card-indigo:
    backgroundColor: "{colors.feature-indigo}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: "16px"
  feature-card-chartreuse:
    backgroundColor: "{colors.feature-chartreuse}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: "16px"
  feature-card-teal:
    backgroundColor: "{colors.feature-teal}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: "16px"
  feature-card-orange:
    backgroundColor: "{colors.feature-orange}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: "16px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "8px 12px"
    height: "36px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    padding: "25px 16px"
---

## Overview

MetaMask's marketing site inverts the crypto-dark convention without announcing that it is doing so. **Blush canvas, plum authority.** The page floor is a warm blush-peach rather than the night-black that Coinbase, Phantom, and Kraken use. The hero headline — "YOUR HOME ONCHAIN" — fills the viewport at 160px in deep plum-purple, set in MMPolyVariable, MetaMask's proprietary ultra-heavy variable font. Two stylized fox-orange and crimson triangular shapes flank the composition. The visual register is closer to concert-poster design than to a SaaS hero.

Where other web3 brands use a single brand color, MetaMask exposes a domain-scoped color architecture in the CSS: `--consumer-orange`, `--developer-purple`, `--institution-blue`, each with a full scale (dark / base / light / tint). The product is three things — a consumer wallet, a developer platform, and an institutional tool — and the token system names that reality explicitly. Three audiences, one plum-purple convergence point.

**Key Characteristics:**
- MMPolyVariable at 160px / weight 400 for the hero h1 — at this scale the "YOUR HOME ONCHAIN" text occupies the full viewport width; it is the most typographically aggressive display moment in the crypto marketing category.
- Warm blush-peach canvas (#fff1eb, wired as --home-light-pink) against the crypto-dark convention shared by Coinbase, Phantom, Kraken, Rainbow.
- Deep plum-purple (#3d065f) at frequency 70 for structural text and borders — the convergence tone shared by all three product domains.
- Feature tiles use domain-color fills: deep indigo (#190066) for consumer blue cluster, chartreuse (#baf24a) for developer green cluster, deep teal (#013330) for institutional green — all on 70px superellipse cards.
- 70px border radius at 96 occurrences — the system's dominant shape language, producing a superellipse tile at practical feature-card dimensions.
- Three proprietary typefaces (MMPolyVariable / MMEuclidCircularB / MMSansMono) across distinct surface roles — display, UI, code.
- CSS variable naming follows `--{domain}-{color}` convention, exposing brand architecture as engineering vocabulary.

## Colors

### Ink

- **Ink** (`{colors.ink}` — #0a0a0a): frequency 1261. Used as text (625), border (621), bg (15). The dominant text tone, wired as --general-black. Near-black rather than pure black — the 4-point softening is barely perceptible but consistent across all text.
- **Ink-plum** (`{colors.ink-plum}` — #3d065f): frequency 70. Used as text (32), border (32), bg (6). The convergence brand color across all three product domains. Wired as --institution-purple-dark / --developer-purple-dark / --consumer-purple-dark simultaneously.
- **Ink-dark-gray** (`{colors.ink-dark-gray}` — #393d46): frequency 54. Used as text (27), border (27). Secondary structural ink, wired as --general-gray-dark.

### Canvas

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 90. Used as text (29), bg (26), border (34). Pure white — used for card surfaces and text-on-dark surfaces. Wired across dozens of --osano and --general-white aliases.
- **Canvas-blush** (`{colors.canvas-blush}` — #fff1eb): frequency 1. bg (1). The page floor, wired as --home-light-pink. Warm blush-peach — present throughout the hero as the background canvas, despite its low raw frequency count.
- **Surface-1** (`{colors.surface-1}` — #e9edf6): frequency 8. bg (8). Wired as --general-gray-light. Used for the Osano consent UI and hover states.
- **Surface-2** (`{colors.surface-2}` — #242628): frequency 1. bg (1). Wired as --general-black-light. The very-dark surface used for the CTA pill nav button.
- **Hairline** (`{colors.hairline}` — #c8ceda): frequency 4. bg (4). Wired as --general-gray. Mid-gray used for divider and input borders.

### Domain Feature Colors

- **Feature-indigo** (`{colors.feature-indigo}` — #190066): frequency 14. text (4), bg (6), border (4). Wired as --consumer-blue-dark / --institution-blue-dark. The indigo fill of the consumer domain tiles below the fold.
- **Feature-indigo-light** (`{colors.feature-indigo-light}` — #89b0ff): frequency 2. bg (2). Wired as --institution-blue / --developer-blue / --consumer-blue. Lighter blue for the institution audience tile.
- **Feature-indigo-tint** (`{colors.feature-indigo-tint}` — #cce7ff): frequency 2. bg (2). Pale blue tint for the lightest tier of the blue domain.
- **Feature-plum** (`{colors.feature-plum}` — #eac2ff): frequency 5. text (1), bg (3), border (1). Wired as --developer-purple-light / --consumer-purple-light. Pale lavender for the lighter purple feature tiles.
- **Feature-chartreuse** (`{colors.feature-chartreuse}` — #baf24a): frequency 4. bg (4). Wired as --developer-green / --consumer-green / --institution-green. Electric chartreuse for the developer domain feature tiles.
- **Feature-chartreuse-light** (`{colors.feature-chartreuse-light}` — #e5ffc3): frequency 2. bg (2). Pale chartreuse tint for lighter green domain tiles.
- **Feature-teal** (`{colors.feature-teal}` — #013330): frequency 4. text (1), bg (2), border (1). Wired as --consumer-perps-green-dark / --developer-green-dark. Deep forest teal for the institutional and perpetuals-trading tiles.
- **Feature-orange** (`{colors.feature-orange}` — #ffa680): frequency 3. bg (3). Wired as --developer-orange-light / --consumer-orange-light. Salmon-orange for the consumer earn/perps tiles.
- **Feature-orange-dark** (`{colors.feature-orange-dark}` — #661800): frequency 6. text (3), border (3). Wired as --consumer-orange-dark / --developer-orange-dark. Deep burnt-orange for text on the light orange tiles.
- **Consumer-purple** (`{colors.consumer-purple}` — #d075ff): frequency 3. bg (3). Wired as --institution-purple / --consumer-purple / --developer-purple. Mid-purple for the purple feature tile in the below-fold grid.

## Typography

### Font Families

The system runs three proprietary MetaMask typefaces: **MMPolyVariable** (wired as `--font-mm-poly-variable`) for ultra-heavy display headlines, **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. A fourth family, **MMSansVariable** (wired as `--font-mm-sans-variable`), handles section h2 and h3 labels.

### Hierarchy

| Token | Size | Weight | Line Height | Letter-Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 160px | 400 | 160px | -0.96px | Hero h1 — MMPolyVariable |
| `{typography.display-lg}` | 128px | 400 | 128px | -0.76px | Alternate display scale — MMPolyVariable |
| `{typography.display-sm}` | 32px | 400 | 40px | 0 | Section pull-quote — MMPolyVariable |
| `{typography.heading-lg}` | 24px | 400 | 24px | 0 | Section h2 — MMSansVariable |
| `{typography.heading-sm}` | 16px | 500 | 16px | 0 | Section h3 — MMSansVariable |
| `{typography.body-md}` | 16px | 500 | 19.84px | 0 | UI chrome spans — MMEuclidCircularB |
| `{typography.body-sm}` | 15px | 500 | 18px | 0 | Body paragraphs — MMEuclidCircularB |
| `{typography.body-xs}` | 14px | 500 | 14px | 0 | Nav and compact text — MMEuclidCircularB |
| `{typography.label-caps}` | 14px | 700 | 14px | 0 | Uppercase h3 labels — MMEuclidCircularB |
| `{typography.caption}` | 12px | 400 | 18px | 0 | Metadata and footnotes — MMEuclidCircularB |
| `{typography.button-md}` | 16px | 700 | 16px | 0 | CTA button — MMEuclidCircularB |

### Principles

MMPolyVariable at 160px / weight 400 occupies the entire viewport width for 3 short words. This is not a heading — it is typographic architecture. The weight 400 designation is slightly misleading: MMPolyVariable at 160px reads as ultra-heavy because the variable font at that scale activates its maximum optical size behavior. MMEuclidCircularB handles all functional text at 12-16px, always at weight 400-700. The system avoids any in-between weight tier: it is either the heavy display variable or the functional circular grotesk, with nothing in between.

### Note on Font Substitutes

All three MetaMask typefaces are proprietary. For MMPolyVariable at 160px: **Bebas Neue** (free, condensed, heavy) captures the vertical stacked letters; **Anybody** (Google Fonts variable) captures the width-axis variability. For MMEuclidCircularB: **DM Sans** or **Nunito** have comparable round terminals. For MMSansMono: **JetBrains Mono** or **IBM Plex Mono** are close matches.

## Layout

### Spacing System

- **Base unit:** 6px (dominant extracted value with 96 occurrences at 0px 6px).
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.md}` 6px · `{spacing.base}` 8px · `{spacing.lg}` 10px · `{spacing.xl}` 16px · `{spacing.2xl}` 24px · `{spacing.3xl}` 25px.
- **Card internal padding:** 0px 6px for the 70px-rounded feature tiles; the tile's curvature provides visual padding without explicit padding values.
- **CTA button padding:** 16px top / 24px sides / 15px bottom — 1px bottom asymmetry is a MetaMask-specific optical correction for the heavy button label.
- **Nav height:** 98px (wired as --header-desktop: 9.8rem) — significantly taller than the typical 64px SaaS nav.

### Grid & Container

- **Max content width:** 1920px (wired as --site-container-max-width) — unusual; most brands cap at 1280-1440px. The hero text fills the container, so the 1920px limit means the 160px headline can breathe at 4K.
- **Hero:** full-bleed blush canvas, 160px headline at the top of the viewport, fox-shape decorations in the lower-hero zone.
- **Feature tiles:** a 2x2 grid of 70px-radius feature cards, each filled with a domain color (indigo, teal, chartreuse, salmon-orange), positioned below a white canvas section.

### Rhythm

The page alternates: blush hero → white nav-bar section → blush feature grid → white body sections → near-black footer. Unlike Fellow's hard cut, MetaMask's transitions feel continuous because the blush and white tones are both warm neutrals. The domain-color feature tiles are the only chromatic interruption.

## Elevation

The system uses minimal shadows. The primary shadow moment is on the CTA button pill (the near-black "GET METAMASK" button uses a shadow loosely from the Leva debug panel variables — not genuine brand shadow). Feature tiles achieve depth through saturated background fill against the blush canvas, not through shadow.

- **No drop shadow:** all major brand surfaces are flat.
- **Tonal distinction:** domain-color tiles on blush or white canvas get distinction from color alone.
- **Hairline:** `{colors.hairline}` (#c8ceda, wired as --general-gray) used on input borders and subtle dividers.

## Shapes

The radius scale is divided into two regimes:

- **Utility:** `{rounded.sm}` 4px · `{rounded.md}` 8px · `{rounded.lg}` 12px — for inputs, small chips, and minor surfaces.
- **Feature tiles:** `{rounded.card}` 70px (96 occurrences) — the dominant radius; at 200-300px tile dimensions it produces a superellipse shape distinct from any common radius value.
- **Pills:** `{rounded.pill}` 100px · `{rounded.full}` 9999px — for the CTA buttons and fully circular icon chips.

The 70px card radius is the system's signature shape. No peer crypto brand uses a radius this high on feature cards — it lands between a standard rounded rectangle and a true pill, producing a shape that reads as designed rather than defaulted.

## Components

**`button-primary`** — Near-black `{colors.ink}` fill, white text at `{typography.button-md}` (16px / 700), `{rounded.pill}` 100px radius, 16x24x15 padding (optical correction), 48px height. "GET METAMASK" is the canonical label. The button renders in near-black rather than the plum-purple brand tone.

**`button-secondary`** — Transparent fill, ink text, ink hairline border, `{rounded.pill}` radius. Used for secondary nav items ("MetaMask Card," "MetaMask USD").

**`top-nav`** — Blush canvas background, near-black text, 0x24 padding, 98px height. The MetaMask wordmark and product navigation ("Features," "Developer," "MetaMask Card," "MetaMask USD") sit flush in the tall nav bar.

**`nav-link`** — Transparent, ink black text at `{typography.body-xs}` (14px / 500), 6px vertical padding. The nav-link height matches the tall 98px nav by having generous vertical whitespace above and below.

**`hero-heading`** — Plum-purple `{colors.ink-plum}` text, `{typography.display-xl}` (160px / 400 / -0.96px), zero padding. The headline fills the viewport width edge-to-edge.

**`section-heading`** — Near-black ink text at `{typography.heading-lg}` (24px MMSansVariable / 400) for white-canvas section headings.

**`body-paragraph`** — Near-black text at `{typography.body-md}` (16px / 500) for the feature descriptions.

**`card`** — White canvas fill, near-black text, `{rounded.card}` 70px radius, 0x6 padding. The base content card in the feature grid.

**`feature-card-indigo`** — Deep indigo `{colors.feature-indigo}` fill, white text, 70px radius. Consumer blue domain tile ("Buy & swap tokens / Trade perps").

**`feature-card-chartreuse`** — Chartreuse `{colors.feature-chartreuse}` fill, ink black text, 70px radius. Developer green domain tile ("All your networks / All your assets").

**`feature-card-teal`** — Deep teal `{colors.feature-teal}` fill, white text, 70px radius. Institution/configure domain tile ("Configure anything, down to every transaction detail").

**`feature-card-orange`** — Salmon-orange `{colors.feature-orange}` fill, ink dark text, 70px radius. Earn/perps domain tile.

**`text-input`** — White canvas fill, ink text, `{rounded.md}` 8px radius, 8x12 padding, 36px height, hairline border.

**`footer`** — Near-black ink fill, white text at `{typography.caption}` (12px / 400), 25x16 padding.

## Do's and Don'ts

**Do** reserve `{colors.ink-plum}` (#3d065f) for display-scale text only. At 160px it reads as art; at 16px body size it reads as an oddly purple paragraph. The system's plum appearances are all at heading and border scale.

**Do** use the 70px card radius exclusively for feature tiles at 200-300px dimensions. The superellipse requires enough tile area to be perceptible — at 100px tile dimensions the 70px radius would over-consume the corners and reduce legible surface area.

**Do** treat the domain colors as context signals, not decorations. Each domain color (indigo / chartreuse / teal / salmon-orange) maps to a specific product audience. Mixing domain colors within a single component or section contradicts the architecture the token naming exposes.

**Do** keep the blush canvas (`{colors.canvas-blush}` — #fff1eb) as the hero floor and the pure white (`{colors.canvas}` — #ffffff) for content-section surfaces. The warm-to-neutral transition from hero to body is subtle but load-bearing for the page's visual hierarchy.

**Don't** replace MMPolyVariable with a standard weight-700 condensed sans at the hero scale. The variable font's optical behavior at 160px is not replicable with a static weight; a substitute needs to be a variable font with a width axis, or an explicitly ultra-heavy typeface like Bebas Neue.

**Don't** use the domain feature colors (`{colors.feature-chartreuse}`, `{colors.feature-indigo}`) as CTA button fills — they are domain identifiers, not action colors. The CTA button is near-black `{colors.ink}` specifically to stand apart from the domain color system.

**Don't** apply the `{rounded.card}` 70px radius to elements narrower than 150px — at narrow widths the radius produces a pill shape that eliminates usable flat surface area and reads as a badge rather than a card.

**Don't** reduce the hero headline size below 100px on tablet breakpoints without switching the typographic role from display to heading. At 80-100px the MMPolyVariable letters begin to crowd at two-word line wraps on 768px viewports; the responsive type scale must drop to MMSansVariable territory rather than shrinking the MMPolyVariable.

## Known Gaps

- **Fox mascot illustration:** the triangular fox-colored shapes flanking the hero are stylized abstractions of the MetaMask fox, but the exact SVG paths, colors, and positioning are not captured in the extracted design values.
- **Hover and focus states:** only resting states are captured. The plum-purple hover behavior on the nav links and domain tile click states are not represented.
- **Mobile breakpoints:** the 160px headline requires aggressive responsive type scaling; the mobile-specific type scale (wired as --header-mobile: 8.3rem) is noted but the full mobile token override set is not captured.
- **Wallet UI tokens:** the MetaMask browser extension and mobile app carry a separate, more granular token system for transaction flows, asset lists, network selectors, and confirmation dialogs — not represented in the marketing-site extraction.
- **Animation:** the hero features a 3D fox animation that is the brand's most recognizable motion moment; the static spec captures only the end-state plum text and blush background values.
- **Dark mode:** MetaMask's extension UI has a dark mode; the marketing site does not expose one in the captured surface.
- **Third-party cookie consent UI:** the Osano consent widget (which uses its own color system) accounts for a large number of the CSS variables in the extraction — these are not MetaMask brand tokens and should be disregarded in any implementation.