## Color Palette

Black canvas, off-white text, six atmospheric accent glows. White (`{colors.primary}`) is the brand's actual accent — the brightest pixel on the canvas.

Brand & Accent

Primary White

#fcfdff

Primary CTA, hero text, brightest pixel.

Surface Light

#f1f7fe

CTA pressed state.

Primary On

#000000

Label on white CTA.

Surface

Canvas

#000000

Default page background.

Surface Card

#0a0a0c

Feature cards, inputs.

Surface Elevated

#101012

Featured tier, ghost button.

Surface Deep

#06060a

Code wells.

Text

Ink

#fcfdff

Primary text on canvas.

Body

rgba(252,253,255,0.86)

Long-form body.

Charcoal

rgba(252,253,255,0.7)

Captions.

Mute

#a1a4a5

Inactive labels.

Ash

#888e90

Footer text.

Stone

#464a4d

Disabled foreground.

Atmospheric Accents

Accent Orange

#ff801f

Inline highlight (glow only).

Accent Yellow

#ffc53d

Inline highlight, traffic-light dot.

Accent Blue

#3b9eff

Inline link, blue glow section.

Accent Green

#11ff99

Status dot, success glow.

Accent Red

#ff2047

Error inline, red glow.

Orange Glow

rgba(255,89,0,0.22)

Atmospheric backdrop only.

Blue Glow

rgba(0,117,255,0.34)

Atmospheric backdrop only.

Green Glow

rgba(34,255,153,0.18)

Atmospheric backdrop only.

## Typography

Domaine Display for hero serifs, ABC Favorit for body, Inter for UI, Geist Mono for code. DM Serif Display + Inter substitute when proprietary families aren't available.

display-xxl96 · 400 · 1.0 · -0.96px · ss01/04/11
Email reimagined
display-xl76.8 · 400 · 1.0 · -0.768px
First-class developer experience
display-lg56 · 400 · 1.2 · -2.8px (ABC Favorit)
Available today
heading-md24 · 500 · 1.5 · -0.4px
Despite emails using React
subtitle20 · 400 · 1.3
A complete email platform for developers and teams.
body-md16 · 400 · 1.5 · -0.8px (Favorit)
Marketing prose carries the editorial cadence — confident sentences with print-magazine pacing.
body-sm14 · 400 · 1.43
Captions, metadata, and small inline copy beneath cards.
button-md14 · 500 · 1.43
Get started
button-sm14 · 500 · 1.43 · 0.35px (Favorit)
Read the docs
caption12 · 400 · 1.5
© Resend 2026 — design system catalogue.
code-md13 · 400 · 1.6 · mono
resend.emails.send({ to, subject, html })

## Buttons

A small white pill is the brand's CTA. Ghost and outline variants take secondary roles. All buttons use `rounded.md` (8px).

## Feature Cards

A 3-up grid of feature cards using `surface-card` background, `hairline-strong` border, and `rounded.lg` (12px) corners.

### Despite emails using React

Build, test, and deploy email templates with the same component model as the rest of your stack.

### So beyond editing

Visual editing, version history, and A/B variants — without leaving the developer workflow.

### Reach humans, not spam folders

Deliverability infrastructure managed for you, with detailed reports per recipient.

## Atmospheric Glows

Six accent colours used only as low-opacity radial atmospheric washes anchored at section openings. Never as solid surfaces.

accent-orange-glow
accent-blue-glow
accent-green-glow
accent-red-glow
accent-yellow-glow
slate-glow

## Pricing Tiers

3-up grid; centre tier uses `surface-elevated` (one luminance step up) instead of a colour change to mark "recommended".

Free

$0 / month

- 3,000 emails per month
- 1 custom domain
- Community support

Pro

$20 / month

- 50,000 emails per month
- 10 custom domains
- Priority support

Enterprise

Custom

- Dedicated IP pool
- SOC 2 + SSO
- Account manager

## Code Window

Surface-deep background with traffic-light chrome and a Geist Mono body. Tab strip pinned just below the chrome.

    // Send your first email in seconds.
    import { Resend } from 'resend';

    const resend = new Resend('API_KEY');

    await resend.emails.send({
      from: 'sender@example.com',
      to:   'recipient@example.com',
      subject: 'Welcome',
      html: '<p>Body</p>',
    });

## Email Mockup

A single white card centred in the dark canvas — the only deliberately-light surface in the system. Reads like a print pull-quote.

From: Sender Name <sender@example.com>

Your weekly digest

Hi recipient,

This is a placeholder email body. The mockup demonstrates the rendered output of an email template inside the otherwise dark Resend canvas.

— The Team

## Form Elements

Compact 40px inputs on `surface-card` with translucent-white borders.

Email
Domain
Notes
Beta Operational

## Spacing Scale

A 4px base, with `section: 96px` and `band: 128px` driving the editorial dark rhythm.

xxs · 2
xs · 4
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
xxxl · 48
section · 96
band · 128

## Border Radius

Buttons round at 8px, cards at 12px, pills go full.

none · 0
xs · 4
sm · 6
md · 8
lg · 12
xl · 16
full · pill

## Elevation & Depth

Translucent-white borders carry depth. Code wells use the deepest surface to suggest temperature change.

Level 0 — Canvas
Level 1 — Card
Level 2 — Elevated
Level 3 — Deep

## Responsive Behavior

Six breakpoints from desktop XL (≥1440) to small mobile (≤425). Hero clamps from 96px to 44px across the ladder.

Breakpoint | Width | Key Changes
--- | --- | ---
Desktop XL | ≥ 1440px | 3-up feature grid, side-by-side code-story splits, max content 1200.
Desktop | 1280–1439px | Container shrinks; xl side padding.
Tablet Large | 1024–1279px | Feature grid stays 3-up; code-story remains 2-up.
Tablet | 768–1023px | Feature grid 2-up; code-story stacks; pricing stacks vertically.
Mobile Large | 426–767px | Feature grid 1-up; nav hamburger; hero clamps to 56px.
Mobile | ≤ 425px | All grids 1-up; hero 44px; section padding 64px.

390
600
800
1024
1280
1440