---
version: alpha
name: Phantom
description: "Lavender daylight wrapped around a black card of drifting, planet-like orbs."
colors:
  on-surface-variant: "#86848D"
  on-surface: "#1C1C1C"
  surface: "#F5F2FF"
  outline: "#E9E8EA"
  primary: "#AB9FF2"
  near-white: "#FDFCFE"
  pale-violet: "#E2DFFE"
  deep-indigo: "#3C315B"
  warm-cream: "#FFFDF8"
  faint-lavender-grey: "#F4F2F4"
  signal-green: "#2EC08B"
  signal-blue: "#4A87F2"
  butter: "#FFFFC4"
  blush: "#FFDADC"
typography:
  caption:
    fontFamily: Phantom
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Phantom
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0em
  body:
    fontFamily: Phantom
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  label:
    fontFamily: Phantom
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  subheading:
    fontFamily: Phantom
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  section:
    fontFamily: Phantom
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display:
    fontFamily: Phantom
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  hero:
    fontFamily: Phantom
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  chip-small-control: 4px
  card-inner: 16px
  panel-soft-card: 24px
  hero-card-standard-button: 32px
  full-pill-button: 96px
spacing:
  xs: 4px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
---
# Phantom — Style Reference
> Lavender daylight wrapped around a black card of drifting, planet-like orbs.

**Theme:** mixed

Phantom runs two registers on one page. The canvas is a pale lavender wash (`#F5F2FF`) — soft, optimistic, almost stationery-like — and floating on it sits a single near-black hero card (`#1C1C1C`) rounded to a generous 32px, holding a slow galaxy of colored orbs and a charcoal ribbon. The signature move is that contrast: a friendly, light, consumer-fintech surface that opens onto a calm dark "space" where the product lives. The palette pivots on one violet — `#AB9FF2` — used sparingly for the one true CTA, with a paler `#E2DFFE` handling the softer, larger action buttons. Typography is the custom **Phantom** family: a rounded humanist grotesque set at light weights (350–400) and pushed to enormous display sizes (80–96px) so headlines feel spacious rather than loud. Everything is pill-shaped and generously padded — radii run from 32px up to 96px — giving the whole system a rounded, approachable, wallet-in-your-pocket calm.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Lavender Canvas | `#F5F2FF` | `--color-canvas` | The page background; every light section floats on this pale violet wash. Never used for text. |
| Near-White | `#FDFCFE` | `--color-surface` | Nav container and light button fills; a barely-there white that reads cleaner than pure white against lavender. |
| Ink Black | `#1C1C1C` | `--color-hero` | The hero card and dark surfaces; the "space" the orbs drift in. Also a body ink on light. |
| Signature Violet | `#AB9FF2` | `--color-primary` | THE brand color — the one filled "Download" CTA in the nav. Reserve it for the single primary action; overuse dilutes it. |
| Pale Violet | `#E2DFFE` | `--color-primary-soft` | The large soft action buttons (e.g. "Download Phantom"); also the source of the only glow shadow. The everyday CTA fill. |
| Deep Indigo | `#3C315B` | `--color-text` | The wordmark, button labels, and primary text on light surfaces. The darkest violet — a text color, not a fill for large areas. |
| Warm Cream | `#FFFDF8` | `--color-text-inverse` | Heading and body text on the dark hero card; a warm off-white that softens the black. |
| Muted Grey | `#86848D` | `--color-text-muted` | The eyebrow / secondary label text; quiet, never for headlines. |
| Faint Lavender Grey | `#F4F2F4` | `--color-surface-alt` | A near-neutral light surface, one notch off the canvas. |
| Hairline Grey | `#E9E8EA` | `--color-border` | Dividers and quiet surface steps on light. |
| Signal Green | `#2EC08B` | `--color-accent-green` | A decorative orb color in the hero galaxy; accent only, not UI chrome. *(inferred role — appears in the hero art)* |
| Signal Blue | `#4A87F2` | `--color-accent-blue` | A saturated blue used as a data/accent tone; editorial, never a CTA. |
| Butter | `#FFFFC4` | `--color-accent-butter` | Pale yellow accent from the illustrative palette; used in decorative art, not interface. |
| Blush | `#FFDADC` | `--color-accent-blush` | Pale pink accent; pairs with butter/green in the orb system. Decorative only. |

