What is Resend's primary brand color?

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.

Does Resend have a light mode?

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.

What fonts does Resend use, and what should I substitute?

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.

Why does Resend have no drop shadows?

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.

Can I use this DESIGN.md to build my own React product?

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.

What's missing from the spec?

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.

Resend Design System

Resend's design system as a DESIGN.md file.

About Resend DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source resend.com

Developer Tools & IDEs
Communication & Messaging

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.

What makes it distinct

Pure black canvasevery public page sits on #000000, never near-black #0a0a0a, with off-white #fcfdff ink carrying the read
Editorial serif at scaleDomaine Display at 96px / 400 with ss01/ss04/ss11 features makes a developer tool read like a print magazine
White is the brandthe primary CTA is a small #fcfdff pill with #000000 text, the brightest pixel on every viewport
Six atmospheric accent glowsorange, yellow, blue, green, red, slate — used only as low-opacity radial washes, never as solid surfaces
No drop shadows anywheredepth is built from 6% and 14% translucent-white hairlines plus radial atmospheric gradients

Live at resend.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

resend.com

Explore Resend

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Resend design system FAQ

Common questions about Resend's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Resend in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→