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

# React Email · Design System

> A quiet dark canvas for vivid email-building tools

**Theme:** dark · **Industry:** devtools · **Source:** https://react.email/ · **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._

React Email pairs a near-black interface with restrained cyan-blue glow and crisp product previews. Monospace code, generous section spacing, and compact controls make the page feel like a polished developer workspace.

## North star

Keep the interface nearly black and spacious; reserve bright contrast for readable type, white actions, and cyan-lit product evidence.

## Overview

The page is anchored by a nearly continuous black canvas, with white and pale-gray typography establishing contrast rather than large colored section bands. Muted gray supports navigation and explanatory copy, while cyan appears sparingly in product marks, interface details, and the blue-lit hero artwork; those brighter blues belong mainly to media, not a general background system. Inter handles headlines, navigation, and controls with moderate weights and subtly tight tracking. CommitMono gives code and technical snippets a distinct working-console voice. A broad centered content frame alternates centered introductions with split product demonstrations and compact grids. Sections breathe with generous vertical separation, while cards and preview panels stay dark, outlined, and visually quiet. White buttons provide the clearest action contrast. Product imagery is treated as atmospheric evidence: darkened, cropped, and selectively illuminated so it supports the message without displacing readable interface content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | surface | Dominant page canvas and section background; also frames dark code and media previews. |
| Soft Chalk | `#ededef` | `--color-soft-chalk` | neutral | Primary headings, body copy, and footer text against the black canvas. |
| Graphite Edge | `#181b1c` | `--color-graphite-edge` | neutral | Fine card and component outlines, dark link surfaces, and subtle structural separation. |
| Cool Ash | `#abafb4` | `--color-cool-ash` | neutral | Secondary navigation, explanatory copy, button text, and footer details. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | High-contrast primary CTA and light email or editor previews; not a page-wide surface. |
| Slate Whisper | `#706f78` | `--color-slate-whisper` | neutral | Low-emphasis supporting text and secondary button details. |
| Dust Violet Gray | `#7e7d86` | `--color-dust-violet-gray` | neutral | Occasional subdued text; a minor measured shade, not a defining brand color. |
| Dot Grid | `#27272a` | `--color-dot-grid` | neutral | Subtle card edges and dotted technical textures within dark product areas. |
| Signal Cyan | `#4acae4` | `--color-signal-cyan` | accent | Sparse cyan accent in controls and product details; blue glow is most prominent in hero media. |
| Pale Alloy | `#cccccc` | `--color-pale-alloy` | neutral | Occasional muted heading and text details rather than a major interface surface. |
| Mist Panel | `#e5e7eb` | `--color-mist-panel` | surface | Light button, badge, and preview borders or fills; used in small inverse UI elements. |
| Night Panel | `#0f0f10` | `--color-night-panel` | surface | Slightly lifted dark cards and other inset interface surfaces. |
| Black Fade | `#0a0a0a` | `--color-black-fade` | surface | Near-black component of measured gradients and background shading. |
| Midnight Blue | `#040a18` | `--color-midnight-blue` | surface | Deep blue-black gradient tone in atmospheric backgrounds, not a flat section color. |
| Iron Divider | `#282c30` | `--color-iron-divider` | neutral | Occasional navigation and component border detail. |
| Cloud Tint | `#f3f4f6` | `--color-cloud-tint` | neutral | Minor pale text or border detail in interface elements. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#181b1c` (Graphite Edge) · `--color-surface-3` → `#e5e7eb` (Mist Panel) · `--color-surface-4` → `#0f0f10` (Night Panel) · `--color-text` → `#ededef` (Soft Chalk) · `--color-text-muted` → `#abafb4` (Cool Ash) · `--color-text-subtle` → `#706f78` (Slate Whisper) · `--color-border` → `#181b1c` (Graphite Edge) · `--color-accent` → `#4acae4` (Signal Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ededef` | `#000000` | 17.96:1 | AAA |
| `#ededef` | `#ffffff` | 1.17:1 | fail |
| `#ededef` | `#181b1c` | 14.81:1 | AAA |
| `#ededef` | `#e5e7eb` | 1.06:1 | fail |
| `#abafb4` | `#000000` | 9.52:1 | AAA |
| `#abafb4` | `#ffffff` | 2.21:1 | fail |
| `#abafb4` | `#181b1c` | 7.85:1 | AAA |
| `#abafb4` | `#e5e7eb` | 1.78:1 | fail |
| `#706f78` | `#000000` | 4.23:1 | AA-large |
| `#706f78` | `#ffffff` | 4.96:1 | AA |

### Gradients

