# Resend — DESIGN.md

Near-black developer-email marketing with editorial serif headlines, restrained sans-serif navigation, subtle borders and tactile object imagery.

Independent reference guide from public Incognito viewport captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **serif display + geometric sans**. A family name is not a bundled font licence. Use an available, licensed serif / sans-serif pairing or system fallbacks.

## Marketing — Dark developer-email pages

### Observed palette
- Canvas: #000000
- Elevated surface: #0c0c0c
- Primary text: #f5f5f5
- Muted text: #898989
- Border: #242424
- Accent violet: #8b5cf6
- Button fill: #1c1c1c

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline (serif) | ~56–72px / tight | 400–500 | tight |
| Section / pricing heading | ~40–56px / tight | 400–500 | tight |
| Body / supporting copy | 14–16px / 1.5 | 400 | normal |
| Nav / button label | 12–14px | 500–600 | normal |

### Layout & hierarchy
- Home and the approved feature showcase use a dark hero with a small Resend Forward pill, a large serif Email for developers claim, supporting copy and a quiet Get started / Documentation action pair.
- The hero's right side holds a low-contrast, sculptural black cube, leaving generous negative space around the headline.
- Pricing keeps the same black chrome, centers Pricing and a short subtitle, switches between Transactional emails and Marketing emails, then uses a volume slider above Free, Pro, Scale and Custom cards.

### Components & behavior
- Primary CTA: dark elevated rounded button with a light label (Get started).
- Secondary CTA: text action (Documentation) with muted contrast.
- Event / campaign pill: thin violet-to-teal outline around a small announcement link.
- Pricing control: segmented email type toggle and a horizontal volume ruler with a large white thumb.
- Cards: near-black surfaces with subtle one-pixel borders and restrained type hierarchy.

## Scope
This is a marketing-only, logged-out capture (home, pricing and the home product showcase). No product UI, dashboard, login session, API keys, signup submission or authenticated state was captured. The feature slot honestly reuses the home product showcase: /features redirected to /home and /emails redirected to /login, so no login flow was entered.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast; do not rely on near-black contrast alone for body copy.
- Recommended: use a 4px spacing base, keep dark surfaces layered with subtle borders, and let volume controls remain keyboard accessible.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system serif / sans-serif pairing.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Black chrome with Resend nav, Resend Forward pill, serif Email for developers hero, supporting copy, Get started / Documentation actions and a sculptural cube showcase. Screenshot: captures/resend-marketing-home.jpg.
- Pricing: Black Pricing hero with transactional / marketing email toggle, volume ruler and Free / Pro / Scale / Custom cards. Screenshot: captures/resend-marketing-pricing.jpg.
- Feature / product showcase: Intentionally the same home showcase as the feature capture. /features redirected to /home and /emails redirected to /login; no auth was entered. Screenshot: captures/resend-marketing-feature.jpg.