Reference fixture · Resend

Email for developers, not marketing teams.

A token block distilled from Resend's published design system — ABC Favorit with -0.05em display tracking, frost borders instead of gray hairlines, one accent at a time. The fixture you are reading paints from the same :root block agents inline into every Resend artifact.

Send your first email Read the spec See the SDK

v0.1 · stable Press ⌘ K to search the docs.

What this fixture exercises

Built for the way you actually ship.

Every component below pulls from var(--*) — no raw hex outside the documented brand palette, no off-token type. Frost borders carry every container edge; the orange accent appears at most twice per viewport.

One SDK, every runtime.

Node, Python, Ruby, Go, PHP, Rust, Java — same surface, same idempotent send. Drop the SDK into an edge worker and the API contract doesn't shift.

Inspect tokens →

Frost borders, no shadows.

border: 1px solid rgba(214,235,253,.19) replaces every gray hairline. On pure black, blur shadows vanish — the icy line catches what little light there is and reads as a crystalline edge.

Read the rule →

Three fonts, three roles.

ABC Favorit announces, Inter reads, Commit Mono instructs. Display tracking compresses to -0.05em so headlines feel engineered, never decorative.

Inspect typography →

The SDK in two lines

`resend.emails.send`, and you're done.

The code panel is the one surface where Resend's multi- color accent scale is sanctioned: orange for keys, green for strings, yellow for function names, dark gray for comments. Everywhere else, the orange accent holds the chromatic moment alone.

send.ts

// send your first transactional email
import { Resend } from "resend";

const resend = new Resend("re_xxxxx");

await resend.emails.send({
  from: "onboarding@resend.dev",
  to: "delivered@resend.dev",
  subject: "Hello from Resend",
  html: "<p>Shipped.</p>",
});

Form components

Inputs inherit the same tokens.

Focus rings, edges, placeholder color — all derive from --accent and --border. The submit button reuses .btn-pill-white unchanged — white fill, black label, 9999px radius.

No new token is introduced for this section. The form card uses the standard frost border + 16px radius; input shadow-borders read as recessed beneath the card's outer frost line.

Full reference at tokens.css · spec at DESIGN.md.