Announcing Resend Forward ›

Email for
developers

The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.

Product component: the code panel and its delivery log
import { Resend } from 'resend';

// send your first email
const resend = new Resend('re_123');

await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: <WelcomeEmail />
});
Emails
user@gmail.comDelivered
alan@example.comDelivered
ada@example.comDelivered
grace@example.comQueued

First-class DX

SDKs for every stack, frosted gradient surfaces, 1px alpha borders, never solid gray.

Reach humans

Cinematic sections 120 to 160px apart with scroll fade-and-rise at 400ms ease-out.

radial spotlight divider
Controls: every variant with its hover and disabled state
Primary · default
Primary · hover
Primary · disabled 30%
Link · default
Link · hover
Link · disabled 30%
Announcing Resend Forward ›Announcement pill · default
Announcing Resend Forward ›Announcement pill · hover
Announcing Resend Forward ›Announcement pill · disabled 30%
Auth · default
Auth · hover
Auth · disabled 30%
Send with Next.jsChip · tint #dbf6ff1c
Intuitive analyticsChip strong · tint #d9efff2f
Input · default · 48px · r12 · bg #0a0b0c
Input · focus · cyan-tinted ring

Controls are pill-first: nav CTA 40px, hero buttons 44 to 48px, chips 38px. Hover never fills, it brightens: text #a1a4a5 to #f0f0f0, borders #ffffff26 to #ffffff4d. Disabled drops to 30% opacity.

Typography: one row per captured role
Hero display · Domaine Display
96px / 96px · 400 · -0.96px (-1%) Domaine 96
Section heading · ABC Favorit
56px / 67px · 400 · -2.8px (-5%) Favorit 56
Body · Inter
16 to 18px / 1.5 · 400 The best way to reach humans instead of spam folders. Body copy stays quiet at #a1a4a5 on black.
UI · Inter
14px · 400 Deliver transactional and marketing emails at scale.
Nav · Inter
14px · 500 · #a1a4a5, hover #f0f0f0 Features · Company · Resources · Docs (hover)
Mono · code samples
13 to 14px · syntax on #141516 await resend.emails.send('hello world')
Palette: alpha layers over true black
Text
text-primary#f0f0f0
text-secondary#a1a4a5
text-faint#ffffff99
placeholder#5c5e63
Surfaces & borders
black stage#000000
input-bg#0a0b0c
code panel#101112
gray-1#141516
gray-2#1c1d1e
primary btn#2a2b2c
border-1#ffffff14
border-2#ffffff26
border hover#ffffff4d
Accent & semantic
accent cyan#dbf6ff
surface-tint#dbf6ff1c
surface-tint-2#d9efff2f
spectrumcyan/amber/purple .44
warm CTA255,255,146 to 238,137,18
beam143,143,143 .67
string / delivered#7ee0a0
keyword#7bb0ff
function#e6d178

Green and syntax hues are panel-scoped: they only ever appear inside code and product mock surfaces, never in page chrome.

Depth & motion: elevation is light, not shadow
8px small
12px input / code
16px card / secondary
9999px pill
inset 0 1px 0 #ffffff1a
primary control highlight
inset 0 1px 0 #ffffff0d
auth card highlight
0 0 0 3px cyan a12
focus ring
1px #ffffff14
alpha hairline border
radial spotlight
glow as elevation

Motion: micro-interactions run 150 to 200ms on color, background, border and opacity; hero copy enters with a 1s staggered slide-up-fade, the WebGL object scale-in-fades over 1s then rotates on a 30s loop, the logo marquee scrolls at 180s, and sections fade-and-rise at 300 to 500ms ease-out. No shadows anywhere: depth is inner highlight, alpha border and spotlight.