Family

Palette

Typography

Headings

Family (custom grotesk)

Body

Inter

Free swap

Family is a proprietary in-house typeface; use Geist, Inter Tight or Manrope at weight 500 with tight tracking. Inter is free.

H1 is 68px Family, weight 500, line-height 1.1, letter-spacing -0.02em, centered over two lines. Section H2s run ~40–44px in the same face and weight with similar tight tracking, usually two short punchy sentences stacked ('Send, receive, swap. / All in one place.'). Body is Inter 14px/1.43 at -0.006em in #474645; feature-section paragraphs bump to ~16–17px/1.5. Eyebrow labels are ~12px Inter semibold in a section accent colour (blue, green, orange, amber) in sentence case. Card titles are ~14px Inter medium in #121212 with a two-line muted #848281 description. No uppercase, no italics.

Measured h1: 68px / 500 / -0.02em · body 14px

Signature moves

• Flank a centered headline with dense clusters of flat, cheerful mascot illustrations that bleed off both viewport edges, keeping the middle text zone completely clean.
• Give each feature section its own accent colour and apply it consistently to the eyebrow, checklist ticks and caption icons, while headlines and body stay neutral.
• Put real product UI inside soft warm-grey #fbfaf9 cards with 24px radius and let the phone or UI fragment crop off the card edge.
• Write headlines as two short stacked sentences in a tight 500-weight grotesk ('Relentless protection. Restful ease.').
• Use beige #f6f4ef and near-black #171717 pills as the only button styles—no outlines, no gradients.
• Replace borders with warm off-white fills and hairline dividers; the measured shadow is a near-invisible rgba(0,0,0,0.04) 1px ring.

Layout

Centered 1024px content column on white with very generous vertical spacing (~160–200px between sections). Hero is centered text flanked by two full-bleed illustration clusters that bleed off the viewport edges. Below: a 3×2 feature card grid, a 3-up phone screenshot row with coloured icon captions, a full-width #fbfaf9 band holding a 2-column text-only feature list, then alternating 50/50 rows (phone mockup in a soft card on one side, eyebrow + headline + copy + checklist on the other), separated by hairline 1px dividers. Left-aligned section headings after the hero; density is low and calm.

Components

Navigation

Thin white top bar inside the 1024px column: small logo mark + wordmark left, text links with chevrons ('Developers', 'Resources'), and on the right a beige #f6f4ef pill 'Log In' next to a black #171717 pill 'Get Started'. Both pills are compact (~32px tall, 32px radius).

Hero CTAs

Pair of ~44px-tall fully rounded pills: primary is #171717 with white text and an Apple glyph; secondary is #f6f4ef with dark text and a play triangle. No borders or shadows.

Feature cards

#fbfaf9 fills with 24px radius, no border, a live UI fragment (dark action list, green 'Backing Up' pill, status timeline, emoji circles) in the top two-thirds and a bold title + two-line grey caption bottom-left. UI fragments are cropped by the card edge to imply more.

Phone mockup cards

Realistic black iPhone frames with real app screenshots sit inside #fbfaf9 rounded cards, cropped at the bottom edge. A small coloured icon + coloured label caption sits centered beneath (blue Send, green Receive, grey Swap).

Feature checklists

Rows of check-mark items rendered entirely in the section's accent colour (green, orange, blue), sometimes in two columns; icon lists for media types use line icons in amber.

Demo link

Small video thumbnail (~54×30px, rounded) beside a two-line label: dark title 'Wallet Activity', muted 'Watch the demo'.

Text-only feature band

Full-width #fbfaf9 band with a 2-column grid of blue eyebrow labels over 15–16px graphite paragraphs, no icons or cards—pure typographic rhythm.

Product UI

The product is shown with real, crisp iOS screenshots in black iPhone frames plus isolated UI fragments rebuilt in HTML. The app itself is a clean, white iOS interface: SF-style system type, round token icons in bright brand colours, right-aligned dollar values with small green percentage changes, light grey section headers ('Pending', 'This Week'), small grey 'Fee Only' chips, and soft grouped rows with minimal dividers. Wallets appear as a grid of saturated colour tiles (purple, cyan, orange, green, red) with white glyphs. Status uses blue check timelines and green success pills. Density is moderate, iconography is filled and colourful, and accents are reserved for avatars, status and money deltas.