---
title: "MetaMask design system"
variant: extended
source: https://metamask.io/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/metamask-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# MetaMask · Design System

> Oversized type, vivid color, and crypto in motion

**Theme:** light · **Industry:** crypto · **Source:** https://metamask.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

MetaMask pairs a deep teal opening hero with oversized display lettering and vivid, contrasting section colors. Playful coin and wallet illustrations balance the high-impact typography, while pill-shaped actions keep the interface approachable.

## North star

Use bold, oversized display type over expansive, sharply contrasting color fields, and keep actions simple and pill-shaped.

## Overview

The page opens with a full-bleed deep teal hero, setting pale blue, tightly stacked display lettering against a quiet dark canvas. The headline is the focal point; a compact white pill CTA sits directly beneath it, while a minimal logo and dark pill navigation stay near the edges. Below, the long page uses strong color-block transitions rather than a uniform background: saturated purple supports floating coin artwork, then warm peach frames wallet and security content, with pale blue, lime, lavender, and dark teal appearing in cards. Typography combines the expressive, heavy-feeling MetaMask display face with a clean sans-serif for supporting copy and navigation. Content shifts between centered statements, product imagery, and compact card grids. The visual system favors broad open fields and clear separation between sections, then concentrates detail inside rounded cards. Illustrations and 3D-style assets add energy without replacing the headline-led hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, light section backgrounds, white pill CTA, and pale contrast details. |
| Wallet Indigo | `#190066` | `--color-wallet-indigo` | brand | Deep purple section band and key text or links on light surfaces. |
| Peach Signal | `#ffa680` | `--color-peach-signal` | surface | Warm peach feature-section backgrounds behind security and wallet content. |
| Cloud Blue | `#cce7ff` | `--color-cloud-blue` | surface | Pale blue cards and headline lettering against the dark hero. |
| Citrus Glow | `#e5ffc3` | `--color-citrus-glow` | accent | Lime highlight text and accents on dark cards and colored artwork. |
| Deep Teal | `#013330` | `--color-deep-teal` | brand | Opening hero canvas and dark teal proof card backgrounds. |
| Graphite Line | `#343434` | `--color-graphite-line` | neutral | Measured card border color; use for restrained outlines rather than prominent dividers. |
| Aubergine | `#3d065f` | `--color-aubergine` | accent | Occasional dark purple link or promotional card treatment. |
| Burnt Umber | `#661800` | `--color-burnt-umber` | accent | Warm dark accent text, also echoed in illustrated artwork. |
| Orchid Mist | `#eac2ff` | `--color-orchid-mist` | accent | Lavender accent on cards, links, and supporting headings. |
| True Black | `#000000` | `--color-true-black` | neutral | Dark full-width section surface in supporting page content. |
| Soft Black | `#0a0a0a` | `--color-soft-black` | semantic | Dark navigation and CTA pill surfaces, with matching dark interface text. |
| Night Slate | `#121416` | `--color-night-slate` | surface | Occasional dark card surface, distinct from the primary teal hero. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ffa680` (Peach Signal) · `--color-surface-2` → `#cce7ff` (Cloud Blue) · `--color-surface-3` → `#013330` (Deep Teal) · `--color-surface-4` → `#000000` (True Black) · `--color-text` → `#190066` (Wallet Indigo) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#013330` (Deep Teal) · `--color-border` → `#343434` (Graphite Line) · `--color-accent` → `#ffa680` (Peach Signal) · `--color-accent-2` → `#661800` (Burnt Umber) · `--color-accent-3` → `#eac2ff` (Orchid Mist)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#190066` | `#ffffff` | 17.03:1 | AAA |
| `#190066` | `#ffa680` | 8.93:1 | AAA |
| `#190066` | `#cce7ff` | 13.33:1 | AAA |
| `#190066` | `#013330` | 1.23:1 | fail |
| `#ffffff` | `#ffa680` | 1.91:1 | fail |
| `#ffffff` | `#cce7ff` | 1.28:1 | fail |
| `#ffffff` | `#013330` | 13.84:1 | AAA |
| `#013330` | `#ffffff` | 13.84:1 | AAA |
| `#013330` | `#ffa680` | 7.26:1 | AAA |
| `#013330` | `#cce7ff` | 10.83:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MMSansVariable | `--font-body` | webfont | 400 | Primary supporting copy and body text | Inter |
| MMEuclidCircularB | `--font-mmeuclidcircularb` | webfont | 500, 400 | Navigation, captions, and compact interface labels | DM Sans |
| MMPolyVariable | `--font-display` | webfont | 400 | Display headline and major hero statements | Bowlby One SC |

