Resend

Resend

Email API for developers

An email-sending API for developers, presented through a minimal dark theme with monospace accents.

resend.com

Color palette

Accent

Primary#fcfdff

Primary brand color — key actions and emphasis.

Primary On#000000

Accent color used within the product's own UI.

Mute#a1a4a5

Accent color used within the product's own UI.

Ash#888e90

Accent color used within the product's own UI.

Stone#464a4d

Accent color used within the product's own UI.

Accent Orange#ff801f

Accent color used within the product's own UI.

Accent Yellow#ffc53d

Accent color used within the product's own UI.

Accent Blue#3b9eff

Accent color used within the product's own UI.

Accent Green#11ff99

Accent color used within the product's own UI.

Accent Red#ff2047

Accent color used within the product's own UI.

Neutral

Ink#fcfdff

Primary text color.

On Light#000000

Accent color used within the product's own UI.

Canvas#000000

Page background.

Surface Card#0a0a0c

Card and panel surfaces.

Surface Elevated#101012

Card and panel surfaces.

Surface Deep#06060a

Card and panel surfaces.

Link#3b9eff

Primary text color.

Surface Light#f1f7fe

Card and panel surfaces.

Type scale

Display Xxl
96px · 400 · 1
Display Xl
76.8px · 400 · 1
Display Lg
56px · 400 · 1.2
Heading Md
24px · 500 · 1.5
Heading Sm
20px · 500 · 1.3
Subtitle
20px · 400 · 1.3
Body Lg
18px · 400 · 1.5
Body Md
16px · 400 · 1.5
Body Sm
14px · 400 · 1.43
Button Md
14px · 500 · 1.43
Button Sm
14px · 500 · 1.43
Caption Emph
14px · 600 · 1
Code Md
13px · 400 · 1.6
Caption
12px · 400 · 1.5

Fonts

PrimaryInterWeights 400, 500
SecondaryABC FavoritWeights 400, 500
SecondaryDomaine DisplayWeights 400
SecondaryHelveticaWeights 600
CodeGeist MonoWeights 400

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
24px
Xxl
32px
Xxxl
48px
Section
96px
Band
128px
None
0px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Full
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Inter, ABC Favorit, Domaine Display, Helvetica, Geist Mono).
  • Use one of the documented corner radii (0px, 4px, 6px, 8px, 12px, 16px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 96px, 128px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.