---
version: alpha
name: Resend
website: "https://resend.com"
description: |
  Resend's marketing surfaces sit on a near-pure black canvas with off-white
  text and a single signature color — the deep editorial-serif Domaine
  Display headline mark — that gives an otherwise utilitarian developer-tool
  brand its print-magazine confidence. The system pairs Domaine Display
  (oversized 76px–96px serif, ss01/ss04/ss11 features on) with ABC Favorit
  for body and Inter for UI. Surfaces rely on subtle 6–9% opacity gradient
  glows, hairline 1px borders made from translucent white, and a strict
  rounded-12px container vocabulary. There is no decorative chrome — just
  type, code, and atmospheric depth.

seo:
  title: "Resend Design System for React — black canvas, Domaine Display, 19 components"
  metaDescription: "Resend's design system as a DESIGN.md file. Black #000000 canvas, Domaine Display serif, 22 colors, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "Pure black canvas — every public page sits on #000000, never near-black #0a0a0a, with off-white #fcfdff ink carrying the read"
    - "Editorial serif at scale — Domaine Display at 96px / 400 with ss01/ss04/ss11 features makes a developer tool read like a print magazine"
    - "White is the brand — the primary CTA is a small #fcfdff pill with #000000 text, the brightest pixel on every viewport"
    - "Six atmospheric accent glows — orange, yellow, blue, green, red, slate — used only as low-opacity radial washes, never as solid surfaces"
    - "No drop shadows anywhere — depth is built from 6% and 14% translucent-white hairlines plus radial atmospheric gradients"
  tags:
    - "Developer Tools & IDEs"
    - "Communication & Messaging"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Resend looks like a developer tool styled by a literary magazine. The whole brand sits on true black #000000, and the loudest element on every page is not a button or a logo but a 96px Domaine Display serif headline with the ss01, ss04, and ss11 stylistic alternates engaged. That single typographic decision sets the tone: confident, considered, slightly print-editorial, and priced on quality rather than novelty. The supporting cast is technical — ABC Favorit for marketing prose, Inter for UI labels, and Geist Mono for the code wells that anchor most marketing sections.

    This page packages Resend's full visual system into a single DESIGN.md file written against the Google Labs spec. Inside: 22 color tokens (one true #000000 canvas, three near-black surface steps from #06060a to #101012, six atmospheric accent glows from #ff801f orange to #11ff99 green, plus a four-step ink ramp from #fcfdff to #464a4d), 14 typography tokens spanning a 96px hero down to 12px captions, a 7-step radius scale from 0px to 9999px, a 10-step spacing scale topping out at 128px band padding, and 19 components — buttons, cards, code wells, email mockups, pills, status dots, and the global nav and footer.

    Feed this file to Claude, Cursor, or GitHub Copilot and the model will generate React components that hold Resend's discipline: the white-on-black CTA, the 12px feature-card radius, the translucent hairlines that replace shadows entirely, the four-family type stack with strict lane assignments. Reference the tokens directly in Tailwind config or paste them into CSS variables. The reason to study Resend is the restraint — a developer brand that refuses every easy decoration and trusts type, code, and atmospheric color to do the entire job.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Resend's primary brand color?"
      answer: "Resend's brand color is white — specifically #fcfdff, a faintly blue-cool off-white that the system calls `primary`. It carries the brand wordmark, the active text color, and the white-rectangle primary CTA that sits on the #000000 canvas with black #000000 label. The six accent tokens (orange #ff801f, yellow #ffc53d, blue #3b9eff, green #11ff99, red #ff2047, plus a deep slate) never appear as solid CTA surfaces — they exist only as low-opacity radial atmospheric glows anchored at the top edge of select sections."
    - id: "dark-mode"
      title: "Does Resend have a light mode?"
      answer: "No — the entire public marketing canvas is dark-only. Every page opens on true black #000000, and the system has no light surface except a single white email-mockup card used as a print-style inset in the Beyond experience band. Surface elevation runs through #06060a code-window deep, #0a0a0c card surface, and #101012 elevated surface — all near-black variants registering depth via temperature and luminance rather than a light/dark mode switch."
    - id: "typography"
      title: "What fonts does Resend use, and what should I substitute?"
      answer: "Resend ships a four-family stack: Domaine Display (proprietary serif) for hero headlines at 76.8px and 96px with ss01/ss04/ss11 features engaged, ABC Favorit (proprietary humanist sans) for marketing body and pill labels, Inter for UI buttons and captions, and Geist Mono for code wells at 13px. When Domaine Display isn't licensable, Söhne or Tiempos Headline read closest — clamp lineHeight to 1.0 and apply font-feature-settings `ss01, liga`. ABC Favorit substitutes (Geist, Inter Tight) need -0.5% letter-spacing on body sizes to match Favorit's tighter tracking."
    - id: "shadows"
      title: "Why does Resend have no drop shadows?"
      answer: "Drop shadows don't work on a true black canvas — the blur has nothing darker to fall onto. So Resend replaces shadow elevation entirely with translucent-white hairlines: a 6% rgba(255,255,255,0.06) divider for soft separation and a 14% rgba(255,255,255,0.14) strong border for structural framing around cards, code wells, and form inputs. Atmospheric radial glows in the accent colors (at 18–34% opacity) carry section-level depth. Together the hairlines and glows do the full job that progressive shadow tiers do in light systems."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React product?"
      answer: "Yes — feed the file to Claude, Cursor, or any AI tool that reads structured design tokens and it will reproduce Resend's discipline: white-on-black CTAs at 36px height, 12px radius feature cards, the four-family type stack with strict lane assignments, and atmospheric glow washes rather than solid accent surfaces. Every value (#000000 canvas, #0a0a0c card surface, #fcfdff ink, 96px Domaine Display) is a quoted token you can paste into Tailwind config, CSS variables, or your own component library."
    - id: "known-gaps"
      title: "What's missing from the spec?"
      answer: "The Known Gaps section flags four omissions: pressed and active visual states are only documented for `button-primary-pressed`, with other components relying on browser default focus rings; logged-in dashboard surfaces (API keys, sending logs, audience management) are out of scope; the email-template editor — a key product feature behind authentication — is not extracted; and the atmospheric glow rendering uses CSS radial gradients whose exact stops and angles vary per section rather than being standardized as tokens."

