Black canvas, off-white text, six atmospheric accent glows. White (`{colors.primary}`) is the brand's actual accent — the brightest pixel on the canvas.
Domaine Display for hero serifs, ABC Favorit for body, Inter for UI, Geist Mono for code. DM Serif Display + Inter substitute when proprietary families aren't available.
A small white pill is the brand's CTA. Ghost and outline variants take secondary roles. All buttons use `rounded.md` (8px).
A 3-up grid of feature cards using `surface-card` background, `hairline-strong` border, and `rounded.lg` (12px) corners.
Build, test, and deploy email templates with the same component model as the rest of your stack.
Visual editing, version history, and A/B variants — without leaving the developer workflow.
Deliverability infrastructure managed for you, with detailed reports per recipient.
Six accent colours used only as low-opacity radial atmospheric washes anchored at section openings. Never as solid surfaces.
3-up grid; centre tier uses `surface-elevated` (one luminance step up) instead of a colour change to mark "recommended".
Free
$0 / month
Pro
$20 / month
Enterprise
Custom
Surface-deep background with traffic-light chrome and a Geist Mono body. Tab strip pinned just below the chrome.
// Send your first email in seconds. import { Resend } from 'resend'; const resend = new Resend('API_KEY'); await resend.emails.send({ from: 'sender@example.com', to: 'recipient@example.com', subject: 'Welcome', html: '<p>Body</p>', });
A single white card centred in the dark canvas — the only deliberately-light surface in the system. Reads like a print pull-quote.
From: Sender Name <sender@example.com>
Your weekly digest
Hi recipient,
This is a placeholder email body. The mockup demonstrates the rendered output of an email template inside the otherwise dark Resend canvas.
— The Team
Compact 40px inputs on `surface-card` with translucent-white borders.
A 4px base, with `section: 96px` and `band: 128px` driving the editorial dark rhythm.
Buttons round at 8px, cards at 12px, pills go full.
Translucent-white borders carry depth. Code wells use the deepest surface to suggest temperature change.
Six breakpoints from desktop XL (≥1440) to small mobile (≤425). Hero clamps from 96px to 44px across the ladder.
| Breakpoint | Width | Key Changes |
|---|---|---|
| Desktop XL | ≥ 1440px | 3-up feature grid, side-by-side code-story splits, max content 1200. |
| Desktop | 1280–1439px | Container shrinks; xl side padding. |
| Tablet Large | 1024–1279px | Feature grid stays 3-up; code-story remains 2-up. |
| Tablet | 768–1023px | Feature grid 2-up; code-story stacks; pricing stacks vertically. |
| Mobile Large | 426–767px | Feature grid 1-up; nav hamburger; hero clamps to 56px. |
| Mobile | ≤ 425px | All grids 1-up; hero 44px; section padding 64px. |