Resend

Identity

Productivity & SaaS

Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

ABC FavoritDisplay

InterBody

Ag

Commit MonoMono

--text-4xl · 96pxThe quick brown fox

--text-3xl · 56pxThe quick brown fox

--text-2xl · 36pxThe quick brown fox

--text-xl · 24pxThe quick brown fox

--text-lg · 20pxThe quick brown fox

--text-base · 16pxThe quick brown fox

--text-sm · 14pxThe quick brown fox

--text-xs · 12pxThe quick brown fox

Palette

--bg#000000Page background — defines the brand canvas.

--surface#000000Card / lifted container background.

--surface-warmvar(--surface)Tertiary surface tier (kami warm-sand).

--fg#f0f0f0Primary text color.

--fg-2#a1a4a5Secondary text tier (kami dark-warm).

--muted#5c5c5cSubtext / captions.

--meta#464a4dTertiary FG / metadata tier (kami stone).

--borderrgba(214, 235, 253, 0.19)Default border / card edge.

--border-softrgba(217, 237, 254, 0.145)Inner row separator that should not visually compete.

--accent#ff801fBrand accent. ≤2 visible uses per screen (lint enforced).

--accent-on#000000FG when --accent is the bg.

--success#11ff99Success state.

--warn#ffc53dWarning state.

--danger#ff2047Danger state.

Also named in DESIGN.md

Pure White#ffffffcolor-white, maximum emphasis text, link highlights

Orange 4#ff5900color-orange-4, at 22% opacity — subtle warm glow

Orange 11#ffa057color-orange-11, lighter orange for secondary use

Green 3#22ff99color-green-3, at 12% opacity — faint emerald wash

Blue 4#0075ffcolor-blue-4, at 34% opacity — medium blue accent

Blue 5#0081fdcolor-blue-5, at 42% opacity — stronger blue

Blue 10#3b9effcolor-blue-10, bright blue — links, interactive elements

Imagery & layout

Radius

--radius-sm4px

--radius-md8px

--radius-lg16px

--radius-pill9999px

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

Elevation

--elev-raised

Layout

Layout rules

Base unit: 8px
Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px
Centered content with generous max-width
Full-width black sections with contained inner content
Single-column hero, expanding to feature grids below
Code preview panels as full-width or contained showcases

Component kit

Light Dark