# 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

API Key
Default (frost border)
To Address
Focus (blue border)
Domain
Error (red border)
Email Body

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