Resend

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/resend.com -->
<!-- Extracted: 2026-07-22T01:44:45.595Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Resend"
description: "Resend · Email for developers presents a professional web presence."
colors:
  primary: "#00a3ff"
  neutral: "#a1a4a5"
  surface: "#ffffff"
  border: "#d3edf8"
  surface-dark: "#000000"
  on-surface-dark: "#f0f0f0"
typography:
  display-lg:
    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-sm:
    fontFamily: "aBCFavorit"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "20px"
  body-md:
    fontFamily: "inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#a1a4a5"
    rounded: "16px"
    padding: "0px 16px"
    fontSize: "14px"
    fontWeight: "600"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#00a3ff"
    textColor: "#ffffff"
    rounded: "4px"
    padding: "12px 20px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#ffffff"
  button-secondary:
    backgroundColor: "#d3edf8"
    rounded: "3.35544e+07px"
    padding: "8px 6px 8px 12px"
    fontSize: "14px"
    fontWeight: "500"
    borderWidth: "1px"
---

# Resend — Design System

## Overview

Resend · Email for developers presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 10 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#00a3ff` | Deep Sky Blue |
| background | `#ffffff` | White |
| border | `#d3edf8` | Ice Blue |
| muted | `#a1a4a5` | Dark Silver |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| background | `#000000` | Black |
| text | `#f0f0f0` | White Smoke |
| secondary text | `#a1a4a5` | Dark Silver |
| link | `#f0f0f0` | White Smoke |
| muted | `#a1a4a5` | Dark Silver |

## Typography

Type is set in inter, domaine, aBCFavorit, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| inter | body | self-hosted | 400, 600 |
| domaine | heading | self-hosted | 400 |
| aBCFavorit | heading | self-hosted | 400 |
| commitMono | mono | self-hosted | 400 |
| aBCFavorit | body | self-hosted | 500 |
| Helvetica | body | system | 600 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | domaine | 96px | 400 | 96px | -0.96px |
| Heading 2 | aBCFavorit | 56px | 400 | 67.2px | -2.8px |
| Heading 4 | aBCFavorit | 20px | 400 | 20px | — |
| Body | inter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — commitMono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 1px 1px 0px inset` |

### Gradients

- `linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.5))`
- `linear-gradient(104deg, rgba(253, 253, 253, 0.05) 5%, rgba(240, 240, 228, 0.1) 100%)`
- `linear-gradient(oklab(0.999994 0.0000455678 0.0000200868 / 0.03) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(in oklab, rgba(214, 235, 253, 0.19) 0%, rgba(211, 237, 248, 0.114) 100%)`
- `linear-gradient(in oklab, rgba(216, 244, 246, 0.035) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(to top in oklab, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, rgb(0, 0, 0) 100%)`

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 8px
- `lg` — 16px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#a1a4a5`
- Radius — `16px`
- Padding — `0px 16px`
- Font size — `14px`
- Font weight — `600`
- Sample copy — "Log in"

**Primary**

- Background — `#00a3ff`
- Text — `#ffffff`
- Radius — `4px`
- Padding — `12px 20px`
- Font size — `14px`
- Font weight — `600`
- Border — ` solid #ffffff`
- Sample copy — "Get Started"

**Secondary**

- Background — `#d3edf8`
- Radius — `3.35544e+07px`
- Padding — `8px 6px 8px 12px`
- Font size — `14px`
- Font weight — `500`
- Sample copy — "Send with Next.js"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/resend.com) | 100% |
| favicon | — | ico | [link](brands/resend.com/logo-0.ico) | 95% |
| favicon | — | ico | [link](brands/resend.com/logo-1.ico) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-5.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-6.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-7.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-8.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-9.png) | 95% |
| favicon | — | png | [link](brands/resend.com/logo-10.png) | 95% |

## Sources

- Official brand guidelines — https://resend.com/brand
- Live brand page — https://extractvibe.com/brand/resend.com
- Raw JSON — https://extractvibe.com/api/brand/resend.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/resend.com/design.md
- Extracted — 2026-07-22T01:44:45.595Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md