# phantom.com

Source: https://phantom.com/
Captured: 2026-09-20
Tags: saas, landing, mixed, both, playful, minimal, organic, friendly, optimistic, confident, human
Colors: #101010, #f6f4fe, #76696a, #4e4c68, #2c2c31, #775a1d, #193a71, #b5b1b6
Type (h1): Phantom · 80px/88px · 400 · tracking -2px — "Your home for trading crypto, predictions, perps, and more"
Type (h2): Phantom · 24px/32.4px · 400 · tracking -0.6px — "Where the world trades"
Type (h3): Phantom · 24px/32.4px · 400 · tracking -0.6px — "Trading"
Type (body): Phantom · 30px/36px · 400 — "Buy and sell all types of crypto in an instant."
Type (button): Phantom · 16px/normal · 400 — "Download"
Button: "Download" — fill #ab9ff2, text #3c315b, radius 32px, border 0px, padding 16px 32px, height 52px, type 16px/400
Radii: 24px (14), 32px (12), 50% (6), 100px (6), 96px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/phantom-com/hero.webp?v=66cc6771
- Page crop (mid-1): https://media.lvly.design/library/phantom-com/mid-1.webp?v=81bd6e88
- Page crop (mid-2): https://media.lvly.design/library/phantom-com/mid-2.webp?v=f02f243f
- Hero (mobile): https://media.lvly.design/library/phantom-com/mobile-hero.webp?v=4daae4f8
- Full page (desktop): https://media.lvly.design/library/phantom-com/full.jpg?v=77a5cefc
- Full page (mobile): https://media.lvly.design/library/phantom-com/mobile-full.jpg?v=b45eea09
- Clip preview (mp4): https://media.lvly.design/library/phantom-com/video-lcyy70.preview.mp4?v=85bb09c5

A crypto wallet landing page that behaves like a children's picture book for adults: a pale lavender ground (#f5f2ff), one custom grotesk at a single weight, and enormous quantities of empty space between very few objects. The hero is not a band but an inset near-black panel (#101010) with 32px corners and a page gutter on all four sides, carrying hand-drawn ribbon artwork behind 80px white type; the nav floats above it as a white capsule with the logo and the lavender Download pill sitting outside the capsule entirely. Below the fold the page proceeds as full-bleed color bands — lavender, deep plum, periwinkle #ab9ff2 — with no rules, no cards and no container between them, each one holding a single centered headline and a single "See more ↗" pill before several hundred pixels of nothing. The ghost mark is the page's punctuation: it is set inline in the headlines where a word would go, at cap height, so the brand appears four or five times without a single logo lockup. What makes it work is the restraint around the play: every illustration is loud, every layout is nearly empty, and one typeface at weight 400 holds the whole 8000px together with size and ground color as the only hierarchy.

## Steal-worthy details

- Hero as an inset panel, not a band — the dark artwork sits inside a 32px-radius rectangle with ~48px of lavender gutter on every side, so the page ground frames the hero instead of being interrupted by it
- Floating capsule nav with the ends outside it — the links live in a white pill, and the wordmark on the left and the Download pill on the right sit on bare ground beyond its edges; there is no header bar, no fill behind it and no bottom border
- One typeface, one weight, no bold anywhere — the custom grotesk runs at 400 from the 80px/88px h1 (-2px tracking) down to the 16px button label; hierarchy is size and ground color only, which is why the page reads calm under loud illustration
- The brand mark set inline as a word — the ghost glyph replaces a word mid-headline at cap height, where the word "everyone" would sit in "Trading tools for everyone", so the logo appears repeatedly inside the copy and never as a lockup
- One headline and one pill per section — each section is a centered line plus a small "See more ↗" ghost pill, then ~600px of empty ground before the next thing; the whitespace, not a divider, is the section break
- Sections separated by full-bleed ground color alone — lavender #f6f4fe gives way to plum #4e4c68 and then to periwinkle #ab9ff2 with no rule, no container and no gradient at the seam; the text color flips and the section is new
- Fanned card stack for a single message — one white 24px-radius card with three pastel card edges peeking out to its right at even offsets, turning one statement into an object you feel you could pick up
- Carousel chrome demoted to the ground — a small labeled chip on the left and two circular arrow buttons on the right sit on the page background above the card row rather than overlaying the cards, so the artwork is never covered by UI

## Style recipe

Build on a pale lavender-white ground (#f5f2ff) and treat it as a material: leave it visible as gutters around every panel, and change sections by flooding the ground with a new full-bleed color rather than by adding rules or containers. Use three grounds in rotation — the pale lavender, a deep plum (#4e4c68), and a saturated periwinkle (#ab9ff2) — and flip the ink between near-black (#101010) and white to match.

Set everything in one geometric grotesk at weight 400 and never use a bold. Scale: display 80px/88px with -2px tracking (-0.025em), section headings 24px/32.4px with -0.6px, lead body 30px/36px at normal tracking, controls 16px. Hierarchy comes from size and ground color only; if something needs more emphasis, make it bigger or put it on a different ground, do not make it heavier.

Radii come in two families: 24–32px on panels, cards and images, and full pills (100px, or a 32px radius on a 52px control) on every button and chip. No borders anywhere, no shadows on anything except the faintest lift under a floating nav capsule — depth is made by nesting a panel inside a visible gutter, or by fanning a card stack with 8–10px offsets and pastel card edges.

Buttons: solid #ab9ff2 with #3c315b label text, 16px type, 16px/32px padding, 52px tall, zero border, pill radius. Secondary is the same pill in a 10% tint of the accent with a small trailing ↗ arrow. Put a lead icon inside the primary CTA when it names a platform.

Composition: center every section — headline, then one control, then nothing. Budget 400–600px of empty ground between a section's last element and the next section's first, and let one illustration or product panel per section be the only dense object on screen. Illustration is loud on purpose: flat vector blobs, ribbons and pastel confetti in blue, coral, mustard, mint and lilac against near-black panels, cropped at the panel edge so the artwork looks like it continues underneath.

The two moves that make it recognizable: the hero as an inset rounded panel with page ground on all four sides, and the brand mark typeset inline inside headlines where a word belongs, so the logo becomes vocabulary rather than signage.