---
version: alpha
name: Phantom
description: Lavender-soaked crypto wallet where deep aubergine ink sits on cream, the unmistakable Phantom lilac fills every button — never as white-on-color but always lilac-with-aubergine-text — and a soft violet glow makes the whole interface feel like it is floating just above the page.

colors:
  # Surface / canvas
  background: "#fffdf8"        # warm cream canvas
  surface: "#fdfcfe"           # near-white cards
  surface-lilac: "#e2dffe"     # pale lavender panels, hover wash, glow tint
  surface-dark: "#1c1c1c"      # near-black showcase cards

  # Ink / text
  ink: "#3c315b"               # deep aubergine — the dominant text color
  ink-secondary: "#86848d"     # muted gray supporting copy
  on-dark: "#fffdf8"           # cream text on dark cards
  on-accent: "#3c315b"         # aubergine text sitting on the lilac button

  # Brand accent — the singular Phantom lilac
  primary: "#ab9ff2"           # the Phantom purple — buttons, highlights
  primary-soft: "#e2dffe"      # pale lavender tint
  on-primary: "#3c315b"        # button text is aubergine, NOT white

  # Borders
  border: "#e9e8ea"            # hairline dividers, card edges
  border-accent: "#ab9ff2"     # lilac outline on emphasis controls

  # Shadow tints (opaque approximations for the elevation table)
  shadow-lilac: "#e2dffe"      # was rgb(226,223,254) 0 0 4px — the signature violet glow
  shadow-soft: "#999999"       # was rgb(153,153,153) — soft neutral lift

typography:
  display-hero:
    fontFamily: "Phantom Sans, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -2.4px
  display:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.7px
  heading:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: -0.6px
  heading-sub:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 350
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0px
  label-strong:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.16px
  caption:
    fontFamily: "Phantom Sans, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 2px
  md: 12px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.on-primary}"

  button-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 32px
  button-pill-hover:
    backgroundColor: "{colors.surface-lilac}"
    textColor: "{colors.on-accent}"

  button-lavender:
    backgroundColor: "{colors.surface-lilac}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 12px 20px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px

  badge:
    backgroundColor: "{colors.surface-lilac}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Phantom Design System

## Overview

Phantom is a crypto wallet, a category that historically reaches for either gunmetal-gray seriousness or neon-on-black hype. Phantom does neither. Its single most distinctive design move is the **inversion of how its brand color is used**: the unmistakable Phantom lilac (`{colors.primary}`) fills the primary buttons, but the text on those buttons is never white — it is deep aubergine (`{colors.on-primary}`). That one decision, lilac fill with dark-purple type, gives every CTA a soft, confident, almost candy-coated quality that nothing else in the wallet space has. The whole interface is soaked in violet, but it reads warm and friendly rather than techy or cold.

The canvas is a warm cream (`{colors.background}`), not stark white, and it is frequently washed with pale lavender panels (`{colors.surface-lilac}`). Type is set in the custom **Phantom** typeface — a humanist sans that runs at a relaxed regular 400, even at the enormous 96px hero size (`{typography.display-hero}`, -2.4px tracking), with a notably light 350 weight reserved for large body copy. There is no bold-headline machismo here; the display type is big but airy. Aubergine (`{colors.ink}`) does almost all the text work — it is the dominant ink by an order of magnitude — which keeps the palette tight and the personality singular.

The signature texture is the **lavender glow**. Cards and interactive surfaces carry a soft violet halo (`rgb(226,223,254) 0px 0px 4px`, captured as `{colors.shadow-lilac}`) that makes them feel like they are gently floating just above the cream page. Combined with very generous corner rounding — a workhorse 24-32px (`{rounded.lg}`–`{rounded.xl}`) and full-pill download buttons at 96px radius — the result is plush, rounded, and approachable. Phantom also leans into a playful bento grid of bold cards: a near-black showcase card (`{colors.surface-dark}`) for "find trending tokens," a cream prediction-markets card, and one bright accent card, each fully rounded. The brand makes self-custody crypto feel like a friendly consumer app, and the design is the entire argument.

