phantom.com

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.

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.