---
site: Resend · Email for developers
url: "https://resend.com"
generated_at: "2026-06-25T08:26:02.770Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
library: shadcn/ui
tokens:
  colors:
    primary: "#d6ebfd"
    secondary: "#00a3ff"
    accent: "#44ffa4"
    background: "#000000"
    foreground: "#ffffff"
  typography:
    sans: inter
    mono: commitMono
    base: 12
  spacing:
    base: 2
    scale: "[1, 20, 24, 28, 40, 48, 62, 80, 96, 104]"
  radii:
    sm: 4
    md: 8
    lg: 16
    xl: 24
  shadows:
    sm: "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"
---

# Overview

A **landing** page (heuristic confidence 0.31), dressed in **flat** material.

Component library appears to be **shadcn/ui** (0.65).

> "Email for
developers"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **tight**.

Reading order detected on the source: `feature-grid → hero → content → hero → nav → footer → testimonial → hero → content → testimonial → nav → sidebar → hero → feature-grid → testimonial → cta → footer → content`.

Source: <https://resend.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#d6ebfd` | 121 |
| secondary | `#00a3ff` | 1 |
| accent | `#44ffa4` | 78 |
| background | `#000000` | — |
| foreground | `#ffffff` | — |

**Neutrals:** `#f0f0f0` · `#a1a4a5` · `#ffffff` · `#f1f7fe` · `#464a4d`

**Total unique colors detected:** 28.

# Typography

**Families**
- `inter` · 2021 uses
- `commitMono` · 814 uses
- `aBCFavorit` · 31 uses
- `Helvetica` · 25 uses

**Body size:** `12px` / line-height `16px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `96px` | `400` | `96px` |
| h2 | `76.8px` | `400` | `76.8px` |
| h3 | `56px` | `400` | `67.2px` |
| h4 | `24px` | `400` | `33.6px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `20px` · `24px` · `28px` · `40px` · `48px` · `62px` · `80px` · `96px` · `104px`

**Layout primitives:** 7 grid containers · 463 flex containers.

**Breakpoints:** `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `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`
- `sm` — `rgb(0, 0, 0) 0px 0px 0px 8px`
- `sm` — `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(176, 199, 217, 0.145) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- `sm` — `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`

**Z-index layers:** 7

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `lg` — `12px`
- `lg` — `16px`
- `xl` — `24px`

# Components

**Detected patterns:** `buttons` · `inputs` · `links` · `navigation` · `footer` · `modals` · `tables` · `badges` · `tabs` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | outline | sm, lg, md | 51 |

# Do's and Don'ts

**Do's**
- Use `get`, `node`, `user` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **tight** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 6 font families — consider limiting to 2 (heading + body).
- Don't 551 !important rules — prefer specificity over overrides.
- Don't 7113 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://resend.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._