Resend
Email for developers
5 colors
14 components
Inter, Geist Mono
Mar 21, 2026
Website Preview
Colors
Primary
#000000
Background
#FFFFFF
Primary text
#00C16A
Sent status, CTAs
#666666
Secondary text
#333333
Borders, dividers
Typography
Inter
Role
SizeWeightHeight
Display
56px700—
Heading
36px600—
Body
16px400—
Geist Mono
Role
SizeWeightHeight
Code
14px400—
DESIGN.md — Resend
Overview
Resend embraces extreme minimalism with a stark black and white palette. The interface is stripped to essentials, letting the product (email infrastructure) speak through clean typography and generous whitespace. A subtle green accent signals success states.
Colors
Primary Palette
| Token | Hex | Usage |
|---|---|---|
color-bg | #000000 | Background |
color-text | #FFFFFF | Primary text |
color-success | #00C16A | Sent status, CTAs |
color-muted | #666666 | Secondary text |
color-border | #333333 | Borders, dividers |
Typography
| Role | Family | Size | Weight |
|---|---|---|---|
| Display | Inter | 56px | 700 |
| Heading | Inter | 36px | 600 |
| Body | Inter | 16px | 400 |
| Code | Geist Mono | 14px | 400 |
Components
Email Preview
- Code-style email template preview
- Tabs: React / HTML / Plain Text
- Send test button in green
API Key Card
- Black card,
#333border - Masked key with reveal toggle
- Copy button
Do's and Don'ts
Do
- Keep surfaces pure black or pure white
- Use green exclusively for success/send states
- Prioritize code readability
Don't
- Don't add background colors to surfaces
- Don't use more than 2 font weights per page
- Don't round corners beyond 8px