source

---
name: Resend
description:
  Dark cinematic canvas with pure black void, three-font editorial hierarchy,
  icy blue-tinted frost borders, and multi-color accent system.
originalFonts:
  primary: "domaine"
  mono: "commitMono"
  fallbacks:
    - "ui-sans-serif"
    - "system-ui"
colors:
  background: "#000000"
  surface: "#000000"
  ink: "#f0f0f0"
  ink-muted: "#a1a4a5"
  accent: "#ff801f"
  accent-alt: "#3b9eff"
  border: "rgba(214, 235, 253, 0.19)"
  link: "#3b9eff"
  void-black: "#000000"
  near-white: "#f0f0f0"
  pure-white: "#ffffff"
  orange-4: "#ff5900"
  orange-10: "#ff801f"
  orange-11: "#ffa057"
  green-3: "#22ff99"
  green-4: "#11ff99"
  blue-4: "#0075ff"
  blue-5: "#0081fd"
  blue-10: "#3b9eff"
  yellow-9: "#ffc53d"
  red-5: "#ff2047"
  silver: "#a1a4a5"
  dark-gray: "#464a4d"
  mid-gray: "#5c5c5c"
  medium-gray: "#494949"
  light-gray: "#f8f8f8"
  border-gray: "#eaeaea"
  edge-gray: "#ececec"
  mist-gray: "#dedfdf"
  soft-gray: "#e5e6e6"
  frost-primary: "#fcfdff"
  frost-border: "rgba(214, 235, 253, 0.19)"
  frost-border-alt: "rgba(217, 237, 254, 0.145)"
typography:
  h1:
    family: "Fraunces"
    size: "6rem"
    weight: 400
    lineHeight: 1.0
  h2:
    family: "Inter"
    size: "3.5rem"
    weight: 400
    lineHeight: 1.2
  h3:
    family: "Inter"
    size: "1.5rem"
    weight: 500
    lineHeight: 1.5
  body:
    family: "Inter"
    size: "1rem"
    weight: 400
    lineHeight: 1.5
  code:
    family: "JetBrains Mono"
    size: "1rem"
    weight: 400
    lineHeight: 1.5
spacing:
  xs: "0.5rem"
  sm: "0.75rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "2.5rem"
rounded:
  sm: "4px"
  md: "8px"
  lg: "16px"
  xl: "9999px"
shadows:
  sm: "rgba(176, 199, 217, 0.145) 0px 0px 0px 1px"
  md: "rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
components:
  button-primary:
    background: "{colors.pure-white}"
    color: "{colors.void-black}"
    border: "1px solid {colors.pure-white}"
    radius: "{rounded.xl}"
    padding: "5px 12px"
  button-secondary:
    background: "transparent"
    color: "{colors.near-white}"
    border: "1px solid {colors.border}"
    radius: "{rounded.xl}"
    padding: "5px 12px"
  card:
    background: "transparent"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "1.5rem"
  input:
    background: "transparent"
    color: "{colors.near-white}"
    border: "1px solid {colors.border}"
    radius: "{rounded.sm}"
    padding: "0.5rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of Resend

## 1. Visual Theme & Atmosphere

Resend's website is a dark, cinematic canvas that treats email infrastructure
like a luxury product. The entire page is draped in pure black (`#000000`) with
text that glows in near-white (`#f0f0f0`), creating a theater-like experience
where content performs on a void stage. This isn't the typical developer-tool
darkness — it's the controlled darkness of a photography gallery, where every
element is lit with intention and nothing competes for attention.

The typography system is the star of the show. Three carefully chosen typefaces
create a hierarchy that feels both editorial and technical: Domaine Display (a
Klim Type Foundry serif) appears at massive 96px for hero headlines with
barely-there line-height (1.00) and negative tracking (-0.96px), creating
display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles
section headings with an even more aggressive letter-spacing (-2.8px at 56px),
giving a compressed, engineered quality to mid-tier text. Inter takes over for
body and UI, providing the clean readability that lets the display fonts shine.
Commit Mono rounds out the family for code blocks.

