---
name: resend-design-reference
provider: DesignSkill (https://designskill.dev)
reference: resend.com
source_url: https://resend.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T08:22:14.857Z
mode: full-render
classification: reference_only
---

# Resend — Design Reference (measured)

Measured design tokens extracted from `https://resend.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 721 observation records.
- Primary action color observed as `#00a3ff` (basis: cross-validated, confidence 0.95).
- Dominant font family: **inter** (×1832; secondary commitMono ×1272).
- Type scale observed at 8 sizes from 12px to 56px.
- Corner radius values in use: 16px, 6px, 8px, 4px….
- Not observed in this extraction: cards.

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#00a3ff` | cross-validated | 0.95 | ×18 |
| `{color.background}` | `#ffffff` | cross-validated | 0.94 | ×692 |
| `{color.ink}` | `#f6339a` | declared | 0.92 | ×0 — --color-pink-500 |
| `{color.muted}` | `#a1a4a5` | inferred | 0.7 | ×1423 |
| `{color.surface}` | `#f0f0f0` | inferred | 0.7 | ×808 |
| `{color.accent}` | `#ffc446` | inferred | 0.65 | ×42 |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#a1a4a5` | 23.7% | color, background-color | ×1423 (cross-validated, 0.95) |
| `#000000` | 11.6% | background-color, color, border-color, touch-action, text-shadow | ×699 (cross-validated, 0.94) |
| `#ffffff` | 11.5% | background-color, color, border-color, touch-action, --tw-gradient-from | ×692 (cross-validated, 0.94) |
| `#f1f7fe` | 7.8% | color | ×469 (observed, 0.79) |
| `#f0f0f0` | 13.4% | color, background-color, height, custom-property | ×808 (cross-validated, 0.95) |
| `#d6ebfd` | 12.1% | border-color, background-color, color | ×729 (observed, 0.8) |
| `#6c6c6c` | 5.1% | background-color, color | ×306 (cross-validated, 0.93) |
| `#464a4d` | 4.8% | color, background-color | ×288 (cross-validated, 0.93) |
| `#fcfdff` | 3.2% | color | ×192 (observed, 0.78) |
| `#ffc446` | 0.7% | border-color, color | ×42 (observed, 0.75) |
| `#505050` | 0.7% | touch-action | ×39 (inferred, 0.6) |
| `#d8f4f6` | 0.2% | background-color | ×14 (observed, 0.74) |
| `#00a3ff` | 0.3% | background-color, color | ×18 (cross-validated, 0.89) |
| `#70b8ff` | 0.2% | background-color, color, --tw-ring-color | ×12 (cross-validated, 0.89) |
| `#62ffb3` | 0.2% | background-color, color, --tw-gradient-from | ×11 (inferred, 0.59) |
| `#8354fe` | 0.2% | background-color | ×11 (observed, 0.74) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `inter` | ×1832 |
| `commitMono` | ×1272 |
| `aBCFavorit` | ×159 |
| `Helvetica` | ×43 |
| `domaine` | ×16 |

Use **inter** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 56px | ×36 |
| `{type.h1}` | 48px | ×18 |
| `{type.h2}` | 24px | ×23 |
| `{type.h3}` | 20px | ×78 |
| `{type.body-lg}` | 18px | ×44 |
| `{type.body}` | 16px | ×223 |
| `{type.body-sm}` | 14px | ×1900 |
| `{type.caption}` | 12px | ×988 |

The most frequently observed size is **14px** (×1900) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `24px` | ×735 |
| `2px` | ×668 |
| `16px` | ×472 |
| `8px` | ×466 |
| `4px` | ×401 |
| `12px` | ×199 |
| `6px` | ×196 |
| `48px` | ×157 |
| `32px` | ×143 |
| `96px` | ×98 |
| `10px` | ×36 |
| `64px` | ×22 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `16px` | ×426 |
| `6px` | ×340 |
| `8px` | ×181 |
| `4px` | ×118 |
| `24px` | ×60 |
| `10px` | ×43 |
| `12px` | ×18 |
| `20px` | ×4 |

## Elevation

| Shadow | Observed |
|---|---|
| `rgb(0, 0, 0) 0px 0px 0px 8px` | ×35 |
| `0px 0px 0px 8px rgba(0, 0, 0, 1)` | ×5 |
| `0 -2px 40px #00000010` | ×2 |
| `0 .25rem 1.25rem .125rem #0000002e` | ×2 |
| `0 0 4rem .5rem #ffffff0b,0 0 1rem .375rem #ffffff03` | ×2 |
| `20px 20px 20px #0003` | ×2 |

## Motion

| Duration | Observed |
|---|---|
| `0.2s` | ×190 |
| `.15s` | ×49 |
| `0.15s` | ×36 |
| `0.5s` | ×12 |
| `.2s` | ×8 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#00a3ff` · text `#ffffff` · radius `4px` · padding `12px 20px` · font `14px/600` | ×1 |
| button.outline | text `#a1a4a5` · border `1px solid rgba(0, 0, 0, 0)` · radius `16px` · padding `0px 16px` · font `14px` | ×4 |
| form.input | bg `#000000` · text `#f0f0f0` · border `0px solid rgb(240, 240, 240)` · radius `0px` · padding `0px` · height `1` | ×1 |
| badge | text `#f0f0f0` · radius `999px` · font `14px/400` · padding `5px 12px` | ×1 |
| nav | height `58px` · position `sticky` · link `#f0f0f0` | — |

### Hero Gradient (observed)

```css
background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%);
```

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| focus | box-shadow | `none` | `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(217, 237, 255, 0.25) 0px 0px 0px 1.98587px, rgba(0, 0, 0, 0) 0px 0px 0px 0px` |
| focus | outline-color | `rgb(161, 164, 165)` | `rgb(153, 200, 254)` |
| focus | outline-width | `3px` | `1px` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#a1a4a5` | `#000000` | 8.37 | pass | observed ×416 |
| `#f1f7fe` | `#000000` | 19.48 | pass | observed ×232 |
| `#f0f0f0` | `#000000` | 18.43 | pass | observed ×202 |
| `#ebeced` | `#000000` | 17.75 | pass | observed ×148 |
| `#464a4d` | `#000000` | 2.35 | fail | observed ×141 |
| `#6c6c6c` | `#000000` | 4 | fail | observed ×117 |
| `#fcfdff` | `#000000` | 20.63 | pass | observed ×96 |
| `#ababab` | `#000000` | 9.14 | pass | observed ×96 |
| `#ffffff` | `#000000` | 21 | pass | observed ×79 |
| `#a0a0a0` | `#000000` | 8.03 | pass | observed ×44 |
| `#ffc446` | `#000000` | 13.24 | pass | observed ×18 |
| `#46fea5` | `#000000` | 15.98 | pass | observed ×5 |
| `#f6339a` | `#ffffff` | 3.58 | fail | ink_on_background |
| `#ffffff` | `#00a3ff` | 2.73 | fail | white_on_primary |
| `#a1a4a5` | `#ffffff` | 2.51 | fail | muted_on_background |

5 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#00a3ff`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#f6339a`) on `{color.background}` (`#ffffff`).
- Set all text in `inter` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (16px, 6px, 8px, 4px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't assume the missing blocks (cards) don't exist on the site — they were simply not captured in this run.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://resend.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T08:22:14.857Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 01, 02, 03, 04, 05, 06, 08, 09, 10, 11, 12 · missing: cards
- Warning: primary 불일치: static=#eb7616 vs render=#00a3ff — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>