Design System
Inspired by Resend

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Get Started Documentation
01 / Colors

Color Palette

Primary
Void Black
#000000
Page background
Near White
#f0f0f0
Primary text
Pure White
#ffffff
Maximum emphasis
Accent Scale
Orange 10
#ff801f
Primary orange accent
Orange 11
#ffa057
Light orange
Green 4
#11ff99
Success / green accent
Blue 10
#3b9eff
Interactive blue
Yellow 9
#ffc53d
Warning / gold
Red 5
#ff2047
Error / destructive
Neutral Scale
Silver
#a1a4a5
Secondary text
Mid Gray
#5c5c5c
Muted labels
Dark Gray
#464a4d
Tertiary text
Border & Surface
Frost Border
rgba(214,235,253,0.19)
Signature icy border
White Hover
rgba(255,255,255,0.28)
Button hover
02 / Typography

Typography Scale

Display Hero
Display Hero — 96px / 400 / 1.00 / -0.96px / Domaine Display
Section Heading
Section Heading — 56px / 400 / 1.20 / -2.8px / ABC Favorit
Sub-heading text
Sub-heading — 20px / 400 / 1.30 / ABC Favorit
Feature Title
Feature Title — 24px / 500 / 1.50 / Inter
Body Large — Email for developers. Build, test, and deliver transactional emails at scale.
Body Large — 18px / 400 / 1.50 / Inter
Body — The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.
Body — 16px / 400 / 1.50 / Inter
Nav Link
Nav Link — 14px / 500 / 1.43 / +0.35px / ABC Favorit
Button / Link
Button — 14px / 500 / 1.43 / Inter
Small Uppercase
Small Uppercase — 12px / 500 / uppercase / Inter
resend.emails.send({ to: 'user@example.com' })
Code Body — 16px / 400 / 1.50 / Commit Mono
npm install resend
Code Small — 12px / 400 / 1.33 / Commit Mono
03 / Buttons

Button Variants

Get Started
White Solid Pill
Documentation
Frost Pill
Learn more
Ghost
Email API
Accent Badge
Webhooks
Blue Badge
Delivered
Green Badge
04 / Cards

Card Examples

Email API

First-class developer experience

Build with a simple, elegant interface that gets out of your way. Send emails with just a few lines of code.

Elevated

Reach humans, not spam

Deliver transactional emails at scale. Card shown with brighter frost border on hover.

Section

React Email

Build beautiful emails using React components. 24px radius section panel variant.

05 / Forms

Form Elements

Default (frost border)
Focus (blue border)
Error (red border)
06 / Spacing

Spacing Scale

2
4
8
12
16
20
24
32
40
07 / Radius

Border Radius Scale

4px
Inputs
6px
Menus
8px
Tabs
12px
Containers
16px
Cards
24px
Sections
9999px
Pills
08 / Elevation

Elevation & Depth

Level 0: Flat
No shadow — void background
Level 1: Ring
Blue-tinted ring shadow
Level 1b: Frost
Icy frost border
Level 2: Subtle
Minimal card elevation
Focus
Heavy black focus ring