# Resend design system: colors, fonts and tokens

> 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.

Source: https://resend.com, captured 25 June 2026. Page: https://designlang.app/design-system/resend

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#d6ebfd` | 121 |
| Secondary | `#00a3ff` | 1 |
| Accent | `#44ffa4` | 78 |

Neutrals: `#f0f0f0`, `#a1a4a5`, `#ffffff`, `#f1f7fe`, `#464a4d`, `#6c6c6c`, `#000000`, `#e5edfd`, `#70757e`, `#262a2d`

Backgrounds: `#000000`, `#ffffff`

## Fonts

- inter (sans), 2021 elements
- commitMono (mono), 814 elements
- aBCFavorit (sans), 31 elements
- domaine (serif), 4 elements

## 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

1px, 20px, 24px, 28px, 40px, 48px, 62px, 80px, 96px, 104px, 144px, 150px, 221px, 380px

## Radii

4px, 8px, 12px, 16px, 24px

## Motion

Feel: mixed. Durations: 150ms, 200ms, 300ms, 500ms, 1000ms.

## Audit

Overall 84/100 (grade B).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/resend-com/resend-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/resend-com/resend-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/resend-com/resend-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/resend-com/resend-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/resend-com/resend-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/resend-com/resend-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/resend-com/resend-com-DESIGN.md)

Regenerate: `npx designlang resend.com`