---
title: "Resend design system"
variant: extended
source: https://resend.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/resend-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Resend · Design System

> Quiet monochrome, with a sharp editorial edge.

**Theme:** dark · **Industry:** devtools · **Source:** https://resend.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Resend pairs a near-black canvas with large editorial headlines and restrained technical detail. A monochrome 3D hero and compact developer-focused sections keep the interface atmospheric without obscuring the product.

## North star

Keep the page nearly black and let editorial typography, product evidence, and subtle hairlines provide the hierarchy.

## Overview

The page builds its identity around a nearly uninterrupted black canvas, with soft gray body text, bright headings, and fine charcoal borders defining the interface. Saturated blue is reserved as a very restrained accent rather than a dominant surface color; tiny green and other vivid hues belong mainly to interface badges and technical mockups. Typography supplies the contrast: a distinctive high-contrast serif display headline anchors the hero, while aBCFavorit and Inter handle section headings, navigation, and readable body copy. Commit Mono marks code and compact technical labels. The hero sets text against a dark, sculptural 3D object, then the page alternates centered feature introductions with split product demonstrations, testimonials, and further feature panels. Broad black intervals let each section breathe, while rounded controls and cards soften the otherwise precise, engineering-led presentation. Borders and restrained shadows separate content without creating a glossy, heavily layered UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#000000` | `--color-obsidian-canvas` | brand | Dominant page canvas and the continuous background across the hero, content sections, and footer. |
| Soft Alloy | `#a1a4a5` | `--color-soft-alloy` | neutral | Muted navigation, supporting copy, and secondary button text against the black canvas. |
| Graphite Hairline | `#282c30` | `--color-graphite-hairline` | neutral | Fine borders around technical cards, badges, and product interface elements. |
| Cloud Text | `#f0f0f0` | `--color-cloud-text` | neutral | Primary readable text, headings, and high-contrast links on dark sections. |
| Status Green | `#3bd88c` | `--color-status-green` | semantic | Rare green badge detail inside delivery-status or product-interface examples, not a page-wide brand color. |
| Demo Sky | `#70b8ff` | `--color-demo-sky` | semantic | Small blue-toned badge detail within product or illustrative UI examples. |
| Demo Navy | `#001b3a` | `--color-demo-navy` | semantic | Deep blue detail appearing in a badge or product mockup, not a defining canvas color. |
| Card Charcoal | `#1f2225` | `--color-card-charcoal` | surface | Subtle card fill and testimonial border tone that separates content from black. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Bright button text and inverse surfaces or small interface details. |
| Silver Mist | `#abafb4` | `--color-silver-mist` | neutral | Secondary muted copy in buttons and footer text. |
| Signal Blue | `#3b9eff` | `--color-signal-blue` | accent | Rare accent detail associated with button or interface states; keep usage restrained. |
| Demo Marigold | `#ffca16` | `--color-demo-marigold` | semantic | Tiny badge color within a product or illustration example, not core page chrome. |
| Electric Azure | `#00a3ff` | `--color-electric-azure` | accent | A restrained blue accent in interface or button details, not a large background field. |
| Demo Lilac | `#baa7ff` | `--color-demo-lilac` | semantic | Small illustrative badge color, confined to product mockups. |
| Demo Coral | `#ff9592` | `--color-demo-coral` | semantic | Occasional badge detail inside technical or illustrative UI examples. |
| Demo Oxblood | `#2d040b` | `--color-demo-oxblood` | semantic | Very rare dark badge or mockup detail; not part of the visible page foundation. |

### Semantic aliases

`--color-canvas` → `#000000` (Obsidian Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#f0f0f0` (Cloud Text) · `--color-text-muted` → `#a1a4a5` (Soft Alloy) · `--color-text-subtle` → `#abafb4` (Silver Mist) · `--color-border` → `#282c30` (Graphite Hairline) · `--color-accent` → `#00a3ff` (Electric Azure) · `--color-accent-2` → `#3b9eff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f0f0f0` | `#000000` | 18.43:1 | AAA |
| `#f0f0f0` | `#ffffff` | 1.14:1 | fail |
| `#a1a4a5` | `#000000` | 8.37:1 | AAA |
| `#a1a4a5` | `#ffffff` | 2.51:1 | fail |
| `#abafb4` | `#000000` | 9.52:1 | AAA |
| `#abafb4` | `#ffffff` | 2.21:1 | fail |
| `#00a3ff` | `#000000` | 7.68:1 | AAA |
| `#00a3ff` | `#ffffff` | 2.73:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0) 100%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgba(80, 80, 80, 0.15) 0%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%)`
- `linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.5))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 600 | Body copy, navigation, links, buttons, and many section headings. | Inter |
| commitMono | `--font-mono` | webfont | 400 | Code samples and compact technical captions or labels. | IBM Plex Mono |
| aBCFavorit | `--font-display` | webfont | 400, 500 | Large sans-serif page heading and selected feature headings. | DM Sans |
| Helvetica | `--font-helvetica` | system | 400, 600, 700 | System fallback for occasional interface text. | Arial |

