Resend

---
version: alpha
name: "Resend — Editorial serif statement over a technical dark canvas"
description: "An independently described visual reference, based on the archived desktop screenshot."
colors:
  primary: "#F2F2F2"
  neutral: "#000000"
  surface: "#0C0C0C"
  muted: "#A0A0A0"
  accent: "#5EA8FF"
typography:
  display:
    fontFamily: "Georgia, Times New Roman, serif"
    fontSize: 76px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.03em
  body:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  code:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    lineHeight: 1.5
rounded:
  card: 8px
  button: 999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  section: 96px
components:
  page:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.lg}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label}"
    rounded: "{rounded.button}"
    padding: "{spacing.md}"
---
## Overview

A developer-email reference balancing expressive serif hero typography with precise dark technical interfaces. The archived desktop page is predominantly black, with subdued atmospheric product artwork, white/gray text and sparse cool highlights. Large code samples and editor demonstrations provide evidence beneath the editorial opening.

Reference: https://resend.com/ · archived screenshot: 2026-09-12T11:47:04.137862+00:00 · desktop viewport: 1440px.
This describes the captured reference, not an official brand specification. Palette,
fonts, dimensions and responsive suggestions below are **inferred implementation
starting points** from the screenshot, not extracted CSS or verified source tokens.
Do not treat partially loaded sections as intentional blank space.

To use: place this file in your repository and ask your coding agent to follow its
visual direction with the reference screenshot. Adapt the content to your product;
do not reuse source logos, photographs, illustrations or endorsements without rights.

## Colors

Use #000000 for the main canvas, #F2F2F2 for primary text, and
#0C0C0C for secondary surfaces. Supporting text starts at #A0A0A0; verify
contrast at the actual size and background. The accent #5EA8FF is selective,
not a default fill for all elements. These approximate rendered colors are not
claims of exact brand values.

## Typography

Start with Georgia, Times New Roman, serif for display text and Arial, Helvetica, sans-serif for body copy.
The supplied font stacks are portable approximations; exact families and font
licensing were not verified. Use 76px desktop display text, 16px body and
14px labels as a starting scale. Preserve concise line lengths and clear hierarchy.
For narrow screens, reduce display text to roughly 36–42px and avoid overflow.

## Layout

Use a centered wide desktop column with roughly 80–100px outer space at 1440px. Lead with a large two-line serif heading near 76px and short sans-serif support text; keep hero actions small enough that the headline remains dominant. Follow with customer logos, a centered integration section and a large code panel. Alternate left-aligned feature headings and paired code/interface examples with centered product showcases. End with a centered serif invitation and a low-contrast multi-column footer. Suggested vertical section gaps are 120–160px, adapted to actual content rather than the blank portions of the captured page.

Mobile layouts were not captured. Suggested adaptation, not an observed source
behavior: use 20–24px side gutters, stack split content below about 760px, preserve
text before related imagery, and let multi-column groups become one column. Keep
code samples scrollable and controls at least 44px high. Verify these decisions in
a real narrow viewport before shipping.

## Elevation & Depth

Use the page/surface contrast and subtle boundaries to establish hierarchy. Product
screenshots may depict deeper nested UI; avoid copying their internal depth rules
onto every marketing section. No live shadows, animations or transition values were
measured. Start with restrained elevation and test legibility in the chosen theme.

## Shapes

Use the 8px card-radius token as an estimate for small surface rounding.
Compact pill-like actions use the button radius; retain rectangular product imagery
where it is visually appropriate. Do not apply one oversized corner radius to every
container.

## Components

Use a Georgia-like serif for expressive headline moments and a neutral sans-serif for navigation, labels and explanatory text; exact source fonts were not verified. Code panels use a dark surface, subtle hairline borders, small colored syntax and a monospace font. A light email-composer canvas inside a dark editor frame creates deliberate local contrast. Small product objects and restrained light effects are supporting media, not a glow applied to every UI element. Primary actions are compact with clearly contrasting labels.

Hover, focus, loading and expanded states were not observable from this still
capture. Provide keyboard-visible focus, distinct disabled states and accessible
expanded controls as implementation requirements, not claims about the reference.
Do not rely on color alone to express state; honor reduced-motion preferences.

## Do's and Don'ts

Preserve the contrast between editorial serif statements and technical code demonstrations. Keep atmosphere subtle and text legible. Do not turn all headings into serif display type, cover content in glow effects, duplicate proprietary brand objects, or infer unseen hover/video behavior from a still image.

Use the captured design as direction, not a pixel-perfect or legally licensed
clone. Prefer your own content and assets. Validate the file and compare your output
against the archived screenshot; refresh this guide externally when that reference
materially changes.