Resend design system
Resend's website (resend.com) uses a dark interface with #d6ebfd as its primary color and inter as the main typeface, with commitMono alongside it. designlang measured 9 font sizes from 12px to 96px, 14 spacing values, 5 corner radii.
Resend colors
The brand roles and neutrals resend.com renders, with how many elements use each one.
Brand colors
- Primary
#d6ebfd121 uses - Secondary
#00a3ff1 uses - Accent
#44ffa478 uses
Neutrals
#f0f0f02,604 uses#a1a4a51,171 uses#ffffff765 uses#f1f7fe504 uses#464a4d168 uses#6c6c6c132 uses#00000060 uses#e5edfd31 uses#70757e16 uses#262a2d2 uses
Backgrounds
#000000#ffffff
Text colors
#ffffff21:1 on #000000#f0f0f018.43:1 on #000000#f1f7fe19.48:1 on #000000#a1a4a58.37:1 on #000000#ffc44613.24:1 on #000000#fcfdff20.63:1 on #000000#ebeced17.75:1 on #000000#464a4d2.35:1 on #000000
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#f0f0f0 | #0b0e14 | 16.95:1 | AAA |
Resend fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- inter: sans, body (2,021 elements)
- commitMono: mono, body (814 elements)
- aBCFavorit: sans, most text (31 elements)
- domaine: serif, headings (4 elements)
Body text: 12px at weight 400, line height 16px.
Weights in use: 400, 500, 600, 700.
Type scale
| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 96px | 400 | 96px | -0.96px | h1, br |
| 76.8px | 400 | 76.8px | -0.768px | h2, br |
| 56px | 400 | 67.2px | -2.8px | h2, span, br |
| 24px | 400 | 33.6px | normal | h2, strong, span |
| 20px | 400 | 26px | normal | h2, h4 |
| 18px | 400 | 27px | normal | p, span, script, br |
| 16px | 400 | 24px | normal | html, head, meta, link |
| 14px | 500 | 20px | normal | button, svg, path, a |
| 12px | 400 | 16px | normal | a, span, svg, path |
Spacing and radii
Spacing scale
Corner radii
- 4px
- 8px
- 12px
- 16px
- 24px
Medium radii lead, with a few larger ones. 4 distinct box shadows.
Motion
The motion reads as mixed.
Durations
xs: 150mssm: 200msmd: 300mslg: 500msxl: 1000ms
Easing
- custom (128 uses):
cubic-bezier(0.4, 0, 0.2, 1) - ease-in (6 uses):
cubic-bezier(0.4, 0, 1, 1) - ease-in-out (2 uses):
ease - ease-out (7 uses):
cubic-bezier(0.36, 0.66, 0.6, 1) - linear (1 uses):
linear
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (52), inputs (3), links (55), navigation (1), footer (2), modals (6).
By category
| Color Discipline | 80/100 |
|---|---|
| Typography Consistency | 50/100 |
| Spacing System | 100/100 |
| Shadow Consistency | 100/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |
- 6 font families — consider limiting to 2 (heading + body)
- 551 !important rules — prefer specificity over overrides
- 7113 duplicate CSS declarations
Download the tokens
The files designlang wrote for resend.com. Run it yourself for a fresh read: npx designlang resend.com.
The core values as CSS variables
:root {
--color-primary: #d6ebfd;
--color-secondary: #00a3ff;
--color-accent: #44ffa4;
--color-background: #000000;
--color-text: #ffffff;
--color-neutral-1: #f0f0f0;
--color-neutral-2: #a1a4a5;
--color-neutral-3: #ffffff;
--color-neutral-4: #f1f7fe;
--font-primary: "inter", sans-serif;
--font-secondary: "commitMono", monospace;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}Read resend.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Resend use?
What are Resend's brand colors?
How do I use the Resend design system in my own app?
Is this the official design system?
Measured from the public pages of resend.com on 25 June 2026. Resend is a trademark of its owner; designlang is not affiliated with it. More: the full Resend brand kit, the token extraction guide and the markdown version of this page.