# Resend — Marketing Site Design Spec

> Source: resend.com + resend.com/login (live DOM, computed styles), 2026-07-06; motion/effects pass 2026-07-07.
> Coverage: marketing site + login page. Dashboard: captured 2026-07-07 — see `../app/DESIGN.md` (dark-theme frosted console). Responsive: not captured.

## 1. Visual Theme & Atmosphere

Cinematic developer-dark: a pure black stage where glow and gradient accents are used like stage lighting. Elegant serif display type sits over an Inter-based UI, with Radix color scales underpinning the palette. Controls are pill-shaped, and surfaces are frosted alpha whites/cyans layered over black rather than solid grays, giving a frosted-glass feel. Elevation comes from light — inner highlights, spotlights, glow-on-hover — not shadow, and the layout stays airy with full-viewport sections. Feels: cinematic, premium, developer-noir.

## 2. Color Palette & Roles

### Core (dark)
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Page background — true black |
| text-primary | `#f0f0f0` | Headings, body on black |
| text-secondary | `#a1a4a5` | Nav items, descriptions |
| text-faint | `#ffffff99` | Muted labels on tinted chips |
| gray-1 | `#141516` | First raised surface |
| surface-tint | `#dbf6ff1c` / `#d9efff2f` | Frosted cyan-white overlays for chips/cards (alpha over black) |

### System
Built on **Radix Colors** — full 12-step alpha scales present as CSS vars: `--black-a1..a12`, `--mauve-a1..a12`, `--slate-a1..a12`, `--gray-1..12` (176 vars total). Surfaces are usually *alpha* whites/cyans over black rather than solid grays — gives a frosted-glass feel.

### Accents
- Cyan/ice glow: `#dbf6ff` family at low alpha for highlights, borders, chip fills
- Gradient text/lighting: white→transparent vertical fades on display type; radial spotlight gradients behind hero objects
- Success/delivery green + syntax colors appear inside code/product mock panels only

Rule: surfaces are alpha whites/cyans over black, never solid gray cards. Rule: success green and syntax colors stay inside code/product mock panels.

## 3. Typography Rules

Three families, strict roles: **Domaine Display** (serif, fallback Georgia) for hero display only; **ABC Favorit** (geometric sans) for section headings; **Inter** for everything else — body, nav, buttons, code labels.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero display (Domaine Display) | 96px / 96px | 400 | -0.96px (-1%) |
| Section heading (ABC Favorit) | 56px / 67px | 400 | -2.8px (-5%) |
| Body (Inter) | 16–18px / 1.5 | — | — |
| UI (Inter) | 14px | — | — |
| Nav (Inter) | 14px | 500 | — |
| Mono (code samples) | 13–14px | — | — |

Patterns: display serif at 400 weight, never bold — elegance from size, not weight. Extremely tight tracking on big sans headings (-5%). Body/paragraph is `#a1a4a5` on black. Mono is syntax-highlighted on `#141516` panels. Nav is `#a1a4a5`, hover `#f0f0f0`.

## 4. Component Stylings

### Buttons
- **Primary ("Get started")**: pill (r 9999 or 16px), bg light frosted `#2a2b2c`→gradient (light gray on black), text `#f0f0f0`, subtle 1px alpha border + inner highlight; h 40–48px, 14px/600 Inter. Hover: brightens.
- **Secondary/link ("Documentation")**: text-only `#a1a4a5`, hover `#f0f0f0`, optional →
- **Announcement pill**: h 32px, transparent bg, 1px `#ffffff26` border, full radius, 14px/400, trailing chevron; hover border brightens.
- **Auth (login page)**: full-width dark cards h 48px, r 12px, bg `#141516`, 1px `#ffffff14` border, icon+label 14px/600; disabled submit at 30% opacity.

### Inputs (login)
- h 48px, r 12px, bg `#0a0b0c`, border 1px `#ffffff14`, subtle inner gradient, placeholder `#5c5e63`; label above 14px `#a1a4a5`. Focus: cyan-tinted ring.