What makes Resend distinctive is its icy, blue-tinted border system. Instead of
neutral gray borders, Resend uses `rgba(214, 235, 253, 0.19)` — a frosty,
slightly blue-tinted line at 19% opacity that gives every container and divider
a cold, crystalline quality against the black background. Combined with
pill-shaped buttons (9999px radius), multi-color accent system (orange, green,
blue, yellow, red — each with its own CSS variable scale), and OpenType
stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`), the result is a design
system that feels premium, precise, and quietly confident.

**Key Characteristics:**

- Pure black background with near-white (`#f0f0f0`) text — theatrical,
  gallery-like darkness
- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric
  sections), Inter (body/UI)
- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a
  cold, crystalline shimmer
- Multi-color accent system: orange, green, blue, yellow, red — each with
  numbered CSS variable scales
- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds
- OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`) on display
  fonts
- Commit Mono for code — monospace as a design element, not an afterthought
- Whisper-level shadows using blue-tinted ring:
  `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`

## 2. Color Palette & Roles

### Primary

- **Void Black** (`#000000`): Page background, the defining canvas color (95%
  opacity via `--color-black-12`)
- **Near White** (`#f0f0f0`): Primary text, button text, high-contrast elements
- **Pure White** (`#ffffff`): `--color-white`, maximum emphasis text, link
  highlights

### Accent Scale — Orange

- **Orange 4** (`#ff5900`): `--color-orange-4`, at 22% opacity — subtle warm
  glow
- **Orange 10** (`#ff801f`): `--color-orange-10`, primary orange accent — warm,
  energetic
- **Orange 11** (`#ffa057`): `--color-orange-11`, lighter orange for secondary
  use

### Accent Scale — Green

- **Green 3** (`#22ff99`): `--color-green-3`, at 12% opacity — faint emerald
  wash
- **Green 4** (`#11ff99`): `--color-green-4`, at 18% opacity — success indicator
  glow

### Accent Scale — Blue

- **Blue 4** (`#0075ff`): `--color-blue-4`, at 34% opacity — medium blue accent
- **Blue 5** (`#0081fd`): `--color-blue-5`, at 42% opacity — stronger blue
- **Blue 10** (`#3b9eff`): `--color-blue-10`, bright blue — links, interactive
  elements

### Accent Scale — Other

- **Yellow 9** (`#ffc53d`): `--color-yellow-9`, warm gold for warnings or
  highlights
- **Red 5** (`#ff2047`): `--color-red-5`, at 34% opacity — error states,
  destructive actions

### Neutral Scale

- **Silver** (`#a1a4a5`): Secondary text, muted links, descriptions
- **Dark Gray** (`#464a4d`): Tertiary text, de-emphasized content
- **Mid Gray** (`#5c5c5c`): Hover states, subtle emphasis
- **Medium Gray** (`#494949`): Quaternary text
- **Light Gray** (`#f8f8f8`): Light mode surface (if applicable)
- **Border Gray** (`#eaeaea`): Light context borders
- **Edge Gray** (`#ececec`): Subtle borders on light surfaces
- **Mist Gray** (`#dedfdf`): Light dividers
- **Soft Gray** (`#e5e6e6`): Alternate light border

### Surface & Overlay

- **Frost Primary** (`#fcfdff`): Primary color token (slight blue tint, 94%
  opacity)
- **White Hover** (`rgba(255, 255, 255, 0.28)`): Button hover state on dark
- **White 60%** (`oklab(0.999994 ... / 0.577)`): Semi-transparent white for
  muted text
- **White 64%** (`oklab(0.999994 ... / 0.642)`): Slightly brighter
  semi-transparent white

### Borders & Shadows

- **Frost Border** (`rgba(214, 235, 253, 0.19)`): The signature — icy
  blue-tinted borders at 19% opacity
- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`): Slightly lighter variant
  for list items
- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`): Blue-tinted
  shadow-as-border
- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`): Heavy black focus ring
- **Subtle Shadow**
  (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`):
  Minimal card elevation

## 3. Typography Rules

### Font Families

- **Display Serif**: `domaine` (Domaine Display by Klim Type Foundry) — hero
  headlines