colors:
  primary: "#fcfdff"
  primary-on: "#000000"
  ink: "#fcfdff"
  body: "rgba(252,253,255,0.86)"
  charcoal: "rgba(252,253,255,0.7)"
  mute: "#a1a4a5"
  ash: "#888e90"
  stone: "#464a4d"
  on-light: "#000000"
  on-light-mute: "rgba(0,0,51,0.7)"
  canvas: "#000000"
  surface-card: "#0a0a0c"
  surface-elevated: "#101012"
  surface-deep: "#06060a"
  hairline: "rgba(255,255,255,0.06)"
  hairline-strong: "rgba(255,255,255,0.14)"
  divider-soft: "rgba(255,255,255,0.04)"
  accent-orange: "#ff801f"
  accent-orange-glow: "rgba(255,89,0,0.22)"
  accent-yellow: "#ffc53d"
  accent-blue: "#3b9eff"
  accent-blue-glow: "rgba(0,117,255,0.34)"
  accent-green: "#11ff99"
  accent-green-glow: "rgba(34,255,153,0.18)"
  accent-red: "#ff2047"
  accent-red-glow: "rgba(255,32,71,0.34)"
  link: "#3b9eff"
  surface-light: "#f1f7fe"

typography:
  display-xxl:
    fontFamily: Domaine Display
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.96px
    fontFeature: "ss01, ss04, ss11"
  display-xl:
    fontFamily: Domaine Display
    fontSize: 76.8px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.768px
    fontFeature: "ss01, ss04, ss11"
  display-lg:
    fontFamily: ABC Favorit
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -2.8px
    fontFeature: "ss01, ss04, ss11"
  heading-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.4px
  heading-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.3px
  subtitle:
    fontFamily: ABC Favorit
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    fontFeature: "ss01, ss04, ss11"
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: ABC Favorit
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.8px
    fontFeature: "ss01, ss04, ss11"
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
  button-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  button-sm:
    fontFamily: ABC Favorit
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0.35px
    fontFeature: "ss01, ss03, ss04"
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  caption-emph:
    fontFamily: Helvetica
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
  code-md:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  xxxl: 48px
  section: 96px
  band: 128px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-on}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 36px
  button-primary-pressed:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.primary-on}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
  button-ghost:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 8px 16px
    height: 36px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 7px 15px
    height: 36px
  text-input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    height: 40px
  hero-stripe:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xxl}"
    rounded: "{rounded.none}"
    padding: 96px 32px
  feature-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  feature-card-bordered:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  pricing-tier:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  pricing-tier-featured:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  code-window:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.body}"
    typography: "{typography.code-md}"
    rounded: "{rounded.lg}"
    padding: 24px
  code-tab:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.charcoal}"
    typography: "{typography.code-md}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  email-mockup:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "0"
  badge-pill:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.body}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 4px 10px
  status-dot:
    backgroundColor: "{colors.accent-green}"
    rounded: "{rounded.full}"
    size: 8px
  nav-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.none}"
    height: 64px
  sub-nav-pill:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.body}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.full}"
    padding: 6px 14px
  contributor-avatar:
    backgroundColor: "{colors.surface-card}"
    rounded: "{rounded.full}"
    size: 32px
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.charcoal}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 64px 32px
---

