Design system resend.com

---
version: alpha
name: "resend.com"
description: "Design system extracted from https://resend.com/ on 2026-09-28"
colors:
  background: "#000000"
  surface: "#0b0e14"
  surface-2: "#211100"
  surface-3: "#041e12"
  foreground: "#a1a4a5"
  muted-foreground: "#f0f0f0"
  primary: "#00a3ff"
  on-primary: "#111111"
  secondary: "#eb5c5d"
  border: "#292d30"
typography:
  headline-display:
    fontFamily: "domaine"
    fontSize: "96px"
    fontWeight: 400
    lineHeight: "1"
    letterSpacing: "-0.96px"
  headline-lg:
    fontFamily: "aBCFavorit"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "1.2"
    letterSpacing: "-2.8px"
  headline-md:
    fontFamily: "aBCFavorit"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "1"
  body-md:
    fontFamily: "inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.6"
  label-md:
    fontFamily: "commitMono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
  button:
    fontFamily: "inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.43"
  code:
    fontFamily: "commitMono"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1.5"
rounded:
  none: "0px"
  sm: "4px"
  xl: "16px"
  full: "9999px"
  md: "6px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "96px"
components:
  button-ghost:
    backgroundColor: "#000000"
    textColor: "#a1a4a5"
    typography: "{typography.button}"
    rounded: "0px"
    height: "58px"
    padding: "4px 12px"
  button-secondary:
    backgroundColor: "#000000"
    textColor: "#a1a4a5"
    typography: "{typography.button}"
    rounded: "16px"
    height: "40px"
    padding: "0px 16px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "4px"
    height: "41px"
    padding: "12px 20px"
  card:
    backgroundColor: "transparent"
    rounded: "16px"
    padding: "24px"
---

# resend.com

## Overview

Resend · Email for developers: The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale.

Sharp, squared-off controls, layered shadows for depth, large display type at 96px / 400, a single blue accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 2410 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/desktop-1440-light.png`: Desktop 1440, light mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#000000` | Page background |
| surface | `#0b0e14` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#211100` | Secondary surface |
| surface-3 | `#041e12` | Secondary surface |
| foreground | `#a1a4a5` | Primary text |
| muted-foreground | `#f0f0f0` | Secondary text, captions |
| primary | `#00a3ff` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| secondary | `#eb5c5d` | Secondary accent (orange) |
| border | `#292d30` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#000000`, `#ffffff`, `#292d30`, `#0b0e14`, `#1f2225`, `#211100`, `#00a3ff`, `#041e12`.

Gradients in use: `linear-gradient(rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0) 100%, rgb(0, 0, 0) 100%)`; `linear-gradient(rgba(80, 80, 80, 0.15) 0%, rgba(0, 0, 0, 0) 70%)`; `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%)`.

The accent `#00a3ff` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **domaine** for h1: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **aBCFavorit** for h2, h3: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **inter** for body, button: Google Fonts (inter).
- **commitMono** for label, code: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | domaine | 96px | 400 | 1 | -0.96px |
| headline-lg | aBCFavorit | 56px | 400 | 1.2 | -2.8px |
| headline-md | aBCFavorit | 20px | 400 | 1 | normal |
| body-md | inter | 14px | 400 | 1.6 | normal |
| label-md | commitMono | 12px | 400 | 1.33 | normal |
| button | inter | 14px | 400 | 1.43 | normal |
| code | commitMono | 16px | 400 | 1.5 | normal |

Type scale in use: 12px, 14px, 16px, 18px, 20px, 56px, 77px, 96px. Base body size 14px.

