Resend

Palette

Typography

Headings

Domaine Display (hero H1) + ABC Favorit (section H2s)

Body

Inter

Mono

Commit Mono

Free swap

Domaine Display → Playfair Display or DM Serif Display (light/regular weight); ABC Favorit → Space Grotesk or Inter Tight at weight 400; Commit Mono is free (or use JetBrains Mono / Geist Mono).

Hero H1 is 96px Domaine, weight 400, line-height 1.0, -1% tracking, sentence case, filled with a white-to-grey vertical gradient so the second line fades. Section H2s are 56px ABC Favorit, weight 400, line-height 1.2, tight -5% tracking, often with a subtle white→grey gradient fill and one gradient-coloured keyword (purple→teal on 'this weekend'). Body/lede is 18px Inter 400, line-height 1.5, in #a1a4a5; feature card titles ~18px Favorit/Inter in white, card body ~14px Inter grey. Code is ~13px Commit Mono with low-saturation syntax colours. Never bold headings; hierarchy comes from size and grey value, not weight.

Measured h1: 96px / 400 / -0.01em · body 18px

Signature moves

• Set the hero headline in a light editorial serif at 96px with a white-to-grey gradient fill, then switch to a tight grotesk for every other heading — the serif is used exactly once for maximum contrast.
• Keep the page true #000000 and create depth only with soft diagonal light-leak streaks and radial top-edge glows instead of grey surfaces.
• Introduce each major section with a glossy, dark 3D app-icon tile with a coloured underglow, centred above the H2.
• Withhold colour from the chrome entirely; let saturation appear only in product UI states (mint 'Delivered', purple 'Clicked', red 'Bounced') and in one gradient keyword per heading.
• Show the product as live, interactive-looking code and UI fragments that fade into black at their edges rather than full framed screenshots.
• Make every border a 1px #262a2d hairline with generous 16–24px radii so cards feel like etched glass on black.

Layout

1280px max content width on a 1440 canvas, hero left-aligned at ~140px offset with huge vertical padding (hero occupies a full viewport plus ~200px of empty black). Below the hero the rhythm alternates: centred sections (logo wall, 'Integrate this weekend', editor, React) each introduced by a ~100px glossy 3D icon tile, a centred H2 and two-line grey lede; and left-aligned sections ('First-class developer experience', 'Go beyond editing') that use a 2-column grid of large 24px-radius feature cards with an illustrated UI vignette on top and title/copy/'Learn more' below. Sections are separated by 150–250px of pure black rather than dividers. Density is low on marketing copy, high inside the product mockups.

Components

Navigation

Transparent bar over black: wordmark left, centred 14px grey links with small chevrons for dropdowns, 'Log in' text link and a 'Get started' pill-ish button (dark #1a1a1a-ish fill, 1px subtle white-alpha border, ~16px radius) on the right.

Buttons

Primary is a dark translucent fill with a faint light border and inner highlight, white 16px Inter medium text, ~8–16px radius — glassy rather than bright. Secondary is plain grey text, sometimes with a › chevron. In-product 'Send' uses solid white with black text for the one bright action.

Announcement pill

Small fully rounded chip above the H1 with a tinted blue-violet hairline border, 14px text and a › chevron.

Logo wall

Two rows of six monochrome white customer logos inside a section whose top edge is a rounded 24px border with a glowing light streak, introduced by a centred two-line grey sentence and an 'Explore Enterprise ›' link.

SDK selector + code window

Row of 13 square icon tiles (~40px, 12px radius, #262a2d border) with grey labels; active tile gets a mint/green tinted border. Below, a 16px-radius black code panel with framework tabs (small icon + label), copy button, line numbers in dim grey and footer links 'View on GitHub' / 'Download ZIP'.

Feature cards

Pure black cards with 1px #262a2d border and 24px radius, a soft radial glow at the top edge, an inset UI vignette (event timeline, HTTP 200 log, audience stats, deliverability gauge) that fades out at the bottom, then a small line icon, 18px title, 14px grey copy and 'Learn more' link.

3D icon tiles

~100px app-icon squircles rendered as glossy dark glass with a coloured underglow (purple, cyan, green) that sit above centred section headings like chapter markers.

Product UI

The product is shown through high-fidelity, stylised recreations rather than raw screenshots: a tabbed code editor with Commit Mono syntax highlighting, an email composer (From/To/Subject rows separated by hairlines, a recipient chip, 'Test' outline and 'Send' solid-white buttons), an event timeline with small coloured status badges (purple Clicked, red Bounced) and inline grey bordered chips for values like 'charlotte@gmail.com', 'Gmail', 'macOS', audience stat columns with uppercase 12px labels, and deliverability cards with large 40px light-weight percentages, coloured status dots and a blurred green glow. The UI is dense, dark, borderline monochrome, uses 1px #262a2d dividers, 6–8px radius chips, tiny line icons and colour only for semantic state. A React-email playground shows a file tree, code pane and live email preview with macOS window dots.