### Feature chips / tags
- Pill, bg `#dbf6ff1c` (frosted cyan), text `#ffffff99`, 14px/500, h 38px — used as floating feature callouts ("Send with Next.js").

### Cards
- bg alpha-white over black (`#d9efff10`–`#1c1d1e`), r 16px, 1px alpha border, generous 24–32px padding; often contain product screenshots or 3D renders with spotlight gradients.

### Code panel (marketing signature)
- r 16px, bg `#101112`, 1px `#ffffff14` border, traffic-light dots or lang tabs, syntax: green strings, blue keywords, gray comments; floating "delivered" email chips beside it.

## 5. Layout Principles

- Content max-width ~1200px; spacing is airy — hero occupies full viewport; sections 120–160px apart.
- Nav: h 58px, transparent over black, center links, right Login + pill CTA.
- Hero: left-aligned display serif ("Email for developers"), 2 lines, subhead `#a1a4a5`, dual CTA; right side: dramatic 3D object (black cube) under white spotlight.
- Alternating full-viewport sections; big serif or Favorit statements; spotlight/radial gradients as section dividers (light beams from top or horizon lines).
- Logo walls: gray monochrome logos at ~40% opacity.

## 6. Depth & Elevation

- Radii: **pills everywhere** — primary buttons/chips 9999px; secondary radius 16px; small elements 8px; code panels 12–16px.
- Control heights: nav CTA 40px, hero buttons 44–48px, chips 32px.
- Elevation = light, not shadow: inner top-edge highlight `inset 0 1px 0 #ffffff1a`, faint outer glow on hover, alpha borders `#ffffff14`–`#ffffff26`.
- Gradient lighting doubles as depth: radial white spotlights behind hero objects, white→transparent vertical fades on display type.

## 7. Motion

- **Micro-interactions**: Tailwind-style `color/background-color/border-color/opacity` transitions at 0.15s `cubic-bezier(0.4,…)` (54 elements) and 0.2s (49 elements) dominate; occasional `all 0.5s cubic-bezier(0.36,…)`.
- **Entrances**: `hero-text-slide-up-fade` 1s staggered across the hero copy; `webgl-scale-in-fade` 1s on the WebGL hero object; `open-scale-up-fade` 1.5s.
- **Ambient loops**: `rotate` 30s infinite (slow orbital on the hero object); `plop` 1s infinite; `scroll-x` 180s infinite (ultra-slow logo marquee).
- **Keyframes defined**: spin, pulse, `ai-shimmer-text` (text shimmer), `shine`, `scroll-x`, disco. 16 live WAAPI animations at capture.
- Scroll-triggered fade+rise (300–500ms ease-out); nav CTA glow pulse on hover; gradient beams drift.
- No GSAP/Three.js globals detected — WebGL and animation code is custom/bundled.

## 8. Backgrounds, Effects & WebGL

- **WebGL**: one hero canvas ~445×377 rendering the rotating 3D object (custom/bundled renderer, no Three.js global); enters via `webgl-scale-in-fade` 1s, then slow 30s rotate.
- **Video**: one autoplaying background loop (offscreen/lazy at capture) plus three small ~170px autoplay loops used as feature demos.
- **Gradient recipes (computed)**:
  - Spectrum accent: linear `rgba(2,252,239,.44)` → `rgba(255,181,43,.44)` → `rgba(160,43,254,.44)` (cyan → amber → purple, low alpha).
  - Beam/borders: linear transparent → `rgba(143,143,143,.67)` → transparent; sky-pink beam `rgba(56,189,248,0)` → `rgba(232,232,232,.2)` → `rgba(143,143,143,.67)` → `rgba(236,72,153,0)`.
  - Conic spotlight: transparent → `#000` → `rgba(200,200,200,.1)` → transparent.
  - Warm CTA: linear `rgb(255,255,146)` → `rgb(238,137,18)` (yellow → orange).
  - Frosted panels: linear `rgba(253,253,253,.05)` → `rgba(240,240,228,.1)`; black fades.