- **Display Sans**: `aBCFavorit` (ABC Favorit by Dinamo), fallbacks:
  `ui-sans-serif, system-ui` — section headings
- **Body / UI**: `inter`, fallbacks: `ui-sans-serif, system-ui` — body text,
  buttons, navigation
- **Monospace**: `commitMono`, fallbacks:
  `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
- **Secondary**: `Helvetica` — fallback for specific UI contexts
- **System**: `-apple-system, system-ui, Segoe UI, Roboto` — embedded content

### Hierarchy

| Role                | Font       | Size             | Weight  | Line Height    | Letter Spacing | Notes                                        |
| ------------------- | ---------- | ---------------- | ------- | -------------- | -------------- | -------------------------------------------- |
| Display Hero        | domaine    | 96px (6.00rem)   | 400     | 1.00 (tight)   | -0.96px        | `"ss01", "ss04", "ss11"`                     |
| Display Hero Mobile | domaine    | 76.8px (4.80rem) | 400     | 1.00 (tight)   | -0.768px       | Scaled for mobile                            |
| Section Heading     | aBCFavorit | 56px (3.50rem)   | 400     | 1.20 (tight)   | -2.8px         | `"ss01", "ss04", "ss11"`                     |
| Sub-heading         | aBCFavorit | 20px (1.25rem)   | 400     | 1.30 (tight)   | normal         | `"ss01", "ss04", "ss11"`                     |
| Sub-heading Compact | aBCFavorit | 16px (1.00rem)   | 400     | 1.50           | -0.8px         | `"ss01", "ss04", "ss11"`                     |
| Feature Title       | inter      | 24px (1.50rem)   | 500     | 1.50           | normal         | Section sub-headings                         |
| Body Large          | inter      | 18px (1.13rem)   | 400     | 1.50           | normal         | Introductions                                |
| Body                | inter      | 16px (1.00rem)   | 400     | 1.50           | normal         | Standard body text                           |
| Body Semibold       | inter      | 16px (1.00rem)   | 600     | 1.50           | normal         | Emphasis, active states                      |
| Nav Link            | aBCFavorit | 14px (0.88rem)   | 500     | 1.43           | 0.35px         | `"ss01", "ss03", "ss04"` — positive tracking |
| Button / Link       | inter      | 14px (0.88rem)   | 500–600 | 1.43           | normal         | Buttons, nav, CTAs                           |
| Caption             | inter      | 14px (0.88rem)   | 400     | 1.60 (relaxed) | normal         | Descriptions                                 |
| Helvetica Caption   | Helvetica  | 14px (0.88rem)   | 400–600 | 1.00–1.71      | normal         | UI elements                                  |
| Small               | inter      | 12px (0.75rem)   | 400–500 | 1.33           | normal         | Tags, meta, fine print                       |
| Small Uppercase     | inter      | 12px (0.75rem)   | 500     | 1.33           | normal         | `text-transform: uppercase`                  |
| Small Capitalize    | inter      | 12px (0.75rem)   | 500     | 1.33           | normal         | `text-transform: capitalize`                 |
| Code Body           | commitMono | 16px (1.00rem)   | 400     | 1.50           | normal         | Code blocks                                  |
| Code Small          | commitMono | 14px (0.88rem)   | 400     | 1.43           | normal         | Inline code                                  |
| Code Tiny           | commitMono | 12px (0.75rem)   | 400     | 1.33           | normal         | Small code labels                            |
| Heading (Helvetica) | Helvetica  | 24px (1.50rem)   | 400     | 1.40           | normal         | Alternate heading context                    |

### Principles

- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit
  (geometric sans, sections), Inter (readable body). Each font has a strict role
  — they never cross lanes.
- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit
  at -2.8px. The display type feels compressed, urgent, and designed — like a
  magazine masthead.
- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing
  — the only positive tracking in the system. This creates airy, spaced-out
  navigation text that contrasts with the compressed headings.
- **OpenType as identity**: The `"ss01"`, `"ss03"`, `"ss04"`, `"ss11"` stylistic
  sets are enabled on all ABC Favorit and Domaine text, activating alternate
  glyphs that give Resend's typography its unique character.
- **Commit Mono as design element**: The monospace font isn't hidden in code
  blocks — it's used prominently for code examples and technical content,
  treated as a first-class visual element.

## 4. Component Stylings

### Buttons

**Primary Transparent Pill**

- Background: transparent
- Text: `#f0f0f0`
- Padding: 5px 12px
- Radius: 9999px (full pill)
- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)
- Use: Primary CTA on dark backgrounds