- **MMSansVariable:** Clean sans-serif body face; measured regular weight. Keep copy unembellished and readable.
- **MMEuclidCircularB:** Measured regular and medium weights. Use for concise controls and short labels; navigation appears compact.
- **MMPolyVariable:** Distinctive display face with oversized, tightly stacked uppercase hero lettering; measured regular weight.

### Type scale — Custom (ratio ≈ 2.236, base 24px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 1 | 0 | — | MMPolyVariable | Large decorative display statements and hero-scale typography. |
| h1 | 104px | 400 | 1 | 0 | — | MMPolyVariable | Primary hero headline, set as stacked display lettering. |
| body | 24px | 400 | 1 | 0 | — | MMSansVariable | Supporting page copy and feature descriptions. |
| caption | 14px | 500 | 1 | 0 | — | MMEuclidCircularB | Compact card labels, utility copy, and short annotations. |
| nav | 14px | 500 | 1 | 0 | — | MMEuclidCircularB | Header navigation and concise navigation actions. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 9, 10, 11, 12, 15, 16, 17, 20, 22, 24, 32, 40 px.
- Section rhythm — · element gap 16px · card padding 24px · max content width —.

The page alternates expansive full-bleed color bands with denser content sections. The hero centers its oversized headline and CTA, while the compact logo and navigation align to opposite edges. Later sections mix centered feature statements, two-column security content, and grouped proof cards. The measured page uses a comfortable density, a 16px element gap, and 24px card padding. Favor generous open canvas around key messages, then tighten spacing inside cards. No fixed maximum content width is established by the measurements.

## Shape & elevation

- Radius: button `9999px` · card `16px` · nav `9999px` · link `40px` · xs `1px` · sm `4px` · md `12px` · lg `16px` · xl `32px` · 2xl `36px` · pill `9999px`
- Shadow `hairline` (other): `rgb(255, 255, 255) 0px 0px 0px 4px`
- Motion: standard transition `0.95s` on interactive elements.

The design is mostly flat: large color fields establish hierarchy instead of shadows. Cards use measured 16px corner radii and restrained outlines; buttons and navigation use pill silhouettes. Layered illustrations create visual depth, but avoid adding generic drop shadows or heavy border treatments.

## Imagery

Use expressive crypto illustrations and polished 3D-style assets rather than relying on conventional photography. The opening hero features large cropped wallet artwork entering from below; a purple band uses floating coin imagery. The peach feature area pairs a device outline with small, colorful security and app cards. Keep imagery prominent but subordinate to headline hierarchy.

## Components

### Header navigation

A minimal logo at the upper left balances a dark rounded Get MetaMask action and circular menu control at the upper right.

### Hero statement

Centered, stacked uppercase display typography in pale blue sits on a deep teal full-bleed canvas, with a white pill CTA below.

### Floating coin artwork

A purple section uses scattered illustrated crypto coins as decorative foreground elements against an uninterrupted saturated background.

### Feature cards

Security and support messages appear in compact rounded cards using contrasting indigo, lavender, pale blue, and lime treatments.

### Trust proof cards

App rating, download, security, and transaction claims are presented as colorful cards with short, prominent text.

### Announcement toast

A small white update pill sits close to the lower-left viewport edge, pairing a short label with brief promotional copy.

### Measured component styles

