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

Neutral Palette

Token	Hex	Usage
color-gray-900	#111111	Surface background
color-gray-700	#333333	Borders
color-gray-500	#666666	Secondary text
color-gray-200	#CCCCCC	Disabled states
color-white	#FFFFFF	Primary text

Semantic Colors

Token	Hex	Usage
color-success	#00C16A	Delivery success, sent state
color-error	#FF4444	Bounce, failed delivery
color-warning	#F59E0B	Rate limit warnings

Typography

Role	Family	Size	Weight	Line Height
Display	Inter	56px	700	1.1
Heading	Inter	36px	600	1.2
Body	Inter	16px	400	1.6
Small	Inter	14px	400	1.5
Code	Geist Mono	14px	400	1.6

Spacing

Token	Value	Usage
space-1	4px	Icon gaps
space-2	8px	Compact spacing
space-4	16px	Card padding
space-6	24px	Section gaps
space-8	32px	Page sections

Border Radius

Token	Value	Usage
radius-sm	4px	Tags, badges
radius-md	6px	Buttons, inputs
radius-lg	8px	Cards, panels

Elevation

Level	Value	Usage
shadow-sm	0 1px 3px rgba(0,0,0,0.4)	Cards
shadow-md	0 4px 16px rgba(0,0,0,0.5)	Dropdowns

Components

Email Preview

• Code-style email template preview
• Tabs: React / HTML / Plain Text
• Send test button in green

API Key Card

• Black card, #333 border
• 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