## Tokens — Typography
### Phantom — the entire system, display and text, set at light weights and huge display sizes · `--font-phantom`
- **Substitute:** Aeonik, General Sans, or Inter (rounded-terminal humanist grotesques)
- **Weights:** 350, 400 in use on the page; the loaded family carries 200, 300, 700 too
- **Sizes:** 96px, 80px, 30px, 24px, 20px, 16px, 15px, 13px (hero input runs to 64px)
- **Line height:** tight on display (~1.0–1.05), comfortable on body (~1.4–1.5)
- **Letter spacing:** near-zero; the rounded grotesque needs no tracking help at display sizes
- **Role:** One family does everything. Weight and size — not a second typeface — carry the whole hierarchy: light-weight giant headlines, plain 16px labels.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 13px | 1.4 | 0 | `--text-caption` |
| Small | 15px | 1.45 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Label | 20px | 1.4 | 0 | `--text-lg` |
| Subheading | 24px | 1.3 | 0 | `--text-xl` |
| Section | 30px | 1.2 | 0 | `--text-2xl` |
| Display | 80px | 1.05 | -0.01em | `--text-display` |
| Hero | 96px | 1.0 | -0.01em | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 32px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Chip / small control | 4px |
| Card inner | 16px |
| Panel / soft card | 24px / 28px |
| Hero card / standard button | 32px |
| Full pill button | 96px / 100px |
| Circular (search, avatar) | 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Violet Glow | `rgb(226, 223, 254) 0px 0px 4px 0px` | `--shadow-glow` |

### Layout
- **Page max-width:** contained; the hero card is a wide rounded panel inset from the lavender canvas
- **Section gap:** generous vertical rhythm on the pale canvas
- **Card padding:** 32px on soft action buttons; hero card holds large internal breathing room
- **Element gap:** nav items sit in a single rounded pill container with comfortable spacing

## Components
### Primary CTA (Nav "Download")
**Role:** The single strongest action, top-right in the nav.
Filled Signature Violet `#AB9FF2`, label in Deep Indigo `#3C315B`, 32px radius, ~16px padding, 16px/400 text. This is the only place the full-strength violet appears as a fill — that scarcity is what makes it read as *the* action.

### Soft Action Button ("Download Phantom")
**Role:** The large, friendly in-content CTA.
Pale Violet `#E2DFFE` fill, `#3C315B` label, radius up to 96px (full pill), 32px padding, 16px/400 text. Carries a small leading icon. This is the everyday button — inviting, oversized, low-contrast.

### White Button
**Role:** Neutral action on light surfaces.
Near-White `#FDFCFE` fill, `#3C315B` label, 32px radius, 16px padding. Sits quietly on the lavender canvas without competing with the violet CTA.

### Nav Container
**Role:** Houses the primary navigation.
A single Near-White `#FDFCFE` rounded pill floating on the canvas, holding text links (Features, Learn, Explore, Company, Developers, Support) with dropdown carets, labels in `#3C315B` at 16px/400.

### Search Control
**Role:** Icon-only search entry in the nav.
Circular (`50%` radius) light chip, `#3C315B` glyph; 12px 24px padding footprint. Minimal, no visible border.

### Hero Card
**Role:** The centerpiece dark surface.
Ink Black `#1C1C1C`, 32px radius, inset from the lavender canvas. Contains an eyebrow in Muted Grey `#86848D`, a giant cream heading (`#FFFDF8`, 80–96px), and the soft CTA — all over a slow field of colored orbs and a charcoal ribbon.

### Hero Heading
**Role:** The single dominant message.
Warm Cream `#FFFDF8`, Phantom at 80–96px, weight 350–400, line-height ~1.0. Set large and light so it feels spacious against the black rather than heavy.

### Eyebrow / Kicker
**Role:** The quiet line above the headline.
Muted Grey `#86848D`, ~20–24px, 400 weight. Sets context ("The money app that'll take you places") without pulling focus from the display line.

