# MetaMask

> Generated by BrandSweets from the metamask-io BrandDoc (v3, schema 1). Do not edit by hand.

## Identity

**Tagline:** Buy, sell, swap, earn, and spend BTC, ETH, SOL and more — all in one self-custody crypto wallet. Total control over your assets, trusted by millions of users.

**Sector:** crypto

**Domain:** metamask.io


Buy, sell, swap, earn, and spend BTC, ETH, SOL and more — all in one self-custody crypto wallet. Total control over your assets, trusted by millions of users.

## Colors

| Role | Name | Hex | Dark | Usage |
| --- | --- | --- | --- | --- |
| `primary` | Black | `#0a0a0a` | — | Primary brand color: CTAs, links, active states. |
| `secondary` | Deep Purple | `#3d065f` | — | Secondary brand color. |
| `accent` | Pale Green | `#e5ffc3` | — | Accent: highlights and secondary emphasis. |
| `surface` | White | `#ffffff` | — | Page and card background. |
| `text` | Black | `#0a0a0a` | — | Body text on surface. |

### Scales

- **primary:** 50 `#f5f5f5`, 100 `#e6e6e6`, 200 `#d1d1d1`, 300 `#b5b5b5`, 400 `#9c9c9c`, 500 `#858585`, 600 `#707070`, 700 `#5c5c5c`, 800 `#474747`, 900 `#333333`, 950 `#0a0a0a`
- **secondary:** 50 `#f6f0fa`, 100 `#e8d9f2`, 200 `#dba9f9`, 300 `#c474f6`, 400 `#b044f3`, 500 `#9e19f0`, 600 `#870dd3`, 700 `#6f0bad`, 800 `#560986`, 900 `#3d065f`, 950 `#27083a`
- **accent:** 50 `#f6faef`, 100 `#e5ffc3`, 200 `#d7ffa3`, 300 `#bfff6b`, 400 `#a9ff38`, 500 `#95ff0a`, 600 `#7fe000`, 700 `#68b800`, 800 `#518f00`, 900 `#395e08`, 950 `#253d05`
- **surface:** 50 `#ffffff`, 100 `#e6e6e6`, 200 `#d1d1d1`, 300 `#b5b5b5`, 400 `#9c9c9c`, 500 `#858585`, 600 `#707070`, 700 `#5c5c5c`, 800 `#474747`, 900 `#333333`, 950 `#212121`
- **text:** 50 `#f5f5f5`, 100 `#e6e6e6`, 200 `#d1d1d1`, 300 `#b5b5b5`, 400 `#9c9c9c`, 500 `#858585`, 600 `#707070`, 700 `#5c5c5c`, 800 `#474747`, 900 `#333333`, 950 `#0a0a0a`

## Typography

### Families

#### MMEuclidCircularB `mmeuclidcircularb`
- **Source:** custom
- **Weights:** 400 Regular, 700 Bold
- **Fallback stack:** `MMEuclidCircularB, "MMEuclidCircularB Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif`
- **Licensing:** Auto-detected web font; provenance unconfirmed. Reference only — never rehost without a license.

#### MMSansVariable `mmsansvariable`
- **Source:** custom
- **Weights:** 400 Regular, 600 Semibold, 700 Bold
- **Fallback stack:** `MMSansVariable, "MMSansVariable Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif`
- **Licensing:** Auto-detected web font; provenance unconfirmed. Reference only — never rehost without a license.

### Role assignments

- **heading:** MMSansVariable (`mmsansvariable`)
- **body:** MMEuclidCircularB (`mmeuclidcircularb`)

### Scale

| Step | Size (rem) | Line height | Tracking (em) |
| --- | --- | --- | --- |
| sm | 0.875 | 1.5 | — |
| base | 1 | 1.6 | — |
| lg | 1.25 | 1.4 | — |
| xl | 1.75 | 1.25 | — |
| 2xl | 2.25 | 1.15 | — |
| display | 3.5 | 1.05 | -0.02 |

## Gradients

Derived from the colour roles (perceptual interpolation; same tokens in brand.css / tokens.json):

- **--brand-gradient:** `linear-gradient(135deg in oklab, #0a0a0a 0%, #3d065f 100%)` — worst-case contrast white 15.11:1 AA, black 1.06:1
- **--brand-gradient-hero:** `linear-gradient(135deg in oklab, #0a0a0a 0%, #31243e 100%)` — ink #ffffff; worst-case contrast white 14.46:1 AA, black 1.06:1
- **--brand-gradient-button:** `linear-gradient(180deg in oklch shorter hue, #131313 0%, #040404 100%)` — ink #ffffff; hover `linear-gradient(180deg in oklch shorter hue, #191919 0%, #080808 100%)`; active `linear-gradient(180deg in oklch shorter hue, #0c0c0c 0%, #010101 100%)`

## Logos

### primary
- **Formats:**
  - `svg` (127×63): https://iihdrqhzaupyssngtrja.supabase.co/storage/v1/object/public/brand-assets/workspaces/9fa09c23-9560-4b2e-87b6-eae0d28b47fe/brands/45870da0-8a70-442b-9696-a31ce59e10c7/logos/primary-40f0fa058a00437f.svg
- **Clearspace:** 1× logo-height — Default clearspace of one logo-height on all sides (auto-seeded; refine after review).
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** any
- **Notes:** Re-sourced 2026-09-02 from the brand's own site (inline-svg). Hosted by us. Selection: source=home-link-svg (100); vector SVG (+16); aspect 2.02 — lockup shape (+7)

### mono
- **Formats:**
  - `svg`: https://iihdrqhzaupyssngtrja.supabase.co/storage/v1/object/public/brand-assets/workspaces/9fa09c23-9560-4b2e-87b6-eae0d28b47fe/brands/45870da0-8a70-442b-9696-a31ce59e10c7/logos/mono-a5d9c9d64eab45c2.svg
- **Clearspace:** 1× logo-height — Default clearspace of one logo-height on all sides (auto-seeded; refine after review).
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** light, muted
- **Disallowed backgrounds:** dark
- **Notes:** Derived from the primary logo (flattened to #000000). Auto-generated — review before use.

### inverse
- **Formats:**
  - `svg`: https://iihdrqhzaupyssngtrja.supabase.co/storage/v1/object/public/brand-assets/workspaces/9fa09c23-9560-4b2e-87b6-eae0d28b47fe/brands/45870da0-8a70-442b-9696-a31ce59e10c7/logos/inverse-f9b6e38752beb74f.svg
- **Clearspace:** 1× logo-height — Default clearspace of one logo-height on all sides (auto-seeded; refine after review).
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** dark
- **Disallowed backgrounds:** light
- **Notes:** Derived from the primary logo (flattened to #ffffff). Auto-generated — review before use.

## Boards

- **Cover** — `cover` (`board-cover`)
- **Color System** — `color-system` (`board-colors`)
- **Type Specimen** — `type-specimen` (`board-type`)
- **Logo Suite** — `logo-suite` (`board-logos`)

## Resources

- Tokens (JSON): /b/metamask-io/tokens.json
- Tokens (CSS): /b/metamask-io/brand.css
- This document: /b/metamask-io/brand.md
- MCP endpoint (public read): mcp.brandsweets.com/metamask-io/mcp
- Agent integration guide: /agents.md