Typography
scale ratio 1.398- Intercss: Inter Websitebody400 500 60044%
- ABC Favoritcss: aBCFavoritdisplay40026%
- Commit Monocss: Commit Mono Websitemono40017%
- Domainecss: domaineother40011%
- Helveticaother400 600 7002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Domaine | 96px | 400 | 1 | -0.01em |
| headline | ABC Favorit | 56px | 400 | 1.2 | -0.05em |
| title | ABC Favorit | 20px | 400 | 1 | 0em |
| body | Inter | 18px | 400 | 1.5 | 0em |
| body-sm | Inter | 14px | 400 | 1 | 0em |
| mono | Commit Mono | 12px | 400 | 1.333 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa20Aa24Aa56Aa77Aa96
- Body size
- 18px / 1.5
- Display size
- 96px
- Display tracking
- -0.01em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 8.37:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 8
- 12
- 14
- 16
- 20
- 24
- 32
- 48
- 80
- 96
Corner radii
468101624pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 192px
Components
exact computed valuescard
- rounded
- 24px
- padding
- 0px
- border
- 1px solid #D6EBFD30
Layout & motion
- Container
- 1280px
- Grid columns
- 6
- Hero
- split
- Navigation
- top-sticky+transparent
- Page height
- 12,360px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 134
- Keyframes
- 5
- Stack
- next.js, tailwind, mintlify, posthog, vercel
Page sections (15)
section labels are heuristic
01nav
02banner?
03heroEmail for developers
04logos
05feature detail?Integrate
06code sample?Modular webhooks
07feature detail?Write using a delightful editor
08features?Broadcast analytics
09feature detail?Develop emails using React
10feature detail?Welcome to , user!
11features?Prevent spoofing with DMARC
12features?Everything in your control
13testimonialsBeyond expectations
14feature detail?Email reimagined. Available today.
15footer
How Resend compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.40×: steeper than 79% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 12,360px: longer than 83% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- ABC Favorit
- One of 2 indexed sites that load ABC Favorit (1%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Resend use?
Resend uses Inter (loaded as "Inter Website") for body text. ABC Favorit (loaded as "aBCFavorit") is used for headings. Commit Mono (loaded as "Commit Mono Website") is used for code.
What are Resend's brand colors?
Resend's website uses a dark scheme: background #000000, text #FCFDFFEF, muted text #A1A4A5 and borders #D6EBFD30.
How is Resend's website laid out?
The most common corner radius is 16px, body text is 18px with 1.5 line height, and the page container is 1280px wide.