- **inter:** Use a clean sans-serif voice with measured regular, medium, and semibold weights; keep casing natural.
- **commitMono:** Monospaced, compact technical texture; retain the small caption treatment and avoid decorative styling.
- **aBCFavorit:** Measured regular and medium weights; use tight tracking for the main heading and restrained case.
- **Helvetica:** Neutral sans-serif fallback; measured weights range from regular to bold.

### Type scale — Augmented Fourth (ratio ≈ 1.406, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 77px | 400 | 1 | -0.01em | — | domaine | Oversized editorial serif headline in the hero. |
| h1 | 56px | 400 | 1.2 | -0.05em | — | aBCFavorit | Primary sans-serif page heading where the alternate heading style is used. |
| h2 | 24px | 500 | 1.5 | 0 | — | inter | Major section titles and key feature introductions. |
| h3 | 20px | 400 | 1 | 0 | — | aBCFavorit | Feature-card and product-demo headings. |
| h4 | 18px | 400 | 1.5 | 0 | — | inter | Supporting subsection headings. |
| body | 14px | 400 | 1.6 | 0 | — | inter | Descriptions, testimonials, and supporting product copy. |
| caption | 12px | 400 | 1.33 | 0 | — | commitMono | Compact technical captions and understated labels. |
| button | 14px | 400 | 1.6 | 0 | — | inter | CTA and secondary action labels. |
| nav | 14px | 500 | 1.43 | 0 | — | inter | Top navigation items and dropdown labels. |
| link | 14px | 400 | 1.43 | 0 | — | inter | Inline actions such as documentation and learn-more links. |
| code | 12px | 400 | 1.33 | 0 | — | commitMono | Code samples and developer-facing technical strings. |

