---
version: alpha
name: "MetaMask"
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."
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:
    fontFamily: "MM Sans"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  body:
    fontFamily: "MM Sans"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "12px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "40px"
---

## Overview

## Overview

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

## Colors

### 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.

## Typography

### 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.**

## Layout

- 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

mobile <479: hero 72→44; nav hamburger; 1-up. tablet: 2-up. desktop+: 3-4-up.

## Elevation & Depth

| 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 |

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| Micro | 4 | tags |
| Standard | 8 | inputs, dropdowns |
| Comfortable | 12 | **cards** |
| Relaxed | 16 | featured cards |
| Pill | 9999 | **buttons + pills** |

## Components

### 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

- 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

- 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"`.

### 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")

**Light + Dark.** MetaMask Extension UI has both modes. Marketing site is light-only.

Dark variant: bg `#1c1c1c`, text white, Foxy Orange unchanged.

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

## 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.**

### 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.**