## Overview

Resend reads like a developer tool with the typography of an editorial. Every page opens on true black `#000000`, and the loudest element on the canvas is not a button or a brand stamp — it is a 96px Domaine Display serif headline with the `ss01 / ss04 / ss11` stylistic alternates engaged. That single typographic decision sets the brand tone: confident, considered, slightly literary, and priced on quality rather than novelty. The supporting cast is technical. Body copy switches to ABC Favorit for marketing prose and Inter for UI labels, while code blocks render in Geist Mono inside `surface-deep` (`#06060a`) shells with hairline traffic-light dots.

Surface depth is built almost entirely from translucent white. A 6% `rgba(255,255,255,0.06)` hairline carries soft separation, a 14% `rgba(255,255,255,0.14)` strong border frames cards and code wells, and a 4% divider tone separates footer columns. There are no full-band gradients — only soft atmospheric glows in the six accent colors (orange `#ff801f`, yellow `#ffc53d`, blue `#3b9eff`, green `#11ff99`, red `#ff2047`, plus a deep slate) anchored at the top of select sections at 18–34% opacity. Page rhythm cycles in a single dark register: hero stripe, atmospheric section, code window section, email mockup section, pricing or feature grid, black footer.

**Key Characteristics:**
- Pure black canvas (`#000000`) on every public page; off-white ink (`#fcfdff`) carries the full read.
- A serif-led four-family type system: Domaine Display at 76.8–96px for hero headlines, ABC Favorit for marketing body, Inter for UI, Geist Mono for code at 13px.
- Six accent glow colors used only as low-opacity atmospheric washes, never as buttons or solid surfaces.
- Strict container vocabulary: 12px `rounded.lg` for feature cards, code wells, and email mockups; 8px `rounded.md` for buttons; `rounded.full` for pills and avatars.
- Translucent white borders replace shadows entirely — the system has no traditional drop-shadow elevation language.
- The primary CTA is a small white `#fcfdff` rectangle with `#000000` text — counterintuitive contrast that becomes the page's brightest pixel and works as a single visual anchor.

## Known Gaps

- Pressed and active visual states are documented only for `button-primary-pressed`; other components rely on the default browser focus ring for interactive feedback.
- Logged-in dashboard surfaces (API keys, sending logs, audience management) are out of scope; only the public marketing canvas is documented.
- Email-template editor surfaces — a key product feature — are not extracted, since they live behind authentication.
- The atmospheric glow rendering uses CSS radial gradients; exact stops and angles vary per section and are not standardized as tokens, so they render per section-specific design judgment.