Resend

Overview

Resend is a developer-first email infrastructure platform that transforms transactional and marketing email delivery into a seamless, reliable experience. The design system embodies **Architectural Minimalism**—a philosophy that prioritizes clarity through extreme contrast, precision typography, and restrained use of accent colors. The brand serves technical audiences who value substance over decoration; every pixel serves a functional purpose. The interface evokes confidence and control: a pure black canvas (rgb(0, 0, 0)) with luminous white text (rgb(240, 240, 240)) creates an almost monochromatic foundation, punctuated by strategic neon accents (#62ffb3 for secondary actions, #ffff92 for highlights) that feel like terminal output or code editor themes—familiar to developers.

The voice is direct, precise, and unpretentious. Resend speaks in imperative, action-oriented language: "Deliver transactional and marketing emails at scale." "Integrate this morning." No marketing fluff, no hedging. The tone assumes the reader is competent and busy. Example sentence in brand voice: "Get started in minutes—no SMTP configuration required."

Colors

The color system is built on a **dark-first, high-contrast paradigm** designed for extended screen time and developer workflows. The primary surface is pure black (#000000), with a carefully calibrated grayscale stack (surface-container: #161616, surface-container-high: #262626) that provides subtle depth without sacrificing legibility. Text defaults to #f0f0f0 (on-surface), a soft white that reduces eye strain compared to pure white, while secondary text uses #a0a0a0 (on-surface-variant) for hierarchy. Primary color is white (#ffffff), used exclusively for high-emphasis CTAs and interactive states—the "Get started" button in the hero is white on black, creating maximum contrast and visual weight. Secondary accent is #62ffb3 (a vibrant mint green), deployed sparingly on badges, success sta

Typography

The type system pairs **Domaine** (a serif display font with generous letterforms) for headlines with **Inter** (a humanist sans-serif) for body and UI text. This pairing creates visual tension that signals hierarchy: Domaine's elegant, spacious letterforms (96px at -0.02em letter-spacing for display, 56px for headline-lg) command attention and convey sophistication, while Inter's compact, geometric structure (16px body-md, 14px label-md at 0.01em tracking) ensures readability and precision in dense information layouts. Display text uses 400 weight (not bold) to maintain the minimalist aesthetic; weight variation is reserved for labels (600) and body emphasis. Line-height is generous (104px for display, 28px for body-lg) to prevent the dark background from creating visual fatigue. On small

Layout

The layout follows a **12-column fluid grid** with a maximum container width of 1280px, ensuring responsive scaling from mobile to desktop. The hero section uses asymmetric composition: left-aligned text (headline, body copy, dual CTAs) occupies 40% of the viewport width, while the right side features a 3D rendered illustration that bleeds to the edge, creating visual depth and breaking the monotony of pure typography. Spacing uses a semantic scale: lg (40px) separates major sections (hero from features, features from testimonials), md (24px) creates breathing room within cards and component groups, and sm (12px) provides micro-spacing between inline elements. The gutter (24px) defines the horizontal margin on all sides, creating a consistent frame. White-space is aggressive—the design fav

Elevation & Depth

Depth is conveyed through **subtle layering and precise shadow placement** rather than dramatic gradients or glassmorphism. The elevation system uses three levels: Level 1 (Base) is the pure black surface (rgb(0, 0, 0)) with no shadow. Level 2 (Standard Cards/Inputs) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a soft halo that lifts elements 4px above the base. Level 3 (Modals/Popovers) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), a larger blur radius (40px) and greater vertical offset (16px) that signals prominence and focus. Interactive elements (buttons, inputs) gain a

Shapes

The shape philosophy is **Functional Precision**—rounded corners are used sparingly and purposefully, never as decoration. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a subtle softness that feels approachable without sacrificing technical credibility. Cards and containers use the same lg radius for consistency. Inputs and smaller UI components use DEFAULT (0.5rem / 8px), a tighter radius that signals secondary importance. Badges and pills use full (9999px) for maximum roundness, creating a distinct visual category for status indicators and labels. The

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses white background (#ffffff) on black, 48px height, 12px 24px padding, lg border-radius (16px), and label-md typography (14px, 600 weight). On hover, the background shifts to primary-fixed-dim (#d0d0d0), maintaining contrast while signaling interactivity. The transition is instantaneous (no delay) to feel responsive. **button-secondary** is transparent with a 1px outline (#505050), same dimensions and typography as primary, used for secondary actions like "Documentation." On hover, the background fills with surface-container-high (#262626) and the outline brightens to outline (#505050), creating a subtle fill effect. **button-ghost** is text-only (no background, no border), used for tertiary actions or

Do's and Don'ts

**Do**

• Do use white (#ffffff) for primary CTAs and high-emphasis interactive elements—it's the brand's signature accent and commands attention on the black canvas.
• Do maintain aggressive white-space around content; resist the urge to fill empty areas. The emptiness is intentional and reinforces the minimalist, developer-focused aesthetic.
• Do apply the full border-radius scale consistently: lg for buttons and major containers, DEFAULT for inputs, full for badges. Mixing radii within a component category creates visual confusion.
• Do use the secondary accent (#62ffb3) sparingly—only for success states, forward-looking actions, or highlights that deserve celebration. Overuse dilutes its impact.
• Do pair Domaine headlines with Inter body text; never reverse this pairing. The serif-to-sans transition signals hierarchy and maintains visual rhythm.

**Don't**

• Don't use pure white (#ffffff) for body text or secondary elements—it causes eye strain on the dark background. Use on-surface (#f0f0f0) instead.
• Don't add decorative shadows or gradients beyond the defined elevation system. The dark aesthetic is powerful precisely because it's restrained.
• Don't mix border-radius values arbitrarily (e.g., 12px on one button, 20px on another). Stick to the defined scale: sm, DEFAULT, md, lg, xl, full.
• Don't use the tertiary accent (#ffff92) for primary CTAs or positive actions—it's reserved for warnings and highlights. Using it for success states creates confusion.
• Don't apply rounded corners to every edge. Sharp corners (0px) on certain elements (like full-width sections or hero backgrounds) create visual contrast and prevent the design from feeling overly soft.