**Key Characteristics:**
- The signature inversion: lilac (`{colors.primary}`) button fills with **aubergine text** (`{colors.on-primary}`), never white-on-color
- Deep aubergine (`{colors.ink}`) as the dominant ink — tight, singular palette
- Warm cream canvas (`{colors.background}`) washed with pale lavender panels (`{colors.surface-lilac}`)
- Custom **Phantom** typeface at a relaxed 400, with a light 350 for large body — airy, never bold
- Enormous but airy hero display (`{typography.display-hero}`, 96px / -2.4px / weight 400)
- The **lavender glow** (`{colors.shadow-lilac}`): a soft violet halo that floats cards above the page
- Very generous rounding: 24-32px (`{rounded.lg}`–`{rounded.xl}`) on cards and buttons, full pills (`{rounded.pill}`) on downloads
- Playful bento grid of bold cards including a near-black showcase card (`{colors.surface-dark}`)
- Lilac never shouts — it is soft and warm, making self-custody crypto feel like a friendly consumer app
- Muted gray (`{colors.ink-secondary}`) for the rare secondary text; the system avoids visual noise

## Colors

### Surface & Canvas
- **Cream** (`{colors.background}`): The warm off-white canvas — the dominant surface, never stark white.
- **Near-White** (`{colors.surface}`): Cards and pill buttons that sit a hair brighter than the canvas.
- **Pale Lavender** (`{colors.surface-lilac}`): Tinted panels, hover washes, and the glow tint — the soft violet wash that defines the mood.
- **Near-Black** (`{colors.surface-dark}`): Bold showcase bento cards (e.g. "find trending tokens").

### Ink / Text
- **Aubergine** (`{colors.ink}`): The dominant text color by a wide margin — headlines, body, and button text alike.
- **Muted Gray** (`{colors.ink-secondary}`): The rare supporting/secondary copy.
- **Cream-on-Dark** (`{colors.on-dark}`): Text on the near-black showcase cards.

### Brand Accent — the Phantom lilac
- **Phantom Lilac** (`{colors.primary}`): The singular brand color — fills primary buttons and highlights. Always paired with aubergine text (`{colors.on-primary}`), never white.
- **Lavender Tint** (`{colors.primary-soft}`): The pale version, used for hover states and soft fills.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Card edges and dividers.
- **Lilac Border** (`{colors.border-accent}`): Lilac outline on emphasis controls.
- **Lavender Glow / Soft** (`{colors.shadow-lilac}`, `{colors.shadow-soft}`): Opaque stand-ins for the signature violet halo and a soft neutral lift (originals were rgb/rgba — recorded here for the Google spec).

## Typography

### Font Family
- **Primary**: the custom **Phantom** typeface, with fallbacks `Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif` — a humanist sans that carries display, body, and UI alike.
- **Weights**: a relaxed regular 400 dominates; a light 350 appears for large body copy; 600-700 for the occasional strong label.
- **OpenType / tracking**: large display sizes use heavy negative tracking (-2.4px at 96px); buttons carry a touch of positive tracking (0.16px).

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 96px / 400 / -2.4px — the airy marquee headline |
| `display` | 36px / 400 / -0.7px — large section titles |
| `heading` | 24px / 400 / -0.6px — feature headings |
| `heading-sub` | 20px / 400 — sub-section headings |
| `body-large` | 20px / 350 — light lead paragraphs |
| `body` | 16px / 400 — standard body |
| `body-small` | 15px / 400 — dense supporting copy |
| `label-strong` | 16px / 700 — emphasis labels, prices |
| `button` | 16px / 400 / 0.16px — button labels |
| `caption` | 14px / 600 — small badges, metadata |

### Principles
- **Big but airy**: even the 96px hero runs at a relaxed weight 400 — Phantom never goes bold-headline heavy.
- **Light for length**: large body copy drops to weight 350 (`{typography.body-large}`) for a soft, open read.
- **Tighten the big**: heavy negative tracking on display sizes (-2.4px); near-zero on body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The system is comfortable rather than dense — cards carry generous internal padding (`{spacing.xl}`–`{spacing.2xl}`) and major sections separate with `{spacing.5xl}` (96px) of breathing room.

