Resend

# Resend — Style Reference
> Obsidian developer terminal — every surface reads like polished black glass under a focused beam of white type.
Theme: dark

Resend is a pure black command surface — the canvas is #000000 with near-zero colorfulness (1%), giving the entire interface the weight of polished obsidian. Headlines use a custom serif (Domaine) at display sizes with tight -0.01em tracking, while UI copy runs in Inter and monospaced code elements appear in CommitMono, creating a three-voice typographic hierarchy that signals dev tooling without decoration. Color appears almost exclusively as functional data punctuation: violet for code identity, blue for interactive borders, and a handful of vivid status colors (green, red, yellow, light blue) that function as email event indicators — never as decoration. The system uses subtle border-based elevation (1px hairlines at #292d30) rather than shadows, keeping all surfaces flush and matte on black.

## Colors
| Name | Value | Role |
|------|-------|------|
| Electric Blue | `#3b9eff` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |
| Resend Violet | `#9281f7` | Code syntax highlights, email address text in product UI, decorative icon borders — the brand's signature hue, always used inside product surfaces rather than nav or shell; Email app icon gradient from violet to purple — product identity mark |
| Delivered Green | `#3ad389` | Green decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |
| Bounced Red | `#ff9592` | Red decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |
| Complained Yellow | `#ffca16` | Yellow decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |
| Opened Blue | `#70b8ff` | Blue decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |
| Clicked Lavender | `#baa7ff` | Violet decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |
| Void Black | `#000000` | Page canvas, card backgrounds — the dominant surface across every section |
| Surface Lift | `linear-gradient(rgb(27, 27, 27), rgb(3, 3, 3))` | Subtle card-to-canvas gradient top — barely perceptible surface elevation on dark UI |
| Graphite Rail | `#292d30` | Component borders, dividers, image frames — hairline structural separation on black |
| Smoke | `#464a4d` | Subtle secondary borders and muted text-adjacent strokes |
| Ash | `#6c6c6c` | Tertiary text, badge labels, de-emphasized body content |
| Steel | `#6e727a` | Secondary body text, icon strokes at reduced opacity |
| Fog | `#a1a4a5` | Primary muted body text, icon fills, badge borders |
| Mist | `#abafb4` | Slightly brighter secondary UI text, active badge outlines |
| Frost | `#f0f0f0` | Primary content text — headings, body copy, nav labels — the single high-contrast text color on black |
| Pure White | `#ffffff` | Maximum-emphasis text, icon fills, active button labels |

## Typography
| Family | Role |
|--------|------|
| Inter | All UI chrome — nav, buttons, body copy, captions, links. The workhorse that disappears into the interface. 600 weight used for interactive emphasis, 400 for running text. |
| Domaine | Display-only serif for the largest hero statements and section closers. Weight 400 at near-100px is anti-convention — most dev tools use grotesque sans at this scale, the serif creates authority through editorial restraint. Tightest tracking in the system. |
| ABCFavorit | Section headings and subheadings. At 56px weight 400 with -0.05em tracking, punches well above its point size. At 14-20px used for feature labels and callouts. The custom geometric grotesque gives sharper corners than Inter, distinguishing marketing headings from UI copy. |
| CommitMono | Code samples, badge labels, filename strings, and terminal-style inline snippets. Distinguishes developer content from prose at a glance — the monospace voice signals 'this is actual code', not metaphor. |