The H1 renders at 96px / 400, left aligned, up to 480px wide, tracking -0.96px. Sample: "Email fordevelopers".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 96 (px).
- Flex and grid gaps: 4, 8, 12, 16, 32, 48 px.
- Content max width: 1280px, centred.
- Breakpoints: 640px, 768px, 1024px, 1280px, 1536px.
- Header: 58px tall, sticky, background `rgba(0, 0, 0, 0)`; 4 nav links at 16px / 400 (Pricing · Log in · Get started).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(24, 25, 28, 0.88) 0px 0px 0px 1px`
- shadow-2: `rgb(0, 0, 0) 0px 0px 0px 8px`
- shadow-3: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- shadow-4: `rgb(255, 255, 255) 0px 1px 1px 0px inset`

## Shapes

- Buttons: 4px
- Inputs: 0px
- Cards and panels: 16px
- Images and media: 9999px
- Radius scale: none 0px, sm 4px, xl 16px, full 9999px, md 6px

## Components

### Button, ghost

Background transparent (it sits on `#000000`, so place it on that colour), text `#a1a4a5`, border none, radius 0px, height 58px, padding 4px 12px, 14px / 500. Sample label: "Features".

### Button, secondary

Background transparent (it sits on `#000000`, so place it on that colour), text `#a1a4a5`, border 1px solid transparent, radius 16px, height 40px, padding 0px 16px, 14px / 600. Sample label: "Log in".

### Button, primary

Background `#00a3ff`, text `#ffffff`, border none, radius 4px, height 41px, padding 12px 20px, 14px / 600. Sample label: "Get Started".

### Card

Background `transparent`, border 1px solid #d9edfe25, radius 16px, padding 24px, no shadow. Typical size about 450×219px.

### Link

Colour `#a1a4a5`, no underline at rest, weight 500.

## Dark Mode

Both themes exist; the default render is dark and the light theme was reached via class light. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#000000` | `#000000` |
| surface | `#0b0e14` | `#0b0e14` |
| foreground | `#191919` | `#a1a4a5` |
| muted-foreground | `#4d4d4d` | `#f0f0f0` |
| primary | `#00a3ff` | `#00a3ff` |
| on-primary | `#111111` | `#111111` |
| secondary | `#dc3d41` | `#eb5c5d` |
| border | `#d7d7de` | `#292d30` |

Light-theme shadows: `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`; `rgb(0, 0, 0) 0px 0px 0px 8px`; `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`; `rgb(255, 255, 255) 0px 1px 1px 0px inset`

The light pass changed the page but the result still reads as dark; check the light screenshot.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px | 168px | 16px | 96px, 2 lines, left | 58px, 3 links | media above text | 6→6 col; 6→6 col; 2→1 col | 1 full-width |
| laptop 1024px | 976px | 88px | 16px | 96px, 2 lines, left | 58px, 3 links | media above text | 6→6 col; 6→6 col; 2→1 col | 1 full-width |
| tablet 768px | 720px | 24px | 16px | 96px, 2 lines, left | 58px, 2 links | media above text | 6→3 col; 6→3 col; 2→1 col | 1 full-width |
| phone 390px | 342px | 24px | 16px | 64px, 2 lines, center | 0px, 0 links | media above text | 2→1 col; 6→2 col; 2→1 col | 1 full-width |

- H1 goes 96px → 64px (67%), 2 → 2 lines.
- Nav never collapses to a hamburger (0 links still visible at 390px).
- Card grids: 6 columns → 2 columns on phones (gap normal 16px → normal 16px).
- Body text stays 16px at every width.
- Phone side gutter 24px.
- 1 buttons stretch full-width on phones.
- Section top padding 96px → 48px.

## Interaction & Motion

135 elements carry transitions; typical 0.2s with cubic-bezier(0.4, 0, 0.2, 1), mostly on opacity, color, background-color. 6 running keyframe animations (scroll-x 180s infinite; header-slide-down-fade 1s 1; hero-text-slide-up-fade 1s 1).

- Hover on button-secondary ("Log in"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.2s | cubic-bezier(0.4, 0, 0.2, 1).
- Hover on nav-link ("Pricing"): no visible change; cursor pointer; transition color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events | 0.15s | cubic-bezier(0.4, 0, 0.2, 1).
- Tooltip triggers exist (11 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- Hover/click menus: below the trigger, 12px gap, centered on trigger; transparent, radius 0px, padding 0px 0px, shadow none; appears instantly (no fade); removed instantly on leave.
- 10 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#00a3ff` for actions and focus; never paint large areas with it.
- Do keep body text at 14px in inter and headings in domaine.
- Do match corner radii per element class (buttons 4px, cards 16px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.