// Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests.
| name | resend-brand |
| description | Use when creating Resend marketing materials, documents, presentations, or visual content. Triggers for Resend brand, Resend style, or Resend visual identity requests. |
| metadata | {"author":"resend","version":"1.0.0"} |
| Name | Hex |
|---|---|
| Resend Black | #000000 |
| Resend White | #FDFDFD |
| Scale | Background | Foreground | Usage |
|---|---|---|---|
| Gray | #16171AEB | #FDFEFFA6 | Structure, hierarchy, and subtle separation |
| Red | #FF173F2D | #FF9592 | Critical states and irreversible actions |
| Amber | #FA820022 | #FFCA16 | Caution and pending states |
| Green | #22FF991E | #46FEA5D4 | Success and completion |
| Blue | #0077FF3A | #70B8FF | Interactive and informational elements |
| Font | Role |
|---|---|
| Domaine Display Narrow | Display headlines (never in product UI) |
| Favorit | Headings & titles |
| Inter | Body text |
| CommitMono | Code |
Display
| Style | Font | Size/Line | Letter Spacing |
|---|---|---|---|
| display/large | Domaine Display Narrow | 96/96 | -0.96px |
| title | Resend Favorit | 60/64 | -2.8px |
| small | Domaine Display Narrow | 72/72 | -0.77px |
Body
| Style | Font | Weight | Size/Line |
|---|---|---|---|
| xlarge | Resend Favorit | Regular | 24/32 |
| large | Inter | Regular/Medium | 18/28 |
| medium | Inter | Regular/Medium/Semi Bold | 16/24 |
| small | Inter | Regular | 14/20 |
| code | CommitMono | Regular | 14/20 |
Wordmark
https://cdn.resend.com/brand/resend-wordmark-white.svghttps://cdn.resend.com/brand/resend-wordmark-white.pnghttps://cdn.resend.com/brand/resend-wordmark-black.svghttps://cdn.resend.com/brand/resend-wordmark-black.pngLettermark
https://cdn.resend.com/brand/resend-icon-white.svghttps://cdn.resend.com/brand/resend-icon-white.pnghttps://cdn.resend.com/brand/resend-icon-black.svghttps://cdn.resend.com/brand/resend-icon-black.pngMinimum clear space = 1/2 cap height on all sides
Never: rotate, apply effects, outline, slant/stretch, use multiple colors, use low resolution, combine symbol+wordmark, modify proportions
Secondary brand symbol. Never use as: primary logo, navigation element, or with modified geometry/colors.
| Name | Value |
|---|---|
| Font gradient | linear-gradient(97deg, #ffffff 30%, rgba(255,255,255,0.50) 100%) |
| Smooth gradient | linear-gradient(96deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.10) 100%) |
| Border | linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.05) 100%) |
| Rainbow border | linear-gradient(90deg, rgba(2,252,239,0.44) 0%, rgba(255,181,43,0.44) 50%, rgba(160,43,254,0.44) 100%) |
| Name | Value |
|---|---|
| Glass blur | backdrop-filter: blur(25px) |
https://resend.com/static/product-pages/noise.pngBrand wallpapers available at: https://resend.com/wallpapers
| Name | Description |
|---|---|
| Right Object Scene | Small label top-left, title top-left (2 lines), 3D object right |
| Interface Scene | Label top-left, title bottom-left (2 lines), UI screenshot background |
| Text Only Scene | Title top-left, 3D abstract scene fills background |
| Text Only Background | Large title centered, subtle texture/gradient background |
| Text Only Subtle | Small centered text (2 lines), minimal dark background |
| Big Number | Large display number centered (Domaine), small label below |
Common patterns:
Use when needing Resend design resources. Routes to brand guidelines, visual identity, UI components, design tokens, and marketing page patterns.
Audit the Resend dashboard for design system alignment. Routes here when a user says "audit design", "design alignment", "dashboard design audit", or when triggered by the scheduled weekly routine.
Use when building or modifying UI in the Resend codebase. Provides component APIs, variant options, design tokens, and composition patterns for all src/ui/ primitives.
Use when creating, updating, editing, or deleting marketing/public pages in the Resend codebase. Covers page structure, component reuse rules, and the distinction between public and product design systems.