# Resend — Dashboard (App) Design Spec

> Source: resend.com logged-in dashboard — /emails, /domains, /metrics (live DOM, computed styles), 2026-07-07. Account: ramilrama. Theme: **dark** (`html.dark`, localStorage `theme=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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core (dark)
| 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) |

### Accent (blue)
| 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 |

### Status
| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

### Sidebar nav
- Width `250px`, bg `#000`, 16px padding. Rows: h `32px`, 14px/400 `#a1a4a5`, radius `12px`, padding `0 12px`. Active/hover: fill `surface-frost` `rgba(24,25,28,.88)`, text → `#f0f0f0`. Sections: Emails, Broadcasts, Automations, Templates, Audience, Metrics, Domains, Logs, API keys, Webhooks, Settings; footer: Docs, Need help?. Top: account switcher (14/600 + avatar).

### Buttons
- **Primary**: solid light — bg `#ededed`/white, text `#000`, radius `12px`, h `32px`, 14px/600 (inverts the light theme's black button). e.g. "Add domain".
- **Ghost / secondary**: `surface-frost` bg, `#f0f0f0` text, `border-ice` hairline, radius 12; hover brightens the frost.

### Inputs / search
- bg `surface-frost` `rgba(24,25,28,.88)`, 1px `border-ice`, radius `12px`, h `32px`, 14px/400, leading icon (padding-left 36). Focus: `blue-fill` ring / brighter ice border.

### Cards / panels
- `surface-frost` (or transparent) with a 1px `border-ice` hairline, radius `24px`, **no shadow** (flat, frosted). Metrics charts and grouped content sit in these panes. Large 24px radius contrasts the compact 32px controls.

### Tables / lists
- Row height `32px`, 16px/400, `border-ice` dividers; status as colored text/badges (green delivered, red bounced, amber pending). Domains/Logs/Emails are table-first with empty-state prompts.

### Badges / status
- Small pills tinted with the status hue over a low-alpha fill (verified green, pending amber, failed red).

## 5. Layout Principles

Fixed 250px left sidebar + fluid main content on true black. Main: page heading (28/500) → filter/segment controls (time range, domain filter) → a table or a grid of 24px-radius frosted metric cards. Dense but breathable; 4px spacing grid; left-aligned, utilitarian.

## 6. Depth & Elevation

Elevation from **alpha layering + light**, not shadow — exactly like the marketing site. Frosted `surface-frost` panes over black, separated by `border-ice` cyan hairlines and inner highlights; no drop shadows anywhere. Active states use the translucent `blue-fill` wash.

## 7. Motion

Minimal and quick: ~120–160ms ease on hover fills (nav rows, buttons), input focus, and row hovers. Charts animate in softly on load. Instant response over spectacle.

## 8. Backgrounds / Effects / WebGL

Solid true-black `#000` — no gradients or WebGL in-app (those belong to marketing). The only "effect" is the frosted-alpha surface treatment (`#18191c`/88% panes with cyan-ice borders) that gives the glass feel. Charts (Metrics) are thin-line/area with a muted grid and status-colored series.

## 9. Do's and Don'ts

- **Do** keep the canvas true black and build every surface from `surface-frost` + `border-ice`.
- **Do** keep controls compact — 32px tall, radius 12; cards radius 24, flat.
- **Do** use the light blue accent for links/active and reserve other hue for status.
- **Don't** use solid-gray cards or drop shadows.
- **Don't** bring the marketing serif or hero glow/gradients into the app.
- **Don't** exceed weight 600; hierarchy is size, not boldness.

## 10. Responsive Behavior

Not captured (desktop console). Expect the 250px sidebar to collapse to an icon rail / drawer at narrow widths; tables become horizontally scrollable.

## 11. Agent Prompt Guide

```
Design a Resend-style dark developer console: a TRUE-BLACK canvas (#000 for both the
250px sidebar and the main area), Inter only — no serif. Text #f0f0f0 primary / #a1a4a5
secondary; hierarchy from size and a light 500 weight (page heading 28/500), never heavy.
Every surface is a FROSTED dark pane — rgba(24,25,28,.88) (#18191c/88%) — outlined by a
faint cyan-ice hairline rgba(176,199,217,.145); no solid-gray cards, no shadows. Sidebar
nav rows 32px, radius 12, padding 0 12; active/hover = the frost fill, text brightens to
#f0f0f0. Inputs use the frost bg + ice border, radius 12, 32px, leading icon. Primary
button is solid light (#ededed bg, black text, radius 12, 32px, 14/600) — the inverse of
a light theme. Cards/panels: frost + ice hairline, radius 24, flat. Accent is light blue
#7eb8ff for links/active with a translucent blue fill rgba(31,118,255,.22) wash; reserve
green/amber/red for status only (verified/pending/failed). Elevation comes from alpha
layering and light, not shadow — the frosted-glass feel of Resend's marketing distilled
into a dense tool. Motion 120-160ms hover fills. Feels: developer-noir, premium, precise.
```