### Text Link
**Role:** Inline and nav navigation.
`#3C315B`, 16px/400, no underline at rest; radius carried for hover/hit-area (32px). Restrained — links are indigo, never the bright violet.

### Hero Input
**Role:** Oversized value/amount entry (in-product context).
Transparent background, no border, no radius, `#3C315B` text at up to 64px. The number *is* the interface — chrome disappears so the figure dominates.

### Decorative Orb System
**Role:** The hero's identity art.
A cluster of large soft-edged circles — signal green `#2EC08B`, blue `#4A87F2`, and warmer illustrative tones — drifting on the black card, threaded by a charcoal ribbon. Purely atmospheric; never interactive.

## Do's and Don'ts
### Do
- Keep the full-strength violet `#AB9FF2` for exactly one primary CTA per view; let `#E2DFFE` do the everyday button work.
- Float dark surfaces (`#1C1C1C`) as rounded cards *inside* the lavender canvas — never edge-to-edge black.
- Use warm cream `#FFFDF8` for text on black and deep indigo `#3C315B` for text on light; keep them in their lanes.
- Set headlines huge and light (80–96px, weight 350) — size, not weight, is the emphasis.
- Round everything: 32px on cards and buttons, up to 96px for full pills.

### Don't
- Don't fill large areas with `#AB9FF2` — it is a punctuation color, not a background.
- Don't tint the lavender canvas toward grey or white; the pale violet `#F5F2FF` is the mood.
- Don't add a second typeface — Phantom carries the entire hierarchy alone.
- Don't put hard corners or heavy borders anywhere; softness and pills are the law.
- Don't let the decorative orbs (`#2EC08B`, `#4A87F2`, blush, butter) leak into UI chrome — they stay illustrative.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#F5F2FF` | The pale lavender page ground |
| 1 | Surface | `#FDFCFE` | Nav pill and light button fills |
| 1-alt | Surface Alt | `#F4F2F4` | A near-neutral light panel |
| 2 | Soft Violet | `#E2DFFE` | Everyday CTA fill / raised soft chip |
| Dark | Hero Card | `#1C1C1C` | The floating black centerpiece |

## Elevation
Depth is luminance and radius, not shadow. Light surfaces (`#FDFCFE`) lift off the lavender canvas simply by being lighter and rounded; the dark hero card recedes into "space" by being darker. The only real shadow in the system is a soft violet glow (`rgb(226, 223, 254) 0px 0px 4px 0px`) — a whisper of `#E2DFFE`, not a drop shadow. Everything else relies on tone steps and 24–32px corners to imply layering.

## Imagery
Abstract, soft-focus orbs — large circles in signal green, blue, and warmer illustrative tones — drifting across the black hero card, threaded by a single charcoal ribbon that suggests a path or trajectory ("take you places"). The mark is a rounded ghost glyph paired with a lowercase "phantom" wordmark in deep indigo. No photography; the visual language is geometric, playful, and calm — planets in a friendly night sky rather than charts and candlesticks.

## Layout
A contained page on lavender canvas. The nav is one rounded white pill centered up top, brand mark left, a single filled violet "Download" right. The hero is a wide inset black card with a large rounded radius, centered eyebrow + display headline + soft CTA stacked and centered. Rhythm is roomy and vertical; nothing is full-bleed except the canvas color itself. The whole page reads as soft rounded panels floating on pale violet.

## Typography Signature
One family, two moods. At 16px/400 Phantom is a plain, legible consumer-app label — utterly quiet. At 80–96px with weight dropped to 350 and line-height at ~1.0, the same font becomes an airy, confident display face where the counters open up and the rounded terminals feel human. The signature is the *lightness at scale*: most brands go heavier as they go bigger; Phantom goes lighter, so a 96px headline feels spacious and calm instead of shouting. Tracking stays near zero throughout — the letterforms are self-spacing.

## Agent Prompt Guide
## Quick Color Reference
- background: `#F5F2FF` / text: `#3C315B` (cream `#FFFDF8` on dark) / surface: `#FDFCFE` / border: `#E9E8EA` / accent: `#E2DFFE` / primary action: `#AB9FF2`

