Phantom: The money app that'll take you places

Design Specification — Phantom: The money app that'll take you places

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#1C1C1C), a vivid accent (#6E56CF). All type is set in _3odf500. Detected font weights: 350, 400, 500, 600, 700, 800. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy.

Logo asset(s): https://phantom.com/_web_platform_assets/favicon-96x96.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)

Typography

Primary typeface: _3odf500 — stack: _3odf500

Font stacks (most used first)

• _3odf500
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 350, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 rgba(from #FF7243 r g b / 50%)
• 0 0 0 6px rgba(from #FF7243 r g b / 0%)
• 0 0 rgba(from #FF7243 r g b / 0%)

Layout

Container max-width: 767px

Breakpoints

• 639px
• 767px
• 768px
• 1279px
• 1280px

Animation & Motion

Transitions

• background-color .3s ease

Easing curves

• cubic-bezier(.22, 1, .36, 1)

Keyframes

@keyframes o9ix0k0 { 0%{opacity:.5}50%{opacity:1}to{opacity:.5} }
@keyframes z6cyhjj { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes _1m5htfc0 { 0%{border-color:#ffffff0d}to{border-color:#ffffff12} }
@keyframes _1m5htfch { 14%{transform:translate(-3px)}28%{transform:translate(2px)}42%{transform:translate(-2px)}56%{transform:translate(1px)}70%{transform:translate(-1px)}84%{transform:translate(1px)}to{transform:translate(0)} }
@keyframes fb4euy0 { 0%{box-shadow:0 0 rgba(from #FF7243 r g b / 50%)}70%{box-shadow:0 0 0 6px rgba(from #FF7243 r g b / 0%)}to{box-shadow:0 0 rgba(from #FF7243 r g b / 0%)} }

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --_1akg7lp0: #e2ddfe;
  --_1akg7lp1: #baa7ff;
  --_1akg7lp2: #7d66d9;
  --_1akg7lp3: #6e56cf;
  --_1akg7lp4: #6e56cf;
  --_1akg7lp5: #6958ad;
  --_1akg7lp6: #56468b;
  --_1akg7lp7: #473876;
  --_1akg7lp8: #473876;
  --_1akg7lp9: #3c2e69;
  --_1akg7lpa: #33255b;
  --_1akg7lpb: #291f43;
  --_1akg7lpc: #1b1525;
  --_1akg7lpd: #14121f;
  --_1akg7lpe: #f6eeb4;
  --_1akg7lpf: #f5e147;
  --_1akg7lpg: #ffff57;
  --_1akg7lph: #ffe629;
  --_1akg7lpi: #ffe629;
  --_1akg7lpj: #836a21;
  --_1akg7lpk: #665417;
  --_1akg7lpl: #524202;
  --_1akg7lpm: #524202;
  --_1akg7lpn: #433500;
  --_1akg7lpo: #362b00;
  --_1akg7lpp: #2d2305;
  --_1akg7lpq: #1b180f;
  --_1akg7lpr: #14120b;
  --_1akg7lps: #c2e6ff;
  --_1akg7lpt: #70b8ff;
  --_1akg7lpu: #3b9eff;
  --_1akg7lpv: #0090ff;
  --_1akg7lpw: #0090ff;
  --_1akg7lpx: #2870bd;
  --_1akg7lpy: #205d9e;
  --_1akg7lpz: #104d87;
  --_1akg7lp10: #104d87;
  --_1akg7lp11: #004074;
  --_1akg7lp12: #003362;
  --_1akg7lp13: #0d2847;
  --_1akg7lp14: #111927;
  --_1akg7lp15: #0d1520;
  --_1akg7lp16: #fbd3cb;
  --_1akg7lp17: #ff977d;
  --_1akg7lp18: #ec6142;
  --_1akg7lp19: #e54d2e;
  --_1akg7lp1a: #e54d2e;
  --_1akg7lp1b: #ac4d39;
  --_1akg7lp1c: #853a2d;
  --_1akg7lp1d: #6e2920;
  --_1akg7lp1e: #6e2920;
  --_1akg7lp1f: #5e1c16;
  --_1akg7lp1g: #4e1511;
  --_1akg7lp1h: #391714;
  --_1akg7lp1i: #1f1513;
  --_1akg7lp1j: #181111;
  --_1akg7lp1k: #eeeeee;
  --_1akg7lp1l: #b4b4b4;
  --_1akg7lp1m: #7b7b7b;
  --_1akg7lp1n: #6e6e6e;
}

Do's and Don'ts

Do

• Do reserve the accent #6E56CF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 350, 400, 500, 600, 700, 800.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #FF7243;
  --color-accent: #6E56CF;
  --color-background: #FFFFFF;
  --color-surface: #FFFDF8;
  --color-text-primary: #1C1C1C;
  --color-secondary: #1C1C1C;
  --color-text-secondary: #3C315B;
  --color-border: #6E6E6E;
  --color-on-primary: #1C1C1C;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: _3odf500;
  --font-size-display: 96px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 32px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 rgba(from #FF7243 r g b / 50%);
  --shadow-md: 0 0 0 6px rgba(from #FF7243 r g b / 0%);
  --shadow-lg: 0 0 rgba(from #FF7243 r g b / 0%);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-xl: 128px;
  --tracking-display: -.025em;
  --container-max: 767px;
}