Design System: Resend

1. Visual Theme & Atmosphere

Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (#000000) with text that glows in near-white (#f0f0f0), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.

The typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.

What makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses rgba(214, 235, 253, 0.19) a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red each with its own CSS variable scale), and OpenType stylistic sets ("ss01", "ss03", "ss04", "ss11"), the result is a design system that feels premium, precise, and quietly confident.

Key Characteristics:

• Pure black background with near-white (#f0f0f0) text theatrical, gallery-like darkness
• Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)
• Icy blue-tinted borders: rgba(214, 235, 253, 0.19) every border has a cold, crystalline shimmer
• Multi-color accent system: orange, green, blue, yellow, red each with numbered CSS variable scales
• Pill-shaped buttons and tags (9999px radius) with transparent backgrounds
• OpenType stylistic sets ("ss01", "ss03", "ss04", "ss11") on display fonts
• Commit Mono for code monospace as a design element, not an afterthought
• Whisper-level shadows using blue-tinted ring: rgba(176, 199, 217, 0.145) 0px 0px 0px 1px