What is Phantom's primary brand color?

Phantom's dominant color is a deep violet-purple wired across text, borders, and the nav bar — frequency 530 in the captured page, used as both text (264 instances) and border (264 instances). The CSS extraction shows this as #3c315b, assigned to ten different CSS variables. The CTA button uses a contrasting soft periwinkle lavender (#ab9ff2) as its fill, with the same deep violet as the text color, making the primary button an inversion of the usual dark-fill pattern. The below-fold canvas uses a warm near-white (#fffdf8) as the surface, giving the system three chromatic tiers: dark violet, periwinkle accent, and warm near-white floor.

What typeface does Phantom use, and what should I use as a substitute?

Phantom runs a proprietary custom typeface called Phantom across every tier — display, heading, body, button, and label. The same family name appears across all 10 extracted type samples. Weight is uniformly 400 with a single 350-weight variant for a 20px sub-label tier; there is no 600 or 700 weight anywhere on the marketing surface. Display sits at 96px with -2.4px tracking and 105.6px line-height; body at 15–16px with normal tracking. The closest open-source substitute is Plus Jakarta Sans at weight 400 — it shares the rounded warmth of Phantom at display sizes. Inter at the same weights is closer for body text. Preserve the zero-bold discipline: Phantom's calm comes from weight 400 all the way up the scale.

What creates the abstract ribbon effect on Phantom's hero?

The hero is a near-black canvas (#1c1c1c base) overlaid with diagonal abstract strips rendered as a full-bleed illustration or image. The strips read in warm gold, deep teal, burnt rust, muted violet, and gray-lavender — none of which map to the primary brand palette precisely; they are illustrative elements rather than token values. The effect creates a generative-art feel that positions Phantom as culturally distinct from exchange-style crypto UIs. To reproduce it: use the near-black surface token as the floor, then overlay diagonal SVG or CSS gradient strips in the warm/cool color families from the palette. The headline and CTA float on top centered, with the pill in periwinkle lavender providing the only brand anchor.

Why is Phantom's below-fold canvas lavender instead of white?

The below-fold surface is #fffdf8 (frequency 90 in the extraction) — a warm near-white with a faint violet undertone. This is two CSS variables merged: --eofi4se (FDFCFE) and --eofi4sm (FFFDF8), both near-white with barely perceptible chroma. The tint is subtle enough that most viewers read it as 'off-white,' but it is consistent across the entire below-fold system. The effect keeps the dark hero and the body sections feeling tonally connected despite the massive lightness shift — the shared violet undertone links them. Pure white would read as a hard cut; the lavender near-white reads as a landing.

Can I use this DESIGN.md to build a crypto or fintech marketing page?

Yes — the file is structured for Claude, Cursor, and similar AI tools. Feed it the spec and it will reproduce Phantom's key decisions: near-black abstract hero (with diagonal ribbon strips in the warm-cool palette), lavender-washed body surface rather than plain white, periwinkle pill CTA with dark-violet ink text, Phantom-equivalent sans at weight 400 across all tiers, and generous 24–32px corner rounding. The token references resolve cleanly — {colors.canvas} for the hero floor, {colors.surface-1} for the body, {colors.primary} for the CTA fill. One caveat: the abstract ribbon hero works because Phantom's ghost mascot is already illustrative in character. For brands with a more literal product (hardware, SaaS dashboards), the abstract art reads as avoidance rather than identity.

Phantom Design System

Phantom's marketing system pairs a near-black abstract-ribbon hero with a lavender-white below-fold surface.

About Phantom DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source phantom.app

Fintech & Crypto

Phantom's homepage opens with something most crypto wallets avoid: genuine visual risk. A full-bleed near-black canvas carries diagonal abstract ribbons — warm gold, deep teal, burnt rust, muted violet — sweeping across the frame at competing angles. The effect reads less like a marketing section and more like a canvas dropped from a generative art tool. The wordmark sits in the top-left in white; the nav links in deep violet; and the only CTA on the canvas is a softly-rounded pill in periwinkle lavender with matching ink. Then, on scroll, the page lands on a near-white lavender surface — tinted just enough to feel distinct from the plain white that most wallets default to. Where Coinbase commits to plain blue-on-white and MetaMask leans on orange-on-dark, Phantom chooses a tertiary hue and applies it to the canvas itself.

The DESIGN.md file packages the system for React and AI tools. Inside: 11 color tokens, the dominant one being a dark violet-purple used 530 times across text and borders; a soft periwinkle lavender for the CTA pill and card shadow; a warm near-white for body surfaces; and a near-black for the hero. Typography is a single proprietary family — Phantom — running at weight 400 across every tier from 96px display down to 15px label, with no weight variation. The radius scale is generous-soft starting at 24px for cards, reaching 100px for pill buttons, with full-circle avatars at 50%. Spacing centers on a 16px base with section pads at 48px.

Feed this spec to an AI tool and it reproduces Phantom's two signature moves: the abstract ribbon hero (achieved through diagonal gradient or SVG strips in the brand palette, not photography) and the lavender-washed below-fold canvas. The one thing worth borrowing selectively is the single-weight type discipline — Phantom Sans at 400 creates a calm, approachable register that contrasts sharply with the aggressive DeFi aesthetic competitors favor. Most apps need at least one weight bump; Phantom proves it can work without one.

What makes it distinct

Abstract ribbon herodiagonal strokes in gold, teal, rust, and violet over a near-black canvas replace any traditional photography or illustration
Lavender canvas washthe below-fold surface is a warm periwinkle near-white, not standard off-white; every card and section sits on this tinted floor
Single-weight typographyPhantom Sans runs at weight 400 through display (96px) down to label (15px); there is no bold or heavy tier
Inverted CTA pillthe primary button fills with soft periwinkle lavender and renders ink text in deep violet, reversing the light-text-on-dark convention
Generous-rounded cards24px and 32px radius dominate; the scale skips any sub-16px tier

Live at phantom.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

phantom.app

Explore Phantom

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Phantom design system FAQ

Common questions about Phantom's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Phantom — official site

Phantom's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.