- `radial-gradient(circle at 100% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.95) 60%, rgb(0, 0, 0) 80%), linear-gradient(175deg, rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0) 97%), linear-gradient(rgba(0, 0, 0, `
- `conic-gradient(from 90deg, rgba(0, 0, 0, 0) 50%, rgb(10, 10, 10) 50%), radial-gradient(rgba(37, 99, 235, 0.1) 0%, rgba(0, 0, 0, 0) 80%)`
- `radial-gradient(60% 50%, rgba(37, 99, 235, 0.06) 0%, rgba(0, 0, 0, 0) 70%)`
- `radial-gradient(rgb(39, 39, 42) 0.5008px, rgba(0, 0, 0, 0) 0.5008px), radial-gradient(rgb(39, 39, 42) 0.5008px, rgba(0, 0, 0, 0) 0.5008px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| commitMono | `--font-mono` | webfont | 400 | Code samples, snippets, and technical body copy | IBM Plex Mono |
| inter | `--font-display` | webfont | 400, 500, 460 | Display and interface typography, including headings, navigation, captions, and buttons | Inter |
| -apple-system | `--font-apple-system` | system | 400, 700, 600 | System-font fallback for small portions of interface text | Inter |

- **commitMono:** Regular monospace; gives code and compact technical labels a utilitarian console texture.
- **inter:** Mostly regular to medium weights; restrained tracking, sentence case, and clean sans-serif hierarchy.
- **-apple-system:** System sans fallback; keep neutral and unobtrusive if the original stack is unavailable.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 500 | 0.94 | -0.05em | — | inter | Large hero headline; compact line breaks and tight display tracking. |
| h1 | 35px | 500 | 1.2 | -0.025em | — | inter | Primary section headline and major content heading. |
| h2 | 24px | 500 | 1.4 | -0.01em | — | inter | Section headings introducing features and product capabilities. |
| h3 | 20px | 400 | 1.4 | -0.008em | — | inter | Subsection titles and prominent card headings. |
| h4 | 18px | 400 | 1.56 | 0 | — | inter | Smaller editorial or feature-panel headings. |
| body | 13px | 400 | 1.33 | 0 | — | CommitMono | Technical descriptions, code, and developer-facing explanatory text. |
| caption | 12px | 400 | 1.33 | 0 | — | inter | Small supporting labels and metadata around previews. |
| button | 16px | 500 | 1.5 | 0 | — | inter | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1.43 | 0 | — | inter | Header links and compact navigation items. |
| code | 13px | 400 | 1.33 | 0 | — | CommitMono | Syntax-oriented snippets and command-line examples. |

OpenType features in use: `"liga" 0`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 64, 80, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1248px.

Use a centered content frame with a measured maximum width of 1248px and a spacious vertical rhythm; the measured section gap is 96px. The hero aligns its text on the left and lets large atmospheric media occupy the right, while feature introductions often center above demos. Alternate split showcases, logo rows, and compact component grids to vary the long page without changing the dark canvas. Keep text blocks narrow relative to previews, align section content consistently, and use restrained internal gaps. Overall density is low, with substantial negative space between demonstrations.

## Shape & elevation

- Radius: button `12px` · card `24px` · media `50%` · badge `4px` · nav `6px` · link `8px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · 2xl `18px` · pill `9999px`
- Shadow `xl` (other, 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) 0px 32px 64px -16px, rgba(0, 0, 0, 0) 0px 16px `
- Shadow `hairline` (other, card): `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.05) 0px 1px 2px 0px`
- Shadow `md` (other): `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(37, 174, 186, 0.1) 0px 0px 9px 4px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.1) 0px 5px 30px -5px`
- Shadow `hairline-2` (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) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat: dark surfaces sit close to the black canvas, with thin outlines doing more work than shadows. Use measured dark borders such as Graphite Edge or Dot Grid to define cards and editor frames. Reserve stronger layering for the hero glow and overlapping product previews; avoid broad, bright drop shadows.

## Imagery

Use product UI, code previews, and brand marks rather than lifestyle photography. The hero uses oversized, cropped, blue-cyan illuminated email-interface media against black; treat it as atmospheric product evidence, not a flat background color. Keep screenshots dark and framed, with readable interface details. Small logos and tool icons sit in compact rows, while a white editor preview creates a deliberate contrast point.

## Components

### Primary CTA

White, rounded button with dark text and a thin pale border; use for the clearest action such as exploring components.

### Secondary command control

Dark outlined inline control paired with a command or copy affordance; set its text in CommitMono.

### Navigation

Compact Inter links on the black canvas with subdued gray text and restrained separators.

### Code preview

Dark, thin-bordered panel with monospace syntax and a small header or copy control.

### Product preview

Large framed email or editor UI; dark interface areas may be contrasted by a white preview surface.

### Feature card

Quiet dark card with a thin Graphite Edge or Dot Grid outline and ample surrounding negative space.

### Logo row

Compact sequence of tool or email-client marks with small captions, arranged without colored section backing.

### Measured component styles

- **Primary button** (“Explore components”): background #ffffff · text #000000 · border 1px solid #e5e7eb · radius 12px · padding 0px 16px · 500 16px inter
- **Secondary button** (“Docs for LLMs”): transparent background · text #f1f7fe · border 1px solid #34343a · radius 12px · padding 0px 16px · 500 16px inter
- **Link** (“Resend”): background #181b1c · text #f1f7fe · radius 24px · padding 1px · 400 14px inter
- **Card** (“Your editor is live Everything your user”): background #ffffff · text #f1f7fe · border 1px solid #181b1c · radius 24px · padding 0px · 400 14px inter
- **Badge** (“/”): background #e5e7eb · text #1e293b · radius 4px · padding 3.5px 5.6px · 400 14px commitMono
- **Navigation item** (“Components”): transparent background · text #f1f7fe · radius 6px · padding 0px 8px · 400 14px inter

## Do

- Keep the page canvas near-black throughout.
- Use white type for primary headings and key copy.
- Reserve cyan-blue glow for product media and small accents.
- Pair Inter interface text with CommitMono code.
- Give demonstrations generous space between sections.
- Define dark cards with thin, subtle borders.

## Don't

- Do not turn the page into alternating bright section bands.
- Do not use cyan as a large flat background.
- Do not add decorative photography unrelated to the product.
- Do not make card shadows stronger than their borders.
- Do not use oversized navigation or dense text blocks.
- Do not treat illustration-only blues as the core interface palette.

## Agent prompt

Build a new developer-tools page in the React Email visual language. Use Deep Canvas (#000000) across the page, Soft Chalk (#ededef) for primary text, and Cool Ash (#abafb4) for secondary copy. Keep Signal Cyan (#4acae4) restrained, chiefly in product details or a blue-lit media treatment. Use Inter for headings and controls and CommitMono for code and command snippets. Establish a centered frame no wider than the measured 1248px maximum, with generous vertical section rhythm and alternating centered introductions, split product demos, and compact grids. Use thin Graphite Edge (#181b1c) outlines rather than prominent shadows. Make primary actions white with dark text. Product previews should look like real interface evidence, with occasional white editor surfaces against the otherwise dark composition.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and actions beside oversized right-side product artwork. | Top navigation, Primary exploration CTA, Copyable command | Black canvas, Cyan-lit media, White headline, Compact nav |
| 2 | product-showcase | Centered introduction above a wide, two-column code and email preview. | Style-option switch, Live preview, Copy code control | Dark code editor, Email mockup, Thin outline |
| 3 | feature-grid | Centered heading, followed by a horizontal row of compact tool marks and actions. | Tool selection cues, Install command, Documentation link | Dark icon tiles, Monospace command, Outlined secondary action |
| 4 | testimonials | Centered quote in a narrow column with attribution beneath. | Social proof, Attributed quote | Thin divider, Centered copy, Small portrait |
| 5 | product-grid | Left-aligned introduction and CTA above a multi-column grid of component previews. | Browse all components, Category discovery | Outlined preview cards, Dark interface thumbnails, Compact labels |
| 6 | logo-cloud | Left-aligned heading and supporting copy above a six-column logo row. | Compatibility reassurance | Monochrome client marks, Small labels, Black canvas |
| 7 | feature-split | Centered intro above a split content area with a tool list and interface preview. | Tool-category exploration, Preview inspection | Dark feature list, Framed dashboard, Subtle highlighted row |
| 8 | feature-split | Copy and actions on the left, with a large editor preview and code media on the right. | Documentation CTA, Examples link, Editor preview | White editor surface, Dark code layer, Blue-tinted ambient glow |
| 9 | integrations | Centered heading and description above a grid of provider logo cards. | Provider discovery, Integration recognition | Dark bordered logo cards, White provider marks, Centered composition |

## Source CSS custom properties (selected)

```css
--re-bg: #fff;
--re-border: #e5e5e5;
--re-text: #1c1c1c;
--re-text-muted: #6b6b6b;
--re-radius: .75rem;
--re-radius-sm: calc(.75rem - .125rem);
--re-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--re-bg-active: #2e2e2e;
```

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