- **Glass**: `backdrop-filter: blur(25px)` on frosted panels.
- Character: dark canvas with low-alpha spectral gradients as light sources, shimmer/shine text effects, one 3D WebGL hero object.

## 9. Do's and Don'ts

### Do
- Keep the page background true black `#000000`.
- Enforce strict family roles: Domaine Display serif for hero display only, ABC Favorit for section headings, Inter for everything else.
- Keep display type at 400 weight — get elegance from size, not weight.
- Use extremely tight tracking (-5%) on big sans headings.
- Build surfaces as frosted alpha whites/cyans over black (`#dbf6ff1c` fills, `#ffffff14`–`#ffffff26` borders).
- Use pill shapes for controls: 9999px primary buttons/chips, 16px secondary radius.
- Treat light as elevation: inner top-edge highlight `inset 0 1px 0 #ffffff1a`, faint outer glow on hover, radial spotlights and gradient beams.
- Keep spacing airy: sections 120–160px apart, content max ~1200px, full-viewport hero.
- Keep nav links `#a1a4a5` with hover to `#f0f0f0`; logo walls gray monochrome at ~40% opacity.
- Keep motion slow and cinematic: scroll-triggered fade+rise at 300–500ms ease-out.
- Keep micro-interactions fast (150–200ms color/opacity transitions) and reserve 1s staggered entrances for the hero and WebGL object.
- Use the low-alpha spectrum gradient (cyan → amber → purple at ~.44 alpha) and gradient beams as accent lighting; frosted panels get `backdrop-filter: blur(25px)`.
- Keep ambient loops ultra-slow: 30s rotation on the hero object, 180s logo marquee.

### Don't
- Don't bold the display serif — it is never bold.
- Don't use solid gray cards — surfaces are alpha layers over black.
- Don't use shadows for elevation — elevation is light (highlights, glow), not shadow.
- Don't let success/delivery green or syntax colors appear outside code/product mock panels.

## 10. Responsive Behavior

Not captured — media queries were truncated in extraction, so breakpoints could not be reliably determined.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#f0f0f0` · Muted `#a1a4a5` · Border `#ffffff14` · Accent `#dbf6ff` (low alpha)
- Font: Domaine Display (hero, fallback Georgia) / ABC Favorit (headings) / Inter (UI) · Body: 16px · Radius: 9999px pill / 16px card · Control height: 40–48px
- Focus: cyan-tinted ring (login inputs) · Hover fill: not captured — hovers brighten text (`#a1a4a5` → `#f0f0f0`) and borders instead

<resend_design_language>
Use the Resend design language: true black #000 page, cinematic and airy. Type system: elegant serif display (e.g. 'Domaine Display', fallback Georgia) at 96px/400 weight for the hero only; geometric sans for 56px section headings with -5% tracking; Inter for all UI, body 16px, text #f0f0f0, secondary #a1a4a5. Surfaces are frosted alpha layers over black (#dbf6ff1c cyan-tinted fills, #ffffff14 borders, backdrop blur 25px), never solid gray cards. Pill-shaped controls with inner top highlight (inset 0 1px 0 #ffffff1a); inputs 48px, radius 12px, bg #0a0b0c. Light = elevation: radial/conic spotlights, gradient beams, and low-alpha spectral gradients (cyan→amber→purple at ~44% alpha) instead of shadows; shimmer/shine text effects; hero centers on a slowly rotating 3D WebGL object. Motion: 150-200ms micro-transitions, 1s staggered hero entrances, 30s rotation, 180s marquee. Feels: cinematic, premium, developer-noir. Avoid: bold display serif, solid gray cards, drop shadows for elevation, and green/syntax colors outside code panels.
</resend_design_language>