Resend

version alpha

name Resend

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.

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 looks like a developer tool with the typography of an editorial. Every page opens on {colors.canvas} (#000000), and the loudest element on the canvas is not a button or a brand stamp — it's a 96px Domaine Display serif headline ("Email for developers", "Email reimagined") 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 {component.code-window} shells with hairline traffic- light dots. Surface depth is built almost entirely from translucent white — 6% borders, 14% strong borders, 4% dividers — over a deep {colors.surface-deep} layer that sits just below the canvas black. There are no gradients painted across full bands, just soft atmospheric glows (orange, blue, green, red, yellow) anchored at the top of select sections, all at low 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. The brand never warms to a light surface; even secondary email mockups are rendered as compact white cards inside the dark canvas, framed like print insets in a black-bordered magazine page.

Key Characteristics:

• Pure black canvas ({colors.canvas} — #000000) on every public page; off-white text ({colors.ink} — #fcfdff) carries the full read.

• A serif-led type system: Domaine Display at 76–96px for hero headlines, ABC Favorit for marketing body, Inter for UI, Geist Mono for code.

• Six accent glow colours used only as low-opacity atmospheric washes ({colors.accent-orange}, {colors.accent-blue}, {colors.accent-green}, {colors.accent-red}, {colors.accent-yellow}) — never as buttons or solid surfaces.

• Strict container vocabulary: {rounded.lg} (12px) for feature cards, code wells, and email mockups; {rounded.md} (8px) for buttons; {rounded.full} for pills and avatars.

• Translucent white borders ({colors.hairline} 6% / {colors.hairline-strong} 14%) replace shadows entirely — the system has no traditional drop-shadow elevation language.

• {component.button-primary} is a small white rectangle with black text — counterintuitive contrast that becomes the page's brightest pixel and works as a single visual anchor.

Colors

Brand & Accent

• Primary White ({colors.primary} — #fcfdff): the brand's de facto accent. Reserved for {component.button-primary} (white pill on black canvas), Domaine display headlines, and the active text colour. White is the loudest possible colour on this canvas — that's the signature.

• Primary On ({colors.primary-on} — #000000): label colour on top of {colors.primary} surfaces. Black text on white pill is the brand's CTA pattern.

• Surface Light ({colors.surface-light} — #f1f7fe): a subtle blue-tinted off-white used as the active/pressed state of {component.button-primary}.

Surface

• Canvas ({colors.canvas} — #000000): the default page background. True black, never near-black.

• Surface Card ({colors.surface-card} — #0a0a0c): the standard inset card surface, just lighter than canvas to register a step up in elevation.

• Surface Elevated ({colors.surface-elevated} — #101012): a second elevation step used on featured pricing tiers and ghost button surfaces.

• Surface Deep ({colors.surface-deep} — #06060a): code window background — slightly cooler and darker than the canvas itself, suggesting depth via temperature.

• Hairline ({colors.hairline} — rgba(255,255,255,0.06)): the soft 1px translucent-white divider used between rows and around feature cards.

• Hairline Strong ({colors.hairline-strong} — rgba(255,255,255,0.14)): the structural 1px border on cards, code wells, and form inputs.

• Divider Soft ({colors.divider-soft} — rgba(255,255,255,0.04)): low-contrast dividers between footer columns.

Text

• Ink ({colors.ink} — #fcfdff): primary text colour on the dark canvas. Faintly blue-cool to feel like printed paper rather than pure white pop.

• Body ({colors.body} — rgba(252,253,255,0.86)): long-form body text where pure ink would feel too sharp.

• Charcoal ({colors.charcoal} — rgba(252,253,255,0.7)): captions, secondary nav labels.

• Mute ({colors.mute} — #a1a4a5): supporting text and inactive labels.

• Ash ({colors.ash} — #888e90): tertiary text, footer copy.

• Stone ({colors.stone} — #464a4d): disabled foreground.

• On-Light ({colors.on-light} — #000000): label colour inside the rare email-mockup white cards.

• On-Light Mute ({colors.on-light-mute} — rgba(0,0,51,0.7)): secondary text inside email mockups.

Semantic

• Accent Orange ({colors.accent-orange} — #ff801f) + glow ({colors.accent-orange-glow} — rgba(255,89,0,0.22)): atmospheric warm wash anchored to "Email reimagined" / customer story sections. Solid orange never appears as a button or surface — only the glow.

• Accent Yellow ({colors.accent-yellow} — #ffc53d): used in inline highlight strokes and "first-class developer experience" key callouts.

• Accent Blue ({colors.accent-blue} — #3b9eff) + glow ({colors.accent-blue-glow} — rgba(0,117,255,0.34)): inline link colour and the cool atmospheric wash on the "Integrate this weekend" section.

• Accent Green ({colors.accent-green} — #11ff99) + glow ({colors.accent-green-glow} — rgba(34,255,153,0.18)): success status dots and the "delivery confirmed" feature glow.

• Accent Red ({colors.accent-red} — #ff2047) + glow ({colors.accent-red-glow} — rgba(255,32,71,0.34)): inline error red and the "reach humans, not spam folders" attention wash.

• Link ({colors.link} — #3b9eff): inline link colour — same as accent blue.

Typography

Font Family

Resend ships a four-family stack:

• Domaine Display — proprietary editorial serif used exclusively for hero headlines