Skip to content
Browse
Library

React Email. Deep matte black, hairline white edges, and one cyan beacon glowing through developer glass.

  • Developer tools
  • Dark theme
  • 14 colors
  • 3 typefaces

React Email presents itself as an obsidian workshop where developer tools feel handcrafted: deep black canvases, precise white typography, and a single cyan accent that glows through product imagery like light through aquarium glass. The visual rhythm is editorial — generous section gaps, left-aligned text blocks, and right-aligned product visuals that drift in and out of focus through subtle radial glows. Components feel engineered rather than decorated: thin hairline borders, inset white edge highlights that read as machined metal, and near-zero elevation. Code is first-class citizen — monospace badges sit inline with CTAs, terminal commands share visual weight with button labels, and the Inter / CommitMono pairing bridges marketing copy and developer documentation without tonal shift.

Visit react.email
Screenshot of React Email
Captured from react.email on October 11, 2026

React Email design system

React Email

Accent3

  • Blue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color

  • Glow halo behind hero product imagery, soft radial accent

  • Decorative icon accent, editorial highlight — the warm counterpoint to cyan

Neutrals11

  • Page canvas, primary background — the floor everything sits on

  • Card and elevated surface — one step up from canvas for contained blocks

  • Borders, dividers, inset surfaces, nav background — the structural neutral

  • Deep icon fills, secondary button text, sparse accent

  • Muted helper text, badge captions, metadata

  • Tertiary text, icon strokes, disabled-state foreground

  • Secondary text, subdued body copy, card labels

  • Decorative icon strokes, product-mock accent lines

  • Hairline borders on badges, tags, and outlined controls — the machined edge

  • Code editor chrome, light surface insets, inverted card fill

  • Primary text, filled CTA background, icon strokes — the highest contrast signal

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Obsidian on Neon Cyan

13.56 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.