### Grid & Container
- Max content width: ~1200px, centered
- Signature pattern: a playful bento grid of bold, fully-rounded cards — buy/sell, trending tokens (near-black), prediction markets (cream), perps (accent) — each a different visual treatment
- Hero pairs a large airy headline with a floating wallet UI mock

### Whitespace Philosophy
- **Plush, not dense**: generous padding and rounding make the interface feel soft and unhurried
- **Lavender as connective tissue**: pale violet panels and glows tie sections together
- **Cards float**: the lavender glow lifts surfaces off the cream canvas

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Section bands, most content |
| Lavender Glow (Level 1) | `0 0 4px` violet halo (`{colors.shadow-lilac}`) | The signature card/control lift |
| Soft (Level 2) | `0 2px 10px -3px` neutral (`{colors.shadow-soft}`) | Floating menus, dropdowns |
| Raised (Level 3) | Layered neutral + inset highlight | The hero wallet mock |

**Shadow Philosophy**: Phantom's defining depth cue is not a drop shadow but a **glow** — a soft lavender halo (`{colors.shadow-lilac}`) that surrounds cards and controls and makes them read as luminous objects hovering just above the cream page. It is gentle, ambient, and unmistakably violet. Where a neutral shadow is needed (menus, the hero mock), it stays soft and low-contrast. The whole system avoids hard, dark shadows — depth here is warm and glowing, not heavy.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 2px | Tiny inset chips |
| `md` | 12px | Inputs, small tiles |
| `lg` | 24px | Cards, bento tiles — the default radius |
| `xl` | 32px | Primary buttons, larger panels |
| `pill` | 9999px | Download buttons, avatars, toggles |

Phantom rounds generously. Cards and bento tiles sit at 24px (`{rounded.lg}`), primary buttons go to 32px (`{rounded.xl}`), and the marquee download buttons are full pills (96px radius, captured as `{rounded.pill}`). The plush rounding is core to the friendly, consumer-app personality — there are no sharp edges.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Phantom lilac (`{colors.primary}`) fill with **aubergine text** (`{colors.on-primary}`), 32px radius. The signature CTA. Hover softens to `{colors.primary-soft}`.
- **`button-pill`** — Near-white (`{colors.surface}`) fill, aubergine text, full-pill radius — the marquee "Download Phantom" button. Hover tints lavender.
- **`button-lavender`** — Pale lavender (`{colors.surface-lilac}`) fill, aubergine text, 24px radius — the quieter "See more" action.

### Cards
- **`card`** / **`card-dark`** — Near-white surface at 24px radius with the lavender glow, or a bold near-black (`{colors.surface-dark}`) showcase variant with cream text.

### Inputs
- **`input`** — Near-white fill, hairline border, 12px radius. **`input-focus`** picks up a lilac (`{colors.border-accent}`) ring.

### Navigation
- **`nav-bar`** — Cream background, aubergine labels, a lilac "Download" CTA pinned right.

### Accent & Meta
- **`link`** — Aubergine (`{colors.ink}`) text, underline on hover.
- **`badge`** — Pale-lavender (`{colors.surface-lilac}`) fill, aubergine text, full pill.

## Do's and Don'ts

### Do
- Fill primary buttons with Phantom lilac (`{colors.primary}`) and set the text in **aubergine** (`{colors.on-primary}`) — the inversion is the brand
- Start on warm cream (`{colors.background}`), washed with pale lavender panels (`{colors.surface-lilac}`)
- Use aubergine (`{colors.ink}`) as the dominant ink — keep the palette tight and singular
- Keep type airy: relaxed weight 400 even at hero size, light 350 for large body (`{typography.body-large}`)
- Lift cards with the **lavender glow** (`{colors.shadow-lilac}`), not a hard drop shadow
- Round generously: 24px (`{rounded.lg}`) on cards, 32px (`{rounded.xl}`) on buttons, full pills (`{rounded.pill}`) on downloads
- Use the bento grid of bold cards, including a near-black showcase variant (`{colors.surface-dark}`)
- Use heavy negative tracking on display type (-2.4px at 96px)