## Example Component Prompts
1. **Primary CTA**: A pill button, background `#AB9FF2`, label "Download" in `#3C315B`, Phantom/Inter 16px weight 400, 32px radius, 16px padding, no border, no shadow.
2. **Soft CTA**: A large full-pill button, background `#E2DFFE`, label "Download Phantom" in `#3C315B` with a small leading icon, 96px radius, 32px padding, 16px/400 text.
3. **Hero Card**: A near-black `#1C1C1C` panel, 32px radius, inset from a `#F5F2FF` page; centered eyebrow in `#86848D` 20px, giant cream heading `#FFFDF8` at 88px weight 350 line-height 1.0, soft CTA below; soft colored orbs (`#2EC08B`, `#4A87F2`) drifting behind.
4. **Nav Pill**: A single `#FDFCFE` rounded container, brand mark left in `#3C315B`, six text links at 16px/400 with dropdown carets, and a filled `#AB9FF2` "Download" button at the right.
5. **Section Heading**: Phantom/Inter, `#3C315B` on light, 30px weight 400, line-height 1.2, near-zero tracking, on a `#F5F2FF` background.

## Similar Brands
- **Cash App** — a consumer-fintech playfulness where a bold single-color CTA carries the whole interface and finance feels friendly.
- **Linear** — the restrained one-accent-violet discipline: violet is punctuation, everything else is calm neutral.
- **Robinhood** — approachable retail-trading UI that hides complexity behind big numbers and soft, rounded surfaces.
- **Coinbase** — a crypto product that deliberately looks calm and consumer-grade rather than terminal-dense.
- **Revolut** — pastel-and-dark card motifs, pill buttons, and playful orb/gradient art in a money app.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #F5F2FF;
  --color-surface: #FDFCFE;
  --color-surface-alt: #F4F2F4;
  --color-hero: #1C1C1C;
  --color-primary: #AB9FF2;
  --color-primary-soft: #E2DFFE;
  --color-text: #3C315B;
  --color-text-inverse: #FFFDF8;
  --color-text-muted: #86848D;
  --color-border: #E9E8EA;
  --color-accent-green: #2EC08B;
  --color-accent-blue: #4A87F2;
  --color-accent-butter: #FFFFC4;
  --color-accent-blush: #FFDADC;

  /* Typography — Families */
  --font-phantom: 'Phantom', 'Aeonik', 'General Sans', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-display: 80px;
  --text-hero: 96px;
  --leading-hero: 1.0;
  --leading-display: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-chip: 4px;
  --radius-inner: 16px;
  --radius-panel: 24px;
  --radius-panel-lg: 28px;
  --radius-card: 32px;
  --radius-pill: 96px;
  --radius-pill-max: 100px;
  --radius-round: 50%;

  /* Shadow */
  --shadow-glow: 0px 0px 4px 0px rgb(226, 223, 254);
}
```
### Tailwind v4
```css
@theme {
  --color-canvas: #F5F2FF;
  --color-surface: #FDFCFE;
  --color-surface-alt: #F4F2F4;
  --color-hero: #1C1C1C;
  --color-primary: #AB9FF2;
  --color-primary-soft: #E2DFFE;
  --color-text: #3C315B;
  --color-text-inverse: #FFFDF8;
  --color-text-muted: #86848D;
  --color-border: #E9E8EA;
  --color-accent-green: #2EC08B;
  --color-accent-blue: #4A87F2;
  --color-accent-butter: #FFFFC4;
  --color-accent-blush: #FFDADC;

  --font-phantom: 'Phantom', 'Aeonik', 'General Sans', ui-sans-serif, system-ui, sans-serif;

  --text-caption: 13px;
  --text-sm: 15px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-display: 80px;
  --text-hero: 96px;
  --leading-hero: 1.0;
  --leading-display: 1.05;
  --leading-body: 1.5;

  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --radius-chip: 4px;
  --radius-inner: 16px;
  --radius-panel: 24px;
  --radius-panel-lg: 28px;
  --radius-card: 32px;
  --radius-pill: 96px;
  --radius-pill-max: 100px;
  --radius-round: 50%;

  --shadow-glow: 0px 0px 4px 0px rgb(226, 223, 254);
}
```