**White Solid Pill**

- Background: `#ffffff`
- Text: `#000000`
- Padding: 5px 12px
- Radius: 9999px
- Use: High-contrast CTA ("Get started")

**Ghost Button**

- Background: transparent
- Text: `#f0f0f0`
- Radius: 4px
- No border
- Hover: subtle background tint
- Use: Secondary actions, tab items

### Cards & Containers

- Background: transparent or very subtle dark tint
- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
- Radius: 16px (standard cards), 24px (large sections/panels)
- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)
- Dark product screenshots and code demos as card content
- No traditional box-shadow elevation

### Inputs & Forms

- Text: `#f0f0f0` on dark, `#000000` on light
- Radius: 4px
- Focus: shadow-based ring
- Minimal styling — inherits dark theme

### Navigation

- Sticky dark header with frost border bottom:
  `1px solid rgba(214, 235, 253, 0.19)`
- "Resend" wordmark left-aligned
- ABC Favorit 14px weight 500 with +0.35px tracking for nav links
- Pill CTAs right-aligned
- Mobile: hamburger collapse

### Image Treatment

- Product screenshots and code demos dominate content sections
- Dark-themed screenshots on dark background — seamless integration
- Rounded corners: 12px–16px on images
- Full-width sections with subtle gradient overlays

### Distinctive Components

**Tab Navigation**

- Horizontal tabs with subtle selection indicator
- Tab items: 8px radius
- Active state with subtle background differentiation

**Code Preview Panels**

- Dark code blocks using Commit Mono
- Frost borders (`rgba(214, 235, 253, 0.19)`)
- Syntax-highlighted with multi-color accent tokens (orange, blue, green,
  yellow)

**Multi-color Accent Badges**

- Each product feature has its own accent color from the CSS variable scale
- Badges use the accent color at low opacity (12–42%) for background, full
  opacity for text

## 5. Layout Principles

### Spacing System

- Base unit: 8px
- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px,
  32px, 40px

### Grid & Container

- Centered content with generous max-width
- Full-width black sections with contained inner content
- Single-column hero, expanding to feature grids below
- Code preview panels as full-width or contained showcases

### Whitespace Philosophy

- **Cinematic black space**: The black background IS the whitespace. Generous
  vertical spacing (80px–120px+) between sections creates a
  scroll-through-darkness experience where each section emerges like a scene.
- **Tight content, vast surrounds**: Text blocks and cards are compact
  internally, but float in vast dark space — creating isolated "islands" of
  content.
- **Typography-led rhythm**: The massive display fonts (96px) create their own
  vertical rhythm — each headline is a visual event that anchors the surrounding
  space.

### Border Radius Scale

- Sharp (4px): Buttons (ghost), inputs, small interactive elements
- Subtle (6px): Menu panels, navigation items
- Standard (8px): Tabs, content blocks
- Comfortable (10px): Accent elements
- Card (12px): Clipboard buttons, medium containers
- Large (16px): Feature cards, images, main buttons
- Section (24px): Large panels, section containers
- Pill (9999px): Primary CTAs, tags, badges

## 6. Depth & Elevation

| Level                   | Treatment                                                             | Use                                        |
| ----------------------- | --------------------------------------------------------------------- | ------------------------------------------ |
| Flat (Level 0)          | No shadow, transparent background                                     | Default — most elements on dark void       |
| Ring (Level 1)          | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`                          | Shadow-as-border for cards, containers     |
| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)`                                 | Explicit borders — buttons, dividers, tabs |
| Subtle (Level 2)        | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Light card elevation                       |
| Focus (Level 3)         | `rgb(0, 0, 0) 0px 0px 0px 8px`                                        | Heavy black focus ring — accessibility     |