- **Primary button** (“GET METAMASK GET METAMASK”): background #0a0a0a · text #0a0a0a · radius 100px · padding 0px · 400 24px MMEuclidCircularB
- **Secondary button** (“GET METAMASK GET METAMASK”): background #ffffff · text #e5ffc3 · radius 100px · padding 0px · 400 24px MMEuclidCircularB
- **Link** (“Swap thousands of tokens on every popula”): background #89b0ff · text #e5ffc3 · radius 40px · padding 0px · 400 24px MMEuclidCircularB
- **Card** (“4.7★ rating on the App Store”): background #013330 · text #e5ffc3 · radius 16px · padding 24px · 400 24px MMEuclidCircularB
- **Navigation item** (“GET METAMASK GET METAMASK Trade Money De”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 24px MMEuclidCircularB

## Do

- Build the hero around a single oversized, stacked headline.
- Use Deep Teal (#013330) and Cloud Blue (#cce7ff) for the opening visual contrast.
- Separate major content areas with bold, full-bleed color bands.
- Keep primary actions short and pill-shaped.
- Use colorful illustrations to support, not obscure, the message.
- Group proof points into rounded, high-contrast cards.

## Don't

- Don't flatten the page into one continuous white background.
- Don't replace the display headline with generic small headings.
- Don't add gradients that aren't present in the measured design.
- Don't use heavy shadows to create hierarchy.
- Don't crowd the hero with extra navigation or body copy.
- Don't treat illustration-only colors as the core brand palette.

## Agent prompt

Create a new MetaMask-style page with a high-impact, full-bleed hero and clear color-blocked sections. Use Deep Teal (#013330) as the primary dark canvas, Cloud Blue (#cce7ff) for oversized display lettering, and Gallery White (#ffffff) for a simple pill CTA. Bring in Wallet Indigo (#190066), Peach Signal (#ffa680), Citrus Glow (#e5ffc3), and Orchid Mist (#eac2ff) selectively for section bands and cards. Use an expressive display face for large, stacked headlines, with clean sans-serif body copy and compact navigation labels. Keep the header minimal, sections spacious, and content centered or arranged in clean feature grids. Use colorful crypto-inspired illustrations as supporting focal points. Favor flat surfaces, rounded cards, and pill controls; avoid gradients, heavy shadows, and generic corporate layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed deep teal canvas with centered stacked headline and CTA; compact header controls at opposite corners. | primary download action, compact menu | oversized display type, dark hero canvas, pill buttons, cropped illustration |
| 2 | other | Full-width indigo band with scattered floating coin illustrations. | brand storytelling | saturated purple field, floating coin art |
| 3 | feature-split | Peach feature section with centered content, device imagery, and supporting cards arranged in columns. | security reassurance, feature discovery | peach section band, device mockup, contrasting feature cards |
| 4 | feature-grid | Two-column content arrangement within the peach band, combining a central message with supporting feature cards. | security proof points, feature highlights | rounded colorful cards, icon and illustration support, links and CTA |
| 5 | stats | Compact trust-card group on white, with colored cards for ratings, downloads, rankings, and transactions. | social proof, trust signals | colorful statistic cards, short prominent claims, rounded corners |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(24,13,67,0);
--osano-button-border-color: #2c56dd;
--osano-button-background-color: #ffffff;
--osano-button-foreground-color: #2c56dd;
--osano-dialog-background-color: #4362d1;
--osano-dialog-foreground-color: #FFFFFF;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #b0b0b0;
--osano-toggle-off-track-color: #7A3FF1;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #FFFFFF;
--osano-button-accept-background-color: #ffffff;
--osano-button-accept-border-color: #2c56dd;
--osano-button-accept-foreground-color: #2c56dd;
--osano-button-deny-background-color: #ffffff;
--osano-button-deny-border-color: #2c56dd;
--osano-button-deny-foreground-color: #2c56dd;
--osano-button-reject-all-background-color: #ffffff;
--osano-button-reject-all-background-color-hover: #ebebeb;
--osano-button-reject-all-border-color: #2c56dd;
--osano-button-reject-all-foreground-color: #2c56dd;
--osano-button-manage-background-color: #ffffff;
--osano-button-manage-border-color: #2c56dd;
--osano-button-manage-foreground-color: #2c56dd;
--osano-info-dialog-link-color: #b0b0b0;
--osano-info-dialog-button-close-color: #ffffff;
--osano-info-dialog-toggle-off-track-color: #7A3FF1;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #ffffff;
--osano-info-dialog-button-border-color: #2c56dd;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/metamask-io