### Don't
- Don't put white text on the lilac button — it must be aubergine (`{colors.on-primary}`)
- Don't use stark white as the canvas — Phantom's base is warm cream
- Don't set headlines bold — even the 96px hero stays at weight 400
- Don't reach for hard, dark drop shadows — depth is a soft lavender glow
- Don't introduce sharp corners — the system rounds everything generously
- Don't let lilac go neon or cold — it stays soft and warm
- Don't crowd the layout — Phantom is plush and generously spaced, not dense

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero headline scales 96px → ~40px; bento grid stacks to one column; nav collapses; download button goes full-width pill |
| Tablet | 640–1023px | Bento grid drops to two columns; hero headline and wallet mock stack |
| Desktop | 1024–1279px | Full layout; airy hero with floating wallet mock; multi-card bento grid |
| Large | ≥1280px | Max ~1200px container, centered; generous section padding (`{spacing.5xl}`) |

### Touch Targets
- Buttons run tall with `16px 32px` padding and 32px radius — generous thumb targets
- Pill download buttons and toggles stay finger-sized

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle on mobile; the lilac "Download" CTA persists
- **Bento grid**: 4-up → 2-up → single column as width drops, each card keeping its rounding
- **Type**: display drops from 96px toward ~40px while keeping proportional negative tracking
- **Spacing**: section padding compresses from 96px toward ~48px

### Image Behavior
- The wallet UI mocks and bento illustrations scale as grid children and reflow above or below copy on narrow screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm Cream (`{colors.background}`)
- Text: Aubergine (`{colors.ink}`)
- Brand accent: Phantom Lilac (`{colors.primary}`)
- Secondary text: Muted Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Lilac fill (`{colors.primary}`) with **aubergine text** (`{colors.on-primary}`)

### Example Component Prompts

- "Create a hero on warm cream (`{colors.background}`) with a 96px aubergine (`{colors.ink}`) headline in the Phantom sans at weight 400, letter-spacing -2.4px, light (weight 350) body copy below, and a lilac 'Download Phantom' button — `{colors.primary}` fill with **aubergine** (`{colors.on-primary}`) text, `{rounded.xl}` radius, lavender glow (`{colors.shadow-lilac}`)"
- "Build the signature primary button: Phantom lilac (`{colors.primary}`) fill, aubergine text (`{colors.on-primary}`) — NOT white — `{typography.button}`, `{rounded.xl}` radius, `16px 32px` padding; hover softens to `{colors.primary-soft}`"
- "Create a full-pill download button: near-white (`{colors.surface}`) fill, aubergine text, `{rounded.pill}` radius, lavender glow"
- "Design a bento card: near-white (`{colors.surface}`) surface, `{rounded.lg}` radius, lavender glow (`{colors.shadow-lilac}`), an aubergine title (`{typography.heading}`), and a bold price label (`{typography.label-strong}`)"
- "Render a bold showcase card: near-black (`{colors.surface-dark}`) fill, cream text (`{colors.on-dark}`), `{rounded.lg}` radius — for 'find trending tokens'"

### Iteration Guide

1. Start on warm cream (`{colors.background}`), not white, and wash sections with pale lavender (`{colors.surface-lilac}`).
2. The primary button is lilac (`{colors.primary}`) with **aubergine text** (`{colors.on-primary}`). If your button text is white, fix it — the inversion is the brand.
3. Keep type airy — weight 400 even at hero size, 350 for large body. If it looks bold, lighten it.
4. Lift cards with the lavender glow (`{colors.shadow-lilac}`), not a hard shadow.
5. Round generously: `{rounded.lg}` (24px) on cards, `{rounded.xl}` (32px) on buttons, `{rounded.pill}` on downloads.
6. Keep aubergine (`{colors.ink}`) as the dominant ink — the palette is tight and singular.
7. Use the bento grid of bold rounded cards, including a near-black showcase variant, for personality.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Phantom. Brand names and trademarks belong to their respective owners.