Resend design system

What font does Resend use?

Resend’s website uses Domaine for headings and commit Mono for body text. Domaine is not on Google Fonts; the closest free match is Newsreader; commit Mono is not on Google Fonts; the closest free match is JetBrains Mono.

Resend colour palette

Resend’s home page is dark (#000000 background, #F0F0F0 text) and uses #D6EBFD for its main actions. Its palette: #000000, #F0F0F0, #A1A4A5, #FFFFFF, #FCFDFF, #F1F7FE.

• #000000
  89.5% · backgrounds
• #F0F0F0
  2.7% · text
• #A1A4A5
  2.4% · text
• #FFFFFF
  2.1% · backgrounds, drawings
• #FCFDFF
  0.5% · text
• #F1F7FE
  0.4% · text
• #FF0000
  0.4% · drawings
• #0064FF
  0.4% · drawings
• #00FF00
  0.4% · drawings
• #EBECED
  0.3% · text

Type scale

Each size the page sets text in, with its weight and line height. Resend’s largest type is 96px at weight 400.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px, 80px.

Corner radii: 4px, 6px, 8px, 10px, 12px, 16px, pill. 4 shadow levels measured.

What makes Resend look like Resend

Almost entirely neutral: 99% of the page is painted in #000000 and #FFFFFF.

#FF0000 is an accent: 0.4% of the page, used for drawings only. Don't fill large areas with it.

#0064FF is an accent: 0.4% of the page, used for drawings only. Don't fill large areas with it.

The largest type (96px domaine) is regular weight, not bold (400), tracked to -0.01em.

Resend DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Resend’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Resend’s product, so use your own name, words and images.

Download Resend DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Resend’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=inter:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400&display=swap");

:root {
  --color-background: #000000; /* Background */
  --color-surface: #0B0E14; /* Surface */
  --color-text: #F0F0F0; /* Text */
  --color-text-muted: #A1A4A5; /* Text muted */
  --color-border: #262A2D; /* Border */
  --color-action: #D6EBFD; /* Action */
  --color-on-action: #000000; /* On action */
  --color-positive: #00C951; /* Positive */
  --color-negative: #FF9592; /* Negative */
  --color-warning: #FFC446; /* Warning */
  --color-ffffff: #FFFFFF; /* 2.1% of the page, as fills */
  --color-ff0000: #FF0000; /* 0.4% of the page, as drawings */
  --color-0064ff: #0064FF; /* 0.4% of the page, as drawings */
  --color-00ff00: #00FF00; /* 0.4% of the page, as drawings */
  --font-body: "commitMono", "JetBrains Mono", monospace; /* commitMono on the site; JetBrains Mono renders */
  --font-interface: inter, sans-serif; /* inter */
  --font-display: domaine, "Newsreader", sans-serif; /* domaine on the site; Newsreader renders */
  --type-display-large: 96px; /* Display Large, weight 400 */
  --type-display-large-leading: 96px;
  --type-display-large-tracking: -0.01em;
  --type-display-medium: 76.8px; /* Display Medium, weight 400 */
  --type-display-medium-leading: 76.8px;
  --type-display-medium-tracking: -0.01em;
  --type-display-small: 56px; /* Display Small, weight 400 */
  --type-display-small-leading: 67.2px;
  --type-display-small-tracking: -0.05em;
  --type-headline: 24px; /* Headline, weight 500 */
  --type-headline-leading: 36px;
  --type-title-large: 20px; /* Title Large, weight 400 */
  --type-title-large-leading: 20px;
  --type-title-small: 18px; /* Title Small, weight 400 */
  --type-title-small-leading: 27px;
  --type-body-large: 16px; /* Body Large, weight 600 */
  --type-body-large-leading: 24px;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: 22.4px;
  --type-label: 12px; /* Label, weight 400 */
  --type-label-leading: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-26: 104px;
  --space-36: 144px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;

How this was measured

PikSpec’s scanner read the resend.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Resend is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Resend.

Similar dark designs: Aesop · Bolt · Descript · DigitalOcean · Discord · Framer

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.