Resend Design System
Dark · Generated 17/04/2026 · Email for developers
v1.0.0
Color Palette
Background Colors
Black
#000000
White 2
#FFFFFF
Light Blue
#D9EFFF
Light Blue 2
#DDEAFF
Light Cyan 2
#DBF6FF
Blue 2
#6A7282
Dark Gray 8
#0B0E14
Cyan 4
#00FF9E
Blue 3
#8453FF
Blue 4
#0076FF
Orange 2
#FF9000
Red
#FF0039
Light Red 2
#FF6A6C
Yellow 2
#FFDD00
Cyan 5
#3BFFA7
Blue 6
#00A3FF
Green
#05DF72
Text Colors
Light Gray
#F0F0F0
White
#F8F8F8
Mid Gray
#A0A0A0
White 3
#F0F7FE
Mid Gray 2
#A1A4A5
Mid Gray 3
#ABABAB
Dark Gray
#464A4D
Mid Gray 4
#6C6C6C
Light Red
#FF8A88
Blue
#3EA2FF
Cyan
#3DD68C
Cyan 2
#39FFA5
Light Gray 2
#EBECED
Light Blue 3
#BBA5FF
Light Blue 4
#6ABAFF
Yellow
#FFC916
Mid Gray 5
#70757E
White 5
#E8F2FF
Border Colors
Dark Gray 7
#262A2D
Light Blue 5
#DBF1FF
Fill & Gradient Colors
Dark Gray 2
#141517
Dark Gray 3
#191B1E
Dark Gray 4
rgba(24,25,28,.88)
Light Cyan
rgba(215,239,248,.28)
Dark Gray 6
#1B1B1B
Black 2
#030303
Light Gray 5
#DDDDDD
Mid Gray 7
#777777
Mid Gray 8
#999999
Light Gray 6
#BBBBBB
Cyan 3
rgba(2,252,239,.44)
Orange
rgba(255,181,43,.44)
Purple
rgba(160,43,254,.44)
Dark Gray 9
#101010
Light Blue 6
#9B7CFF
Typography
Base Font · Inter
Inter
Send transactional emails at scale. The quick brown fox jumps over the lazy dog.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Mono Font · CommitMono
CommitMono
import { Resend } from 'resend'; const resend = new Resend(process.env.RESEND_API_KEY);
Regular · 400 Medium · 500
Email for devs
Display Hero · 96px · Semibold · line-height: 96px · letter-spacing: −2.8px
Build, ship, scale.
Display Large · 76.8px · Semibold · line-height: 76.8px · letter-spacing: −2.8px
The best way to reach humans
Display · 56px · Semibold · line-height: 67.2px · letter-spacing: −0.96px
Email infrastructure for modern apps
Heading Large · 24px · Semibold · line-height: 36px · letter-spacing: −0.8px
Send emails from your product in minutes
Heading · 20px · Medium · line-height: 33.6px · letter-spacing: −0.768px
Resend is the email API for developers. Connect in minutes, deliver reliably, scale effortlessly.
Body Large · 18px · Regular · line-height: 27px · letter-spacing: −0.768px
Built by engineers, for engineers. Focus on your product, not email infrastructure.
Body Default · 16px · Regular · line-height: 26px · letter-spacing: −0.768px
Track opens, clicks, and deliveries with real-time webhooks.
Body Small · 14px · Regular · line-height: 16.8px
Transactional · Marketing · Onboarding
Caption / Label · 12px · Medium · line-height: 16px · letter-spacing: 0.35px
Line Heights
Tight
14px
Snug
16px
Normal
16.8px
Relaxed
20px
Loose
22.4px
LH-6
24px
LH-7
26px
LH-8
27px
LH-9
33.6px
LH-10
36px
LH-11
67.2px
LH-12
76.8px
LH-13
96px
Letter Spacing
Resend
Tight
−2.8px · display heroes
Email for devs
Normal
−0.96px · headings
Build. Ship. Scale.
Wide
−0.8px · subheadings
Body copy
Wider
−0.768px · body text, buttons
LABEL TEXT
Widest
0.35px · uppercase labels
Spacing
Spacing Scale
Token scale — 1px → 488.148px
1
2
4
5
6
8
10
12
14
16
30
32
40
48
64
80
96
141.3
194.9
306.5
457.5
488.1
Borders
Border Radii
SM
0 8px 8px 0
MD
4px
LG
6px
XL
8px
2XL
8px 0 0 8px
Full
10px
R7
12px
R8
16px
R9
16px 16px 0 0
R10
24px
R11
pill
Border Widths
Hairline
1px · ×721
Thin
2px · ×16
Base
4px · ×156
Shadow / Elevation
Shadow Tokens
3 tokens — hard border, soft raise, inset highlight
Small
--shadow-sm
Solid 8px black border ring — creates visual separation on dark surfaces
Medium
--shadow-md
rgba(0,0,0,.1) 1px 3px · rgba(0,0,0,.1) 1px 2px −1px · elevated cards
Large
--shadow-lg
White 1px 1px inset — top-edge highlight for glass / frosted panels
Z-Index
TokenValueUsage
--z-11Base content layer
--z-210Sticky elements, navigation bar
--z-320Dropdowns, tooltips, popovers
--z-430Overlays, drawers, sidebars
--z-540Modals, dialogs
--z-650Top-level notifications, toasts
Breakpoints
📱
--breakpoint-xs
480px
Single responsive threshold — layouts adapt at 480px (mobile breakpoint)
Opacity
Opacity Tokens
5 tokens — 5% → 80%
--opacity-5
5%
--opacity-10
10%
--opacity-60
60%
--opacity-70
70%
--opacity-80
80%
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text TokenBackground TokenRatioRating
Light GrayBlack18.43:1AAA
Light GrayWhite 21.14:1Fail
Light GrayLight Blue1.04:1Fail
Light GrayLight Blue 21.07:1Fail
Light GrayLight Cyan 21.01:1Fail
WhiteBlack19.77:1AAA
WhiteWhite 21.06:1Fail
WhiteLight Blue1.11:1Fail
WhiteLight Blue 21.14:1Fail
WhiteLight Cyan 21.06:1Fail
Mid GrayBlack8.03:1AAA
Mid GrayWhite 22.61:1Fail
Mid GrayLight Blue2.21:1Fail
Mid GrayLight Blue 22.15:1Fail
Mid GrayLight Cyan 22.32:1Fail
White 3Black19.44:1AAA
White 3White 21.08:1Fail
White 3Light Blue1.1:1Fail
White 3Light Blue 21.12:1Fail
White 3Light Cyan 21.04:1Fail
Mid Gray 2Black8.37:1AAA
Mid Gray 2White 22.51:1Fail
Mid Gray 2Light Blue2.12:1Fail
Mid Gray 2Light Blue 22.07:1Fail
Mid Gray 2Light Cyan 22.23:1Fail
CSS Variables Reference
Background Colors
Black--color-black#000000
White 2--color-white-2#FFFFFF
Light Blue--color-light-blue#D9EFFF
Light Blue 2--color-light-blue-2#DDEAFF
Light Cyan 2--color-light-cyan-2#DBF6FF
Dark Gray 8--color-dark-gray-8#0B0E14
Cyan 4--color-cyan-4#00FF9E
Blue 3--color-blue-3#8453FF
Blue 4--color-blue-4#0076FF
Orange 2--color-orange-2#FF9000
Red--color-red#FF0039
Cyan 5--color-cyan-5#3BFFA7
Blue 6--color-blue-6#00A3FF
Green--color-green#05DF72
Text & Border Colors
Light Gray--color-light-gray#F0F0F0
White--color-white#F8F8F8
Mid Gray--color-mid-gray#A0A0A0
Mid Gray 2--color-mid-gray-2#A1A4A5
Mid Gray 3--color-mid-gray-3#ABABAB
Mid Gray 4--color-mid-gray-4#6C6C6C
Blue--color-blue#3EA2FF
Cyan--color-cyan#3DD68C
Cyan 2--color-cyan-2#39FFA5
Light Red--color-light-red#FF8A88
Light Blue 3--color-light-blue-3#BBA5FF
Yellow--color-yellow#FFC916
Dark Gray 7--color-dark-gray-7#262A2D
Light Blue 5--color-light-blue-5#DBF1FF
Typography
Base--font-family-baseinter
Serif--font-family-2domaine
Display--font-family-3aBCFavorit
Mono--font-family-4commitMono
System--font-family-5Helvetica
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Caption--font-size-2xs12px
Body SM--font-size-xs14px
Body--font-size-sm16px
Body LG--font-size-base18px
Heading--font-size-lg20px
Heading LG--font-size-xl24px
Display--font-size-2xl56px
Display LG--font-size-3xl76.8px
Hero--font-size-4xl96px
Tight--letter-spacing-tight−2.8px
Normal--letter-spacing-normal−0.96px
Wide--letter-spacing-wide−0.8px
Wider--letter-spacing-wider−0.768px
Widest--letter-spacing-widest0.35px
Spacing
Space 1--space-11px
Space 2--space-22px
Space 3--space-34px
Space 4--space-45px
Space 5--space-56px
Space 6--space-68px
Space 8--space-810px
Space 10--space-1012px
Space 12--space-1214px
Space 20--space-2016px
Space 40--space-4030px
Space 64--space-6432px
Space 80--space-8040px
Space 96--space-9648px
Space 160--space-16064px
Space 192--space-19280px
Space 256--space-25696px
Space 24--space-24141.3px
Space 30--space-30306.5px
Space 31--space-31457.5px
Space 32--space-32488.1px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base4px
SM--radius-sm0 8px 8px 0
MD--radius-md4px
LG--radius-lg6px
XL--radius-xl8px
2XL--radius-2xl8px 0 0 8px
Full--radius-full10px
R7--radius-r712px
R8--radius-r816px
R9--radius-r916px 16px 0 0
R10--radius-r1024px
R11 Pill--radius-r11≈∞
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow500ms
Slower--duration-slower600ms
Duration 6--duration-duration-61s
Ease In Out--easing-ease-in-outease-in-out
Ease Out--easing-ease-outease-out
Linear--easing-linearlinear
Ghost--opacity-55%
Faint--opacity-1010%
Dim--opacity-6060%
Muted--opacity-7070%
Strong--opacity-8080%
Base--z-11
Sticky--z-210
Dropdown--z-320
Overlay--z-430
Modal--z-540
Toast--z-650
Mobile--breakpoint-xs480px
Design System Preview · Resend (Dark) · Generated 17/04/2026