Neon Cyan
#52e1feBlue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
React Email
react.emailWebsite preview
The design language
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.
Color palette
accent
Beacon Teal
#25aebaGlow halo behind hero product imagery, soft radial accent
Amber
#ffb86aDecorative icon accent, editorial highlight — the warm counterpoint to cyan
neutral
Obsidian
#000000Page canvas, primary background — the floor everything sits on
Carbon
#0f0f10Card and elevated surface — one step up from canvas for contained blocks
Graphite
#27272aBorders, dividers, inset surfaces, nav background — the structural neutral
Filament
#e5e7ebHairline borders on badges, tags, and outlined controls — the machined edge
Paper
#ffffffPrimary text, filled CTA background, icon strokes — the highest contrast signal
Fog
#abafb4Secondary text, subdued body copy, card labels
Ash
#6e727aMuted helper text, badge captions, metadata
Mist
#99a1afTertiary text, icon strokes, disabled-state foreground
Silver
#cad5e2Decorative icon strokes, product-mock accent lines
Slate
#364153Deep icon fills, secondary button text, sparse accent
Sleet
#f3f4f6Code editor chrome, light surface insets, inverted card fill
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
68px · 500 · 0.94 · -0.05px trackingThe quick brown fox jumps
heading-lg
35px · 500 · 1 · -0.025px trackingThe quick brown fox jumps
text-25
25px · 600 · 1.44The quick brown fox jumps
heading
24px · 500 · 1.2The quick brown fox jumps
heading-sm
20px · 400 · 1.33The quick brown fox jumps
subheading
18px · 400 · 1.4 · -0.01px trackingThe quick brown fox jumps
body
16px · 460 · 1.5 · -0.008px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.55 · -0.008px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 460, 500
- Sizes
- 12, 14, 16, 18, 20, 24, 35, 68
- Line height
- 1.43, 1.55, 1.50, 1.40, 1.33, 1.20, 1.00, 0.94
- Letter spacing
- -0.0500em at 68px, -0.0250em at 35px, -0.0100em at 18px, -0.0080em at 16px
- Fallback
- system-ui, -apple-system, sans-serif
Primary interface and editorial type — headlines at weight 500 with aggressive negative tracking (up to -0.05em at 68px) create display density without heaviness; body at 400 reads cleanly against Obsidian canvas
Additional typeface
CommitMono
- Weights
- 400
- Sizes
- 13, 14
- Line height
- 1.30, 1.33, 1.40, 1.43, 1.55
- Fallback
- JetBrains Mono, Fira Code, ui-monospace
Code-first monospace — terminal commands, file labels, badge text, inline code snippets; 13–14px range keeps code as peer to body copy rather than as ornamental detail
Additional typeface
-apple-system
- Weights
- 400, 600, 700
- Sizes
- 14, 25
- Line height
- 1.44, 1.55
- Fallback
- system-ui, BlinkMacSystemFont, Segoe UI
- Features
- "liga" 0
Email preview rendering — the email itself uses system font stack so rendered output matches recipient inbox; liga features disabled to keep copy neutral
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 12px
Border radius
cards
12pxbadges
2pxbuttons
8pxheroPanels
24pxlargeSurfaces
18pxSpacing scale
1px2px4px6px8px10px12px14px15px16px19px20px24px32px40px48px49px56px64px73px74px79px80px96px104px160px216px224px288px304px320pxGuidelines
Do
- Use Inter at weight 500 for all headings and CTAs — the medium weight creates presence without heaviness against the dark canvas
- Apply -0.05em letter-spacing at 68px display size and scale proportionally down to -0.008em at 16px body — this is what makes headlines feel sharp rather than loose
- Pair every primary CTA with a terminal command badge in CommitMono as a visual peer, not a subordinate — the install command is the real CTA for developers
- Use the inset hairline shadow (rgba(255,255,255,0.1) 0px 0px 0px 1px inset, rgba(255,255,255,0.15) 0px 1px 0px 0px inset) on all interactive surfaces to create the machined-edge feel
- Reserve Neon Cyan (#52e1fe) and Beacon Teal (#25aeba) for product visualization glows and the brand icon only — never for text or UI controls
- Maintain the split-pane pattern (code left / preview right) for any code-related section — it demonstrates the product's value proposition structurally
- Set 80px section gaps between major sections and 12px internal element gaps within sections to preserve the comfortable editorial rhythm
Don’t
- Do not use heavy drop shadows for elevation — the system uses inset hairline borders and near-imperceptible 1–2px shadows, not Material-style elevation
- Do not introduce saturated colors beyond the three accents (Neon Cyan, Beacon Teal, Amber) — the 2% colorfulness is a defining constraint, not an accident
- Do not use weight 600 or 700 in Inter for UI — the system caps at weight 500; weight 700 appears only inside the email preview's system font stack
- Do not round all corners uniformly — the system deliberately mixes 2px (badges), 8px (buttons), 12px (cards), 18px (panels), and 24px (hero surfaces)
- Do not use cyan or teal for text or button backgrounds — these colors glow behind product imagery, they do not appear as functional UI
- Do not place CTAs on light backgrounds — the entire system is dark-mode, and the white CTA achieves contrast against Obsidian, which it would lose on Sleet
- Do not use gradients on UI elements — the only gradients are atmospheric radial glows behind product visualizations, not on buttons, cards, or text
Components
Primary CTA Button
Main call-to-action — drives exploration of componentsWhite filled (#ffffff) background, Obsidian (#000000) text, 8px radius, 16px horizontal × 10px vertical padding, Inter weight 500 at 14px. Inset hairline shadow (rgba(255,255,255,0.15) 0px 1px 0px inset) adds a subtle machined edge. Right-arrow icon (→) in #000000 sits 6px after label.
Terminal Command Badge
Inline install command — signals developer-first positioningCommitMono 13px in Filament (#e5e7eb) on Carbon (#0f0f10) background, 8px radius, 4px top/bottom × 12px left/right padding, 1px border in Graphite (#27272a). Small copy icon (📋) right-aligned, 6px from text. Sits inline with primary CTA as a peer, not beneath it.
Ghost Secondary Button
Secondary action — docs link, see examplesTransparent background, Filament (#e5e7eb) text at Inter 14px weight 500, 8px radius, 16px × 10px padding. Inset hairline border (rgba(255,255,255,0.1) 0px 0px 0px 1px). Hover: background lifts to Graphite (#27272a).
Tab Switcher
Toggle between code styling approaches (Tailwind / CSS)Pill container, Carbon (#0f0f10) background, 24px radius. Two tabs: inactive = transparent with Fog (#abafb4) text; active = Graphite (#27272a) fill with Paper (#ffffff) text. Inter 14px weight 500. 8px horizontal × 8px vertical padding per tab, 2px gap between tabs.
Code Editor Window
Code display surface — split pane with previewCarbon (#0f0f10) background, 12px radius, 1px border in Graphite (#27272a). Traffic-light window controls (three small dots) top-left at 6px from edge. File label centered ('email-template.tsx') in CommitMono 13px Mist (#99a1af). Copy icon top-right. Internal padding 20px. Code text in CommitMono with syntax coloring: keywords Amber (#ffb86a), strings Paper, comments Slate (#364153).
Email Preview Card
Live render of email output — the proofSleet (#f3f4f6) background — intentionally inverted to simulate an email inbox. 12px radius, sits in right half of split pane. Inter 14px–18px for body, system font stack for email body content. Renders logo, heading, paragraph, and CTA button in true email style (white button, black text, 8px radius).
Editor Toolbar
Rich text editor controls — formatting actionsLight surface (Sleet #f3f4f6) bar, 12px top radius. Icon buttons in a row: B, I, U, S, link, image, list, list-ordered, H1–H3, heading dropdown. Icons are 16px, Slate (#364153) stroke. Separator divider (1px Filament) at 16px intervals. Active state: icon fills with Obsidian.
Editor Content Card
Editable email surfaceSleet (#f3f4f6) background, 12px bottom radius (mates with toolbar). Padding 24px. Inter 16px for body, Obsidian text. H2 at 20px weight 600. Bullet lists with 4px indent. 'Try it! Type /' prompt at bottom in CommitMono to demonstrate block insertion.
GitHub Star Badge
Social proof and repo link — top-right navCarbon (#0f0f10) background, 8px radius, 1px border in Graphite (#27272a). GitHub octocat icon + star icon in Mist, star count in Paper Inter 14px weight 500. 8px × 8px internal padding.
Brand App Icon
Logo mark — recognizable visual anchor in hero and nav36px square, 8px radius, Neon Cyan (#52e1fe) background with subtle radial glow. White interlocked atom/circle glyph centered, 1.5px stroke. Used in hero (larger) and nav (compact).
Top Navigation Bar
Primary site navigationGraphite (#27272a) background, sits flush to top. Logo left (brand icon + wordmark in Paper), nav links center (Components, Templates, Editor, Docs in Fog #abafb4, hover Paper), GitHub star badge right. Height ~56px, max-width 1200px centered with 40px horizontal padding.
Feature Section Heading
Section-level editorial headingInter 35px weight 500, Paper (#ffffff), letter-spacing -0.025em, line-height 1.00. Two-line wraps allowed. Below: Fog (#abafb4) subheading at 18px weight 400, line-height 1.40. 16px gap between heading and subheading.
Hero Product Visualization
Atmospheric product showcase — the 'library' of email componentsFull-bleed on right side of hero. 3D rendered spiral of email component cards in blue-cyan palette, positioned off-center-right so edges fade into Canvas. Radial glow: radial-gradient(rgba(37, 99, 235, 0.1) 0%, rgba(0, 0, 0, 0) 80%) centered behind visualization. Soft Beacon Teal (#25aeba) bloom shadow.
Surfaces & elevation
Level 0
Obsidian
#000000Page canvas — the floor
Level 1
Carbon
#0f0f10Card surface — contained blocks, editor windows
Level 2
Graphite
#27272aNav bar, elevated panels, inset borders
Level 3
Sleet
#f3f4f6Inverted light surface — email preview body
Cards and editor windows
rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
Inset hairline (buttons, cards, tags)
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset
Hero product visualization glow
rgba(37, 174, 186, 0.1) 0px 0px 9px 4px
Layout & imagery
Layout
Full-bleed dark sections with max-width 1200px centered content. Hero is asymmetric: text block anchored left (40–45% width), product visualization right with radial glow bleeding off the right edge. Sections alternate between two patterns: (1) text-left + product-right with generous 80px vertical gaps, and (2) centered headline + subtitle + tab switcher + full-width editor/preview split. Navigation is a thin top bar with logo left, links center, GitHub star badge right — sticky and minimal. Code sections use split-pane layouts (code left, live preview right) with chrome-mimicking window controls. Content rhythm is spacious but information-dense within each block — every section earns its vertical space with real product demonstration.
Imagery
Product-first visual language: the hero centers a 3D spiral of email component mockups rendered in a blue-cyan glow against pure black, suggesting a 'library' or 'collection' metaphor. The glow uses radial-gradient from rgba(37, 99, 235, 0.1) to transparent — soft, atmospheric, never harsh. Secondary visuals are code editor mockups (split-pane code + preview) and email editor wireframes with toolbars. Icons are outlined with thin strokes (1.5–2px), monochrome (Mist/Fog), occasionally accented with Amber for editorial emphasis. No photography, no lifestyle imagery — the product IS the hero, shown through realistic UI reproductions rather than stock visuals.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (primary), #abafb4 (secondary), #6e727a (muted) - background: #000000 (canvas), #0f0f10 (card), #27272a (nav/border) - border: #27272a (structural), #e5e7eb (hairline/badge) - accent: #52e1fe (cyan glow), #25aeba (teal halo), #ffb86a (amber icon) - primary action: #ffffff (filled action) **3-5 Example Component Prompts** 1. Build a hero section: Obsidian (#000000) background. Display headline at 68px Inter weight 500, #ffffff, letter-spacing -0.05em, line-height 0.94. Subtext at 18px weight 400, #abafb4, max-width 480px. Below: a row with a white filled button ("Explore components →", 8px radius, Inter 14px weight 500, 16px×10px padding) and a terminal command badge (CommitMono 13px, #e5e7eb text, #0f0f10 bg, 8px radius, copy icon). Right side: product visualization with radial glow (radial-gradient(rgba(37, 99, 235, 0.1), transparent 80%)) bleeding off canvas edge. 2. Build a tab switcher: Carbon (#0f0f10) background, 24px radius pill. Two tabs — Tailwind (active: #27272a fill, #ffffff text) and CSS (inactive: transparent, #abafb4 text). Inter 14px weight 500, 8px padding, 2px gap. Centered above a code/preview split. 3. Build a code editor window: #0f0f10 background, 12px radius, 1px border in #27272a. Three traffic-light dots top-left (6px from edge). File label 'email-template.tsx' centered in CommitMono 13px #99a1af. Copy icon top-right. Code body in CommitMono with Amber (#ffb86a) for keywords, #ffffff for strings, #364153 for comments. 20px internal padding. 4. Build a section heading block: Inter 35px weight 500, #ffffff, letter-spacing -0.025em, line-height 1.00. 16px gap to subheading: Inter 18px weight 400, #abafb4, line-height 1.40. 80px vertical space above and below the block. 5. Build a ghost secondary button: transparent background, #e5e7eb text, Inter 14px weight 500, 8px radius, 16px×10px padding. 1px inset border (rgba(255,255,255,0.1)). On hover: background shifts to #27272a.
Similar brands
Vercel
Same dark-mode editorial layout with asymmetric hero (text-left, product-right), aggressive negative letter-spacing on large headlines, and white CTAs against near-black canvas
Linear
Same hairline-bordered interactive surfaces with inset white edge highlights, monospace command badges paired with primary buttons, and sparse use of accent color
Resend
Direct competitor with identical developer-first positioning — dark canvas, Inter + mono pairing, split-pane code/preview sections, terminal install commands as peer to CTAs
Stripe Docs
Same generous section spacing (64–80px), left-aligned editorial typography, and the pattern of letting product visualization (3D/code) carry the right half of the hero
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
