Design System

Email for
developers,
done right.

A clean canvas with precise typography, thin borders, and restrained color. Every element earns its place through clarity, not decoration.

14 color tokens 10 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

A near-monochrome palette with functional accents. 14 tokens spanning surfaces, text hierarchy, borders, and status indicators.

Pure White
#ffffff
Page background, canvas
Carbon Black
#000000
Primary text, headings, CTAs
Ink Gray
#111111
Body text, secondary headings
Slate
#333333
Navigation, interactive text
Smoke
#666666
Secondary text, descriptions
Silver
#999999
Placeholders, disabled states
Cloud
#eaeaea
Default borders, dividers
Mist
#f5f5f5
Secondary sections, code blocks
Ghost
#fafafa
Hover states, subtle shifts
Success
#0070f3
Active states, primary accent
Alert Red
#ee0000
Error states, destructive
Amber
#f5a623
Warnings, caution indicators
Mint
#50e3c2
Success, confirmation
Typography

Type Scale

Inter as the sole typeface — neutral, engineered, legible at every size. Tight letter-spacing for headings, relaxed for body copy.

Display-lg Email for developers 48px / 1.2 / −0.04em
Display Ship faster 40px / 1.2 / −0.03em
Heading-lg Section heading 24px / 1.3 / −0.02px
Heading Subsection heading 20px / 1.3 / −0.02px
Body The best API to reach humans instead of spam folders 15px / 1.6 / 0
Body-sm Dense data, comparison rows, metadata 14px / 1.5 / 0
Caption Meta info · Status labels · Helper text 13px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 13–48px
Mono Inter Mono 400–500 · 13–14px · Code only
Fallback system-ui Platform default sans-serif
Layout

Spacing & Shapes

Base unit 4px. Compact density with generous vertical rhythm. 14-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

sm 4px
md 6px
lg 8px
xl 12px
full 9999px

Borders

Default
1px solid #eaeaea — cards, dividers, containers
Subtle
1px solid #f5f5f5 — soft separation, nested elements
Interactive
1px solid #000000 — hover states, active cards
Focus Ring
2px solid #000000 + 2px offset — keyboard focus
Elevation

Depth & Surfaces

No shadows — elevation is communicated through border contrast and background shifts. 4 surface levels on a white canvas.

Depth Levels

Pure White
Base page background — the canvas
Level 0
Ghost
Hover states, subtle background shifts
Level 1
Mist
Code blocks, secondary sections, table rows
Level 2
Card
Elevated panels, cards, modals
Level 3

Surface System

Pure White #ffffff
Ghost #fafafa
Mist #f5f5f5
Card #ffffff + border
Components

Button & Input Variants

Minimal component set — primary (Carbon Black), secondary (bordered), and ghost variants. Inputs use thin borders with focus rings.

Primary Button
Main call to action — highest visual weight
.btn-primary
Carbon Black (#000000) background, Pure White text, 6px radius, 10px 20px padding. Use exclusively for the single most important action.
Secondary Button
Supporting actions, navigation
.btn-secondary
Pure White background, Carbon Black text, 1px Cloud border. Hover adds subtle Ghost background and darker border.
Ghost Button
Tertiary actions, inline actions
.btn-ghost
Transparent background, Carbon Black text, 1px Cloud border. Hover tightens border to Carbon Black.
Input Field
Text entry, form inputs
input
Pure White background, 1px Cloud border, 6px radius. Focus state switches to 2px Carbon Black border.
Card
Content containers, feature blocks
.card
Email API
Send transactional emails with a few lines of code.
Pure White background, 1px Cloud border, 8px radius, 24px padding. Hover elevates border to Carbon Black. No shadows.
Code Block
Code snippets, API examples
.code-block
curl https://api.resend.com/emails \
  -H 'Authorization: Bearer re_123'
Mist (#f5f5f5) background, 1px Cloud border, 6px radius, 16px padding. Monospace at 13px with 1.6 line height.
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as the canvas for everything
  • Carbon Black (#000000) for all primary text and CTAs
  • Cloud (#eaeaea) for all default borders — barely visible
  • 1px thin borders consistently — no thick or decorative
  • Inter at weights 400–700 only
  • 4px-based spacing with generous vertical rhythm
  • Border contrast for elevation, never shadows
Don't — Avoid
  • Drop shadows or box shadows of any kind
  • Bright accent colors for backgrounds
  • Border radius larger than 12px
  • More than two font weights per component
  • Background gradients — flat color only
  • Decorative or illustrative imagery
  • Colored borders except focus/error states