# Resend Design

Resend's design and brand system — our logo, typography, color palette, voice,
and product UI patterns. The interactive brand site lives at
https://resend.com/design.

## Get the Agent Skill

The brand guidelines are also maintained as an Agent Skill in
https://github.com/resend/design-skills. Install them with a single command:

```sh
npx skills add resend/design-skills
```

---

# Brand guidelines

## Core Colors

| Name         | Hex       |
| ------------ | --------- |
| Resend Black | `#000000` |
| Resend White | `#FDFDFD` |

### Semantic Colors

| Scale | Background  | Foreground  | Usage                                       |
| ----- | ----------- | ----------- | ------------------------------------------- |
| Gray  | `#16171AEB` | `#FDFEFFA6` | Structure, hierarchy, and subtle separation |
| Red   | `#FF173F2D` | `#FF9592`   | Critical states and irreversible actions    |
| Amber | `#FA820022` | `#FFCA16`   | Caution and pending states                  |
| Green | `#22FF991E` | `#46FEA5D4` | Success and completion                      |
| Blue  | `#0077FF3A` | `#70B8FF`   | Interactive and informational elements      |

## Typography

| Font                       | Role                                    |
| -------------------------- | --------------------------------------- |
| **Domaine Display Narrow** | Display headlines (never in product UI) |
| **Favorit**                | Headings & titles                       |
| **Inter**                  | Body text                               |
| **CommitMono**             | Code                                    |

### Typography Rules

- Use **sentence case** everywhere (headings, buttons, labels, navigation)
- Never use the Domaine font in bold
- Never use monospace for titles or body copy
- Never replace brand fonts with alternatives

### Typography Scale

**Display**
| Style | Font | Size/Line | Letter Spacing |
|-------|------|-----------|----------------|
| display/large | Domaine Display Narrow | 96/96 | -0.96px |
| title | Resend Favorit | 60/64 | -2.8px |
| small | Domaine Display Narrow | 72/72 | -0.77px |

**Body**
| Style | Font | Weight | Size/Line |
|-------|------|--------|-----------|
| xlarge | Resend Favorit | Regular | 24/32 |
| large | Inter | Regular/Medium | 18/28 |
| medium | Inter | Regular/Medium/Semi Bold | 16/24 |
| small | Inter | Regular | 14/20 |
| code | CommitMono | Regular | 14/20 |

## Logo

**Wordmark**

- `https://cdn.resend.com/brand/resend-wordmark-white.svg`
- `https://cdn.resend.com/brand/resend-wordmark-white.png`
- `https://cdn.resend.com/brand/resend-wordmark-black.svg`
- `https://cdn.resend.com/brand/resend-wordmark-black.png`

**Lettermark**

- `https://cdn.resend.com/brand/resend-icon-white.svg`
- `https://cdn.resend.com/brand/resend-icon-white.png`
- `https://cdn.resend.com/brand/resend-icon-black.svg`
- `https://cdn.resend.com/brand/resend-icon-black.png`

### Clearspace

Minimum clear space = 1/2 cap height on all sides

### Minimum Size

- Preferred: 24px height
- Extreme cases: 16px height minimum

### Logo Restrictions

Never: rotate, apply effects, outline, slant/stretch, use multiple colors, use low resolution, combine symbol+wordmark, modify proportions

## Cube Element

Secondary brand symbol. Never use as: primary logo, navigation element, or with modified geometry/colors.

## Gradients

| Name            | Value                                                                                                    |
| --------------- | -------------------------------------------------------------------------------------------------------- |
| Font gradient   | `linear-gradient(97deg, #ffffff 30%, rgba(255,255,255,0.50) 100%)`                                       |
| Smooth gradient | `linear-gradient(96deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.10) 100%)`                         |
| Border          | `linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%)`                        |
| Rainbow border  | `linear-gradient(90deg, rgba(2,252,239,0.44) 0%, rgba(255,181,43,0.44) 50%, rgba(160,43,254,0.44) 100%)` |

## Effects

| Name       | Value                         |
| ---------- | ----------------------------- |
| Glass blur | `backdrop-filter: blur(25px)` |

## Textures

- **Noise**: Hero backgrounds, atmospheric depth
  `https://resend.com/static/product-pages/noise.png`

## Backgrounds

Brand wallpapers available at: https://resend.com/wallpapers

## Design Principles

1. Dark-first design philosophy
2. Sharp contrast between black and light
3. Precision and focus over decoration
4. Accent colors communicate state, not style
5. Simple, stable, intentional forms