---
source: gallery_resend
---

# resend.com — Atmosphere

> Minimal dark developer tool with a pale sky-blue signature accent, crisp sans-serif type, and generous black negative space.

> Extracted by [Coherent](https://getcoherent.design) from `https://resend.com` on 2026-07-24 03:49:31 UTC.
> Mode: `dark` · captured in 9006ms · density: `comfortable`

<!-- coherent-extract: v1 -->

## Hero

**Detected via:** `largest-visible-text` (76.8px)

> Email reimagined. Available today.

## Color

| Token | Hex | Role | Usage |
|-------|-----|------|-------|
| `#f0f0f0` | ![#f0f0f0](https://placehold.co/16x16/f0f0f0/f0f0f0.png) | text | body text |
| `#fcfdff` | ![#fcfdff](https://placehold.co/16x16/fcfdff/fcfdff.png) | text | h4 text |
| `#a1a4a5` | ![#a1a4a5](https://placehold.co/16x16/a1a4a5/a1a4a5.png) | neutral | p text |
| `#000000` | ![#000000](https://placehold.co/16x16/000000/000000.png) | background | body background |
| `#d6ebfd` | ![#d6ebfd](https://placehold.co/16x16/d6ebfd/d6ebfd.png) | brand | button-secondary background |
| `#f0f0f0` | ![#f0f0f0](https://placehold.co/16x16/f0f0f0/f0f0f0.png) | text | button-primary text |

### Backgrounds

- **page** — `#000000`

## Typography

**Font families**

- inter
- ui-sans-serif
- system-ui
- sans-serif
- Apple Color Emoji
- Segoe UI Emoji

**Scale**

| Role | Size | Weight | Line height | Family |
|------|------|--------|-------------|--------|
| display | `96px` | 400 | `96px` | domaine |
| h1 | `56px` | 400 | `67.2px` | aBCFavorit |
| h2 | `20px` | 400 | `20px` | aBCFavorit |
| h3 | `18px` | 400 | `27px` | inter |
| h4 | `16px` | 400 | `24px` | inter |
| h5 | `14px` | 500 | `20px` | inter |
| body | `12px` | 400 | `16px` | inter |

## Spacing

Scale: `8px` · `12px` · `16px` · `20px` · `24px` · `32px` · `80px` · `96px`

## Radius

Scale: `0px` · `4px` · `6px` · `8px` · `10px` · `16px` · `24px`

## Shadows

- `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`
- `rgb(0, 0, 0) 0px 0px 0px 8px`

## Motion

| Duration | Easing | Property |
|----------|--------|----------|
| `200ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | color |
| `150ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | color |
| `200ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | all |
| `200ms` | `ease-out` | all |
| `200ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | border |
| `150ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | transform |

## Gradients

- **linear** — `linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.5))`
- **linear** — `linear-gradient(96.6979deg, rgba(2, 252, 239, 0.44) 0%, rgba(255, 181, 43, 0.44) 50%, rgba(160, 43, 254, 0.44) 100%)`
- **linear** — `linear-gradient(to top in oklab, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- **linear** — `linear-gradient(104deg, rgba(253, 253, 253, 0.05) 5%, rgba(240, 240, 228, 0.1) 100%)`
- **conic** — `conic-gradient(from 90deg, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 50%)`
- **radial** — `radial-gradient(rgba(200, 200, 200, 0.1) 0%, rgba(0, 0, 0, 0) 80%)`
- **linear** — `linear-gradient(to right bottom in oklab, rgb(146, 129, 247) 0%, rgb(154, 84, 220) 100%)`
- **linear** — `linear-gradient(oklab(0.999994 0.0000455678 0.0000200868 / 0.03) 0%, rgba(0, 0, 0, 0) 100%)`
- **linear** — `linear-gradient(in oklab, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- **linear** — `linear-gradient(in oklab, rgba(214, 235, 253, 0.19) 0%, rgba(211, 237, 248, 0.114) 100%)`

## Breakpoints

Strategy: `desktop-first`

| Name | Min/Max width |
|------|---------------|
| md | `600px` |

## Container widths

- **p** (prose) — `480px`
- **footer** (unspecified) — `calc(100% - 18px)`
- **section** (page) — `1280px`

## Borders

- `1px solid rgba(0, 0, 0, 0)`
- `2px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.05)`
- `1px solid #d9edff`
- `1px solid #d6ebfd`
- `1px solid #9281f7`
- `1px solid #d9edfe`
- `1px solid #ffffff`
- `1px solid #262a2d`

## Z-index scale

- **z-1** — `1`
- **z-10** — `10`
- **z-20** — `20`
- **footer** — `30`
- **z-40** — `40`

## Glassmorphism

`backdrop-filter: blur(25px)`

## Voice

Tone: `confident` · `developer-focused` · `direct`

- *(hero)* "Email reimagined. Available today."
- *(meta-description)* "The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale."
- *(body)* "Integrate tonight"
- *(body)* "Email fordevelopers"


---
Captured deterministically from computed CSS. Numerical fields (color, motion, spacing) reflect the live site at extraction time.