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.

Join the beta

Open
Work email

We'll send the API key and nothing else.