Developer-noir marketing (serif over Inter, frosted glow) + a light, compact dashboard console that inverts it: Inter only, hairline cards, black pill button.
Browse Resend in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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) |
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.
#dbf6ff family at low alpha for highlights, borders, chip fillsRule: surfaces are alpha whites/cyans over black, never solid gray cards. Rule: success green and syntax colors stay inside code/product mock panels.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
Source: resend.com logged-in dashboard — /emails, /domains, /metrics (live DOM, computed styles), 2026-07-07. Account: ramilrama. Theme: dark (html.dark, localStoragetheme=dark). Coverage: app shell (sidebar, controls, cards, tables). The console shares the marketing site's DNA — pure-black stage with frosted alpha surfaces and cyan-ice borders — but compressed into a dense, utilitarian product UI.
Developer-noir console. A true-black canvas where every surface is a translucent dark pane (#18191c at ~88%) outlined by a faint cyan-ice hairline, so panels read as frosted glass floating on black rather than solid gray cards. One typeface (Inter — the marketing serif is dropped in-app), compact 32px controls at a generous 12px radius, a light blue accent for links/active, and color reserved for status. Elevation comes from the alpha layering and borders, not shadow. Feels: calm, premium, engineered — the marketing site's cinematics distilled into a tool.
| Token | Value | Role / usage |
|---|---|---|
| bg | #000000 | Page + sidebar — true black |
| text-primary | #f0f0f0 | Headings, primary text, active nav |
| text-secondary | #a1a4a5 | Nav items, body, table cells |
| text-faint | rgba(253,254,255,.65) | Muted labels |
| surface-frost | rgba(24,25,28,.88) (≈#18191c) | Nav rows, inputs, chips, buttons — frosted dark pane |
| border-ice | rgba(176,199,217,.145) (≈#b0c7d9/14.5%) | Hairline on surfaces & panels (cyan-tinted alpha) |
| Token | Value | Role |
|---|---|---|
| blue-text | #7eb8ff (display-p3 .49 .72 1) | Links, active/selected text |
| blue-fill | rgba(31,118,255,.22) (display-p3 .122 .463 1 / .22) | Selected/active fill, focus wash |
| Token | Hex | Role |
|---|---|---|
| green | ~#30a46c | Delivered / verified |
| amber | #ad6200 (display-p3) | Warning / pending |
| red | #ce2c31 (display-p3) | Bounce / error / destructive |
Rule: no solid-gray cards — every surface is surface-frost over black with an border-ice hairline. Hue appears only for the blue accent and status.
Single family in-app: Inter (Domaine/ABC Favorit are marketing-only). Hierarchy from size + a light 500 weight, never heavy.
| Role | Size / Line | Weight |
|---|---|---|
| Page heading | 28px / 34 | 500 |
| Body / table cell | 16px | 400 |
| Nav item / control / input | 14px / 20 | 400 |
| Button label / account | 14px | 600 |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds / Effects / WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.