OpenType features in use: `"ss01", "ss04", "ss05", "ss11"`, `"ss01", "ss03", "ss04", "ss05"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 12, 14, 16, 24, 32, 48, 96 px.
- Section rhythm 32px · element gap 16px · card padding 28px · max content width 1232px.

A centered, wide content frame supports a long, vertically paced landing page. The hero is a two-part composition: left-aligned copy and actions sit opposite dark product imagery. Below it, sections alternate centered introductions, split feature demonstrations, and multi-column cards or testimonials. The measured page max width is 1232px; use the measured 8px-based spacing scale and comfortable density to maintain clear separation between blocks. Keep navigation compact, align feature copy consistently, and use large black intervals rather than contrasting section bands.

## Shape & elevation

- Radius: button `16px` · card `16px` · media `50%` · badge `6px` · link `9999px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (media): `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(24, 25, 28, 0.88) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (other): `rgb(0, 0, 0) 0px 0px 0px 8px`
- Shadow `sm` (button): `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 2`
- Shadow `inset` (footer): `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, rgb(255, 255, 255) 0px 1px 1px 0px inset`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: black surfaces dominate, with fine charcoal borders separating cards and technical media. Rounded card and button forms soften the geometry without relying on conspicuous drop shadows. Use layering chiefly for interface previews and hero imagery; preserve restrained contrast and avoid floating panels that feel detached from the canvas.

## Imagery

The first viewport uses a dark, sculptural 3D arrangement of geometric forms, framed to the right of the hero copy and blended into the black background. Further sections rely on product-interface demonstrations, video, illustrations, and customer imagery rather than bright lifestyle photography. Keep mockups low-glare and predominantly monochrome; vivid colors should read as small functional details within product UI, not as a new visual theme.

## Components

### Top navigation

Compact horizontal navigation on black, using Inter, muted secondary actions, and a bright rounded Get started control.

### Hero announcement

Small outlined pill above the hero headline, with restrained muted text and a discreet directional cue.

### Hero CTA pair

A rounded primary Get started action sits beside a quieter Documentation link beneath the supporting copy.

### Feature demonstration

Split sections combine short feature headings and copy with dark interface previews, code, or product video.

### Product card

Dark cards use subtle borders, rounded corners, and light Inter text; keep the card surface close to the black canvas.

### Status badge

Small rounded status labels use a subdued dark fill with a focused semantic color, such as green for delivered.

### Testimonial panel

Customer proof appears in a bordered, dark panel with readable light copy and restrained attribution.

### Measured component styles

- **Primary button** (“Documentation”): transparent background · text #a1a4a5 · border 1px solid · radius 16px · padding 0px 20px · 600 16px inter
- **Link** (“Learn more”): transparent background · text #fcfdff · radius 0px · padding 0px · 400 14px inter
- **Card** (“"Our team loves Resend. It makes email s”): transparent background · text #f0f0f0 · border 1px solid #1f2225 · radius 16px · padding 24px 32px · 400 16px inter
- **Badge** (“melia@figma.com”): transparent background · text #ffffff · border 1px solid #282c30 · radius 6px · padding 2px 6px · 400 14px inter
- **Navigation item** (“Features Company Enterprise Help Docs AI”): transparent background · text #f0f0f0 · radius 0px · padding 0px · 400 16px inter

## Do

- Use black as the continuous canvas.
- Reserve Cloud Text for primary content.
- Use muted gray for secondary navigation and copy.
- Keep bright accents mostly inside product examples.
- Pair editorial display type with practical sans-serif text.
- Use fine borders to distinguish dark cards.
- Let generous black intervals pace the sections.

## Don't

- Do not introduce bright section backgrounds.
- Do not turn accent blue into a dominant surface.
- Do not use colorful lifestyle imagery in the hero.
- Do not overuse shadows or floating-card effects.
- Do not crowd headings, copy, and product previews together.
- Do not use decorative typography for technical labels.

## Agent prompt

Build a new page in Resend’s developer-focused visual style. Use Obsidian Canvas (#000000) as the continuous background, Cloud Text (#f0f0f0) for primary copy, Soft Alloy (#a1a4a5) for secondary text, and Graphite Hairline (#282c30) for restrained borders. Compose an editorial hero with a high-contrast serif display headline, concise supporting copy, paired actions, and dark sculptural or product imagery. Use Inter for navigation and body content, a mono face for code, and simple sans-serif feature headings. Organize the page into centered introductions, split product demonstrations, and compact dark cards with rounded corners. Keep blue accents such as Electric Azure (#00a3ff) sparse and functional. Favor flat surfaces, fine separators, comfortable spacing, and clear hierarchy over gradients or heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned copy and right-side dark 3D media. | announcement pill, primary and secondary actions | serif display headline, black canvas, dark 3D object |
| 2 | logo-cloud | Centered trust statement with a multi-column row of customer marks. | enterprise exploration link | monochrome logo marks, black background |
| 3 | integrations | Centered introduction followed by a broad developer integration showcase. | SDK selection, code-oriented product preview | centered heading, dark interface media, integration controls |
| 4 | announcement | A single centered statement creates a transition between feature areas. | section transition | minimal text-only band |
| 5 | feature-split | Two side-by-side feature panels with aligned headings and product examples. | test mode preview, webhook explanation | two-column layout, dark technical UI, fine borders |
| 6 | product-showcase | Centered feature introduction with a large product media showcase. | visual editing preview | centered heading, editor interface, dark media |
| 7 | feature-grid | Two-column feature area pairing explanatory copy with supporting product media. | feature discovery, learn-more links | left-aligned feature headings, product illustrations |
| 8 | feature-split | Two-column section balancing centered introductory copy and email preview content. | get started action, documentation link, email preview | dark interface mockup, code-oriented messaging |
| 9 | other | A full-width visual transition between product content and customer proof. | visual pacing | dark full-width media |
| 10 | testimonials | Centered testimonial-led content with a customer attribution and supporting visual. | social proof, customer attribution | light testimonial copy, dark canvas |
| 11 | feature-grid | Centered section introduction with a multi-column set of feature panels. | feature exploration | feature cards, full-bleed media, dark product demos |
| 12 | testimonials | Centered heading above a dense grid of customer testimonial cards. | customer proof, testimonial scanning | multi-column cards, subtle charcoal borders |
| 13 | cta | Short, centered closing statement on the black canvas. | brand reinforcement | minimal text-led treatment |
| 14 | other | A compact, mostly open space before the footer content. | visual pause | continuous black background |
| 15 | footer | Multi-column footer with company information, status, and grouped links. | resource navigation, system status | small logo marks, compact link lists, dark canvas |

## Source CSS custom properties (selected)

```css
--bg-base: #000;
--bg-accent: #fff;
--bg-accent-hover: #f0f0f0;
--bg-overlay: #000000f2;
--ring-accent: #caecff33;
--text-placeholder: #52595b;
--text-on-accent: #000;
--background: #000;
--scroll-shadow-line-color: #212629;
--color-gray-1: #141517;
--color-gray-2: #191b1e;
--color-gray-3: #212629;
--color-gray-4: #293034;
--color-gray-5: #333b3e;
--color-gray-6: #3b4345;
--color-gray-7: #434a4d;
--color-gray-8: #52595b;
--color-gray-9: #6e7679;
--color-gray-10: #878d8f;
--color-gray-11: #a1a4a5;
--color-gray-12: #f0f0f0;
--ai-border-speed: 3s;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/resend-com