---
version: alpha
name: "resend.com"
description: "Design system extracted from https://resend.com/ on 2026-10-28"
colors:
  background: "#000000"
  surface: "#0b0e14"
  surface-2: "#041e12"
  surface-3: "#211100"
  foreground: "#a1a4a5"
  muted-foreground: "#6e727a"
  primary: "#00a3ff"
  on-primary: "#111111"
  secondary: "#eb5c5d"
  border: "#292d30"
typography:
  headline-display:
    fontFamily: "domaine"
    fontSize: "96px"
    fontWeight: 400
    lineHeight: "96px"
    letterSpacing: "-0.96px"
  headline-lg:
    fontFamily: "aBCFavorit"
    fontSize: "56px"
    fontWeight: 400
    lineHeight: "67.2px"
    letterSpacing: "-2.8px"
  headline-md:
    fontFamily: "aBCFavorit"
    fontSize: "20px"
    fontWeight: 400
    lineHeight: "20px"
  body-md:
    fontFamily: "inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "22.4px"
  label-md:
    fontFamily: "commitMono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
  button:
    fontFamily: "inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "20px"
  code:
    fontFamily: "commitMono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "16px"
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 2445 rendered elements at 1440px wide on 2026-10-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/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `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
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Get started"), rest
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("What you missed at Resen"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("What you missed at Resen"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("What you missed at Resen"), focus
- `screenshots/c-link-1--active.png`: Text link 1 ("What you missed at Resen"), active
- `screenshots/c-combobox-1--rest.png`: Combobox / custom select 1 ("delivereddelivered@resen"), rest
- `screenshots/c-combobox-1--focus.png`: Combobox / custom select 1 ("delivereddelivered@resen"), focus

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#000000` | Page background |
| surface | `#0b0e14` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#041e12` | Secondary surface |
| surface-3 | `#211100` | Secondary surface |
| foreground | `#a1a4a5` | Primary text |
| muted-foreground | `#6e727a` | Secondary text, captions |
| primary | `#00a3ff` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| 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`, `#041e12`, `#1f2225`, `#00a3ff`, `#211100`.

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; verify availability and permission; **Inter** is the suggested stand-in.
- **aBCFavorit** for h2, h3: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **inter** for body, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **commitMono** for label, code: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

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

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

The hero heading (h1) renders at 96px / 400, left aligned, up to 480px wide, tracking -0.96px. Sample: "Email fordevelopers".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## 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.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (33 of 87 in the checklist, 54 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 6 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | filled lg, filled, filled-with-icon sm, primary, outline | rest only | "Get started" |
| Icon button | outline | focus, disabled |  |
| Text link | plain, plain, plain | hover, focus, active | "What you missed at Resend Forw" |
| Text input | outlined-icon-right | rest only |  |
| Combobox / custom select | outlined lg | focus | "delivereddelivered@resend.dev" |
| Checkbox | native | rest only |  |
| Switch / toggle | custom | rest only |  |
| Header / navbar | default | rest only | "Open main menuFeaturesCompanyE" |
| Navigation link | plain, plain | rest only | "Pricing" |
| Menu / dropdown trigger | ghost | rest only | "Features" |
| Tabs | plain, plain | rest only | "Node.jsServerlessRubyPythonPHP" |
| Footer | default | rest only | "2261 Market Street #5039San Fr" |
| Footer link | plain | rest only | "Automations" |
| Social icon links | default | rest only |  |
| Theme toggle | default | rest only | "DNSBLs" |
| Badge / pill / tag | neutral-square, success-square, info-square, brand-square, warning-square, danger-square, neutral-square, inverse-pill | rest only | "melia@figma.com" |
| Counter / notification dot | success-filled | rest only |  |
| Card | filled-with-media | rest only | "Welcome to ACME, user!Hello St" |
| Feature item (icon + title + text) | flat | rest only | "Test modeSimulate events and e" |
| Styled list | default | rest only | ""Our team loves Resend. It mak" |
| List row / menu row | outlined | rest only | ""The best part about taking Re" |
| Table | default, default | rest only | "Welcome to ACME, user!Hello St" |
| Table row | default | rest only | "Welcome to ACME, user!Hello St" |
| Avatar | 40px-round | rest only |  |
| Code block / inline code | block, block | rest only | "HTTP 200:" |
| Blockquote | default | rest only | "Resend is transforming email f" |
| Image / figure | aspect-1.6, aspect-2.34-rounded, aspect-3.09 | rest only |  |
| Video / media embed | default | rest only |  |
| Icon | outline-24px, outline-16px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Radio, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Pricing card / plan, Testimonial / quote card, Stat / metric, Accordion / disclosure, Avatar stack, Divider, Keyboard key, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## 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 | `#fdfdfd` | `#000000` |
| surface | `#d7d7de` | `#0b0e14` |
| surface-2 | `#e7f4e7` | `#041e12` |
| surface-3 | `#f2eefc` | `#211100` |
| foreground | `#191919` | `#a1a4a5` |
| muted-foreground | `#4d4d4d` | `#6e727a` |
| 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`

## 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.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Card grids: 6 columns → 2 columns on phones (gap normal 16px → normal 16px).
- Body text is 16px at the sampled desktop and phone widths.
- 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.
- No scroll-reveal: content is visible without scrolling into view.

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

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#00a3ff` where supported by measured component or regional evidence; its accent role is inferred.
- 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.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.