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

# Phantom · Design System

> A soft lavender canvas for colorful crypto

**Theme:** light · **Industry:** crypto · **Source:** https://phantom.com/ · **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._

Phantom pairs a pale lavender page canvas with rounded navigation and bold, dark-violet typography. Large video-led panels and vivid illustrated cards make crypto features approachable without sacrificing generous whitespace.

## North star

Keep the lavender canvas and restrained, rounded typography calm while letting product-led video and illustrations provide the visual energy.

## Overview

The page is anchored by a pale lavender canvas (#f5f2ff) that continues across the long page, letting sections feel connected rather than divided into strong bands. Deep violet (#3c315b) carries most headings, navigation, and links, while near-white surfaces and dark panels provide contrast. The Phantom typeface is rounded and clean; large, centered hero text uses regular weight and tight tracking, with smaller labels and body copy remaining understated. A capsule navigation bar and pill-shaped download actions reinforce the friendly, approachable tone. The hero is a wide, rounded video panel; below it, feature sections use horizontally arranged cards with colorful product illustrations and interface imagery. Spacious gaps separate content, while individual cards supply richer color, including lavender, blue, pale yellow, and pink. Most of the page stays visually flat: subtle shadows are reserved for select cards, and strong borders are absent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Lavender Haze | `#f5f2ff` | `--color-lavender-haze` | brand | Continuous page canvas behind navigation, hero, feature sections, CTA, and footer. |
| Phantom Violet | `#3c315b` | `--color-phantom-violet` | brand | Primary headings, navigation, links, and text on lavender or accent buttons. |
| Warm Porcelain | `#fffdf8` | `--color-warm-porcelain` | surface | Light card and button surfaces; also appears as text on dark feature panels. |
| Soft Black | `#1c1c1c` | `--color-soft-black` | neutral | Dark feature-panel surfaces and contrasting text or links. |
| Lilac Signal | `#ab9ff2` | `--color-lilac-signal` | accent | Primary Download button fill, paired with Phantom Violet text. |
| Cloud Gray | `#e9e8ea` | `--color-cloud-gray` | surface | Pale feature-card background, including prediction-market content. |
| Electric Blue | `#4a87f2` | `--color-electric-blue` | accent | Small link accent; also present in colorful product illustrations. |
| Lemon Tint | `#ffffc4` | `--color-lemon-tint` | semantic | Secondary link color and illustration detail, not a defining page surface. |
| Blush Tint | `#ffdadc` | `--color-blush-tint` | semantic | Secondary link color and illustration detail, not a defining page surface. |
| Footer Mist | `#f4f2f4` | `--color-footer-mist` | surface | Small footer and button surface detail. |
| Muted Graphite | `#86848d` | `--color-muted-graphite` | neutral | Low-emphasis footer text. |

### Semantic aliases

`--color-canvas` → `#f5f2ff` (Lavender Haze) · `--color-surface` → `#fffdf8` (Warm Porcelain) · `--color-surface-2` → `#1c1c1c` (Soft Black) · `--color-surface-3` → `#3c315b` (Phantom Violet) · `--color-surface-4` → `#e9e8ea` (Cloud Gray) · `--color-text` → `#1c1c1c` (Soft Black) · `--color-text-muted` → `#3c315b` (Phantom Violet) · `--color-text-subtle` → `#fffdf8` (Warm Porcelain) · `--color-accent` → `#3c315b` (Phantom Violet) · `--color-accent-2` → `#ab9ff2` (Lilac Signal) · `--color-accent-3` → `#4a87f2` (Electric Blue) · `--color-on-accent` → `#3c315b` (Phantom Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1c1c` | `#f5f2ff` | 15.44:1 | AAA |
| `#1c1c1c` | `#fffdf8` | 16.76:1 | AAA |
| `#1c1c1c` | `#3c315b` | 1.45:1 | fail |
| `#3c315b` | `#f5f2ff` | 10.67:1 | AAA |
| `#3c315b` | `#fffdf8` | 11.59:1 | AAA |
| `#3c315b` | `#1c1c1c` | 1.45:1 | fail |
| `#fffdf8` | `#f5f2ff` | 1.09:1 | fail |
| `#fffdf8` | `#1c1c1c` | 16.76:1 | AAA |
| `#fffdf8` | `#3c315b` | 11.59:1 | AAA |
| `#3c315b` | `#f5f2ff` | 10.67:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Phantom | `--font-body` | webfont | 400, 350 | Site-wide display, headings, body copy, navigation, captions, and controls. | Nunito Sans |

- **Phantom:** Regular display and heading weight with tight tracking; lighter body weight, sentence case, and no uppercase-led styling.

### Type scale — Perfect Fifth (ratio ≈ 1.48, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1.1 | -0.025em | — | Phantom | Large centered hero headline. |
| h1 | 80px | 400 | 1.1 | -0.025em | — | Phantom | Primary hero or major page headline. |
| h2 | 30px | 400 | 1.2 | 0 | — | Phantom | Section headings, including feature group titles. |
| h3 | 24px | 400 | 1.35 | -0.025em | — | Phantom | Feature-card and supporting content headings. |
| body | 20px | 350 | 1.4 | 0 | — | Phantom | Introductory and explanatory product copy. |
| caption | 15px | 400 | 1.21 | 0 | — | Phantom | Small supporting labels and legal or card copy. |
| nav | 16px | 400 | 1.25 | 0 | — | Phantom | Top-level navigation and menu labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 48, 96, 128 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1344px.

A broad, centered page uses a measured maximum content width of 1344px, with the desktop navigation and hero held within generous side margins. The hero headline and CTA are centered; feature content shifts to left-aligned headings and horizontal card rows. Feature groups repeat a spacious vertical rhythm, with substantial open canvas between showcase bands. Cards use multi-column arrangements, while the final footer becomes a denser four-column information area. Overall density is comfortable, not compact.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · link `24px` · xs `24px` · pill `9999px`
- Shadow `sm` (link): `rgb(226, 223, 254) 0px 0px 4px 0px`
- Motion: standard transition `0.4s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

Most sections sit flat on the continuous canvas, with no prominent borders or heavy drop shadows. Rounded surfaces and contrast between light and dark cards establish hierarchy. Select feature links use only a faint lavender-tinted shadow; the hero video is defined mainly by its rounded edge and distinct imagery.

## Imagery

The hero uses full-bleed video inside a rounded frame, with changing, high-contrast abstract crypto visuals behind centered copy. Feature showcases rely on bright, playful product illustrations, wallet interface mockups, and 3D-like tokens rather than photography. Cards crop media to their own rounded bounds; colors inside artwork can be far more saturated than the restrained page palette.

## Components

### Capsule navigation

A centered, rounded white navigation surface with Phantom Violet labels, flanked by the brand mark and search and Download controls.

### Download button

Pill-shaped primary action with Lilac Signal fill and Phantom Violet text; repeat it where the page asks visitors to get the wallet.

### Video hero

Wide rounded video panel with centered eyebrow, large white headline, and a contrasting Download Phantom action.

### Feature card

Rounded, media-led card combining short explanatory copy and product imagery; backgrounds vary between dark, pale gray, and brighter illustration colors.

### See more action

Compact pale-lavender pill with Phantom Violet text, used to move from a category intro into more feature content.

### Newsletter footer

Light, rounded footer area with a prominent email field, sign-up action, and compact multi-column link lists.

### Measured component styles

- **Primary button** (“Download”): background #ab9ff2 · text #3c315b · radius 32px · padding 16px 32px · 400 16px Phantom
- **Secondary button** (“See more”): background #e2dffe · text #3c315b · radius 32px · padding 12px 20px · 400 16px Phantom
- **Link** (“Find trending tokens, top traders, and a”): background #1c1c1c · text #fffdf8 · radius 24px · padding 48px 48px 0px 48px · 400 16px Phantom · shadow rgb(226, 223, 254) 0px 0px 4px 0px
- **Input**: transparent background · text #3c315b · radius 0px · padding 0px · 400 64px Phantom
- **Navigation item** (“Features Learn Explore Company Developer”): transparent background · text #3c315b · radius 0px · padding 0px · 400 16px Phantom

## Do

- Use Lavender Haze (#f5f2ff) as the continuous page canvas.
- Set headings and navigation in Phantom Violet (#3c315b).
- Use Lilac Signal (#ab9ff2) for the main download action.
- Keep navigation and buttons pill-shaped and friendly.
- Use large, centered hero copy over product-led video.
- Let feature illustrations bring brighter colors into selected cards.

## Don't

- Don't divide every section with a strong color band.
- Don't add heavy borders or prominent shadows.
- Don't crowd the page with dense text or tight spacing.
- Don't use sharp-cornered controls where rounded pills are established.
- Don't treat colors inside product artwork as the core page palette.
- Don't make all feature cards visually identical.

## Agent prompt

Build a new Phantom-style crypto page on a continuous Lavender Haze (#f5f2ff) canvas. Use Phantom Violet (#3c315b) for headings, navigation, and links, with a Phantom-like rounded sans serif and restrained regular weights. Keep the top navigation capsule-shaped and centered, and make the primary download action a Lilac Signal (#ab9ff2) pill with dark violet text. Create a spacious, centered video-led hero, then transition into left-aligned feature groups with rounded cards, concise copy, and colorful wallet UI or playful crypto illustrations. Use Warm Porcelain (#fffdf8), Soft Black (#1c1c1c), and Cloud Gray (#e9e8ea) selectively for card contrast. Maintain large open intervals between groups, minimal borders, and only faint shadows. Keep the footer compact and organized into columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered navigation above a wide, rounded video hero; centered copy and download action. | Top-level navigation, Primary download CTA | Capsule nav, Full-bleed video, Centered headline |
| 2 | gallery | Centered section heading and See more action above a horizontal showcase. | Browse feature examples, See more link | Centered heading, Horizontal card strip |
| 3 | feature-grid | Left-aligned heading with a multi-column set of product-led feature cards. | Explore trading options, Feature links | Multi-column cards, Mixed light and dark panels |
| 4 | gallery | Centered section heading and See more action introducing another card showcase. | Browse money features, See more link | Centered heading, Horizontal card strip |
| 5 | feature-grid | Left-aligned heading followed by three media-led feature columns. | Explore money movement, Feature links | Three-column cards, Product mockups |
| 6 | gallery | Centered security heading and See more action above security feature content. | Discover security features, See more link | Centered heading, Simple section transition |
| 7 | feature-grid | Left-aligned heading with a four-column collection of security cards. | Explain self-custody, Show support and scam detection | Four-column cards, Illustrated security UI |
| 8 | cta | Centered trust statement, large download-focused headline, and download action. | Social proof, Download CTA | Centered typography, Brand mark in headline |
| 9 | other | Narrow centered block of small-print legal copy on the page canvas. | Read disclosures | Small centered text |
| 10 | footer | Rounded light footer with newsletter signup above four columns of links. | Newsletter signup, Browse site links | Email input, Signup button, Multi-column footer |

## Source CSS custom properties (selected)

```css
--tweet-border: 1px solid rgb(207, 217, 222);
--tweet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--tweet-font-color: rgb(15, 20, 25);
--tweet-font-color-secondary: rgb(83, 100, 113);
--tweet-bg-color: #fff;
--tweet-bg-color-hover: rgb(247, 249, 249);
--tweet-quoted-bg-color-hover: rgba(0, 0, 0, .03);
--tweet-color-blue-primary: rgb(29, 155, 240);
--tweet-color-blue-primary-hover: rgb(26, 140, 216);
--tweet-color-blue-secondary: rgb(0, 111, 214);
--tweet-color-blue-secondary-hover: rgba(0, 111, 214, .1);
--tweet-color-red-primary: rgb(249, 24, 128);
--tweet-color-red-primary-hover: rgba(249, 24, 128, .1);
--tweet-color-green-primary: rgb(0, 186, 124);
--tweet-color-green-primary-hover: rgba(0, 186, 124, .1);
--tweet-verified-old-color: rgb(130, 154, 171);
```

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