**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black
background, traditional shadows are invisible — you can't cast a shadow into the
void. Instead, Resend creates depth through its signature frost borders
(`rgba(214, 235, 253, 0.19)`) — thin, icy blue-tinted lines that catch light
against the darkness. This creates a "glass panel floating in space" aesthetic
where borders are the primary depth mechanism.

### Decorative Depth

- Subtle warm gradient glows behind hero content (orange/amber tints)
- Product screenshots create visual depth through their own internal UI
- No gradient backgrounds — depth comes from border luminance and content
  contrast

## 7. Do's and Don'ts

### Do

- Use pure black (`#000000`) as the page background — the void is the canvas
- Apply frost borders (`rgba(214, 235, 253, 0.19)`) for all structural lines —
  they're the blue-tinted signature
- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section
  headings, Inter for everything else
- Enable OpenType `"ss01"`, `"ss04"`, `"ss11"` on Domaine and ABC Favorit text
- Apply pill radius (9999px) to primary CTAs and tags
- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity
  variants for context-specific highlighting
- Keep shadows at ring level (`0px 0px 0px 1px`) — on black, traditional shadows
  don't work
- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive
  tracking

### Don't

- Don't lighten the background above `#000000` — the pure black void is
  non-negotiable
- Don't use neutral gray borders — all borders must have the frost blue tint
- Don't apply Domaine Display to body text — it's a display-only serif
- Don't mix accent colors in the same component — each feature gets one accent
  color
- Don't use box-shadow for elevation on the dark background — use frost borders
  instead
- Don't skip the OpenType stylistic sets — they define the typographic character
- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive
  +0.35px
- Don't make buttons opaque on dark — transparency with frost border is the
  pattern

## 8. Responsive Behavior

### Breakpoints

| Name         | Width     | Key Changes                               |
| ------------ | --------- | ----------------------------------------- |
| Mobile Small | <480px    | Single column, tight padding, 76.8px hero |
| Mobile       | 480–600px | Standard mobile, stacked layout           |
| Desktop      | >600px    | Full layout, 96px hero, expanded sections |

_Note: Resend uses a minimal breakpoint system — only 480px and 600px detected.
The design is desktop-first with a clean mobile collapse._

### Touch Targets

- Pill buttons: adequate padding (5px 12px minimum)
- Tab items: 8px radius with comfortable hit areas
- Navigation links spaced with 0.35px tracking for visual separation

### Collapsing Strategy

- Hero: Domaine 96px → 76.8px on mobile
- Navigation: horizontal → hamburger
- Feature sections: side-by-side → stacked
- Code panels: maintain width, horizontal scroll if needed
- Spacing compresses proportionally

### Image Behavior

- Product screenshots maintain aspect ratio
- Dark screenshots blend seamlessly with dark background at all sizes
- Rounded corners (12px–16px) maintained across breakpoints

## 9. Agent Prompt Guide

### Quick Color Reference

- Background: Void Black (`#000000`)
- Primary text: Near White (`#f0f0f0`)
- Secondary text: Silver (`#a1a4a5`)
- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)
- Orange accent: `#ff801f`
- Green accent: `#11ff99` (at 18% opacity)
- Blue accent: `#3b9eff`
- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`

### Example Component Prompts

- "Create a hero section on pure black (#000000) background. Headline at 96px
  Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px,
  near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC
  Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff,
  9999px radius) and transparent with frost border (rgba(214,235,253,0.19))."
- "Design a navigation bar: dark background with frost border bottom (1px solid
  rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500,
  letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA
  right-aligned."
- "Build a feature card: transparent background, frost border
  (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400,
  letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text."
- "Create a code block using Commit Mono 16px on dark background. Frost border
  container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff),
  green (#11ff99), yellow (#ffc53d)."
- "Design an accent badge: background #ff5900 at 22% opacity, text #ffa057,
  9999px radius, 12px Inter weight 500."

### Iteration Guide

1. Start with pure black — everything floats in the void
2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural
   element — not gray, not neutral
3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter
   (body) — never cross
4. OpenType stylistic sets are mandatory on display fonts — they define the
   character
5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for
   text
6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for
   containers
7. No shadows — use frost borders for depth against the void