Resend — Design Reference
obsidian stationery for quiet machines
Source: https://resend.com
Theme: dark
Category: Developer Tools
Mood: dark, minimal, editorial, monochrome, elegant, technical
Captured: 2026-09-13
Overview
Resend feels like a luxury print catalogue left in a dark server room. The page is pure black with near-white type and almost no colour. The contrast that makes it memorable is typographic: big, high-contrast Domaine serif headlines in an editorial register sit next to tightly tracked ABC Favorit grotesk section titles, Inter body copy and Commit Mono code. Glossy black 3D objects and grainy silver drapery add depth without adding colour, so the product reads as refined, confident and engineered.
Technically it is a Radix-style cool grey ramp (#141517 → #f0f0f0) on a #000000 canvas. Muted copy is #a1a4a5, and borders are translucent blue-white hairlines (rgba(217,237,254,0.14)) instead of solid greys. Shapes are soft: 16px radii on cards, inputs and buttons, 24px on large pricing panels, and full pills on badges. Elevation comes from 1px rings, inset top highlights and faint white glows, not drop shadows. Colour appears only as small signals: #22ff99 checkmarks, #3b9eff active file links, #ff173f errors and iridescent gradient borders on announcement pills. Spacing sits on a 4px grid with generous 96–128px section rhythm inside a 1280px container.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Void Black |
#000000 |
--color-bg-base |
Page canvas on every marketing page, the nav background, the mobile menu overlay and solid card fills |
| Graphite |
#141517 |
--color-gray-1 |
Lowest raised surface: code editor panes, dashboard mockups, app-screenshot frames |
| Smoked Glass |
#18191c |
--color-gray-a2 |
Fill for dark pill buttons and the active segmented tab, often used at 88% alpha (rgba(24,25,28,0.88)) |
| Slate Seam |
#212629 |
--color-gray-3 |
Solid dividers, scroll-shadow lines and table rules inside product mockups |
| Frost Hairline |
#d9edfe |
--color-gray-a4 |
Border tint for cards, used at 14–19% alpha (rgba(217,237,254,0.14)), which gives edges a faint cool cast |
| Fog |
#52595b |
--color-text-placeholder |
Input placeholders and disabled button labels |
| Pewter |
#a1a4a5 |
--color-gray-11 |
Secondary text: nav links, lead paragraphs, card descriptions, ghost button labels |
| Paper White |
#f0f0f0 |
--color-gray-12 |
Primary text, headlines and button labels on dark fills |
| Pure White |
#ffffff |
--color-bg-accent |
Inverted accent fill, pricing slider thumb, logo mark and the inset highlight on buttons; hovers to #f0f0f0 |
| Signal Blue |
#3b9eff |
--color-accent-blue |
Active file tab and link highlight in code/template explorers; #00a3ff appears as the in-email CTA fill |
| Delivered Green |
#22ff99 |
--color-success |
Delivered/success status dots, pricing checkmarks and positive metric indicators |
| Bounce Red |
#ff173f |
--color-danger |
Bounced/failed status dots and error states in dashboard mockups |
| Sodium Yellow |
#f7e650 |
--color-warning |
Large highlight fill found in feature illustrations; use sparingly for warning/attention states |
Semantic roles
| Role |
Value |
| background |
#000000 |
| surface |
#141517 |
| surface raised |
rgba(24, 25, 28, 0.88) |
| border |
rgba(217, 237, 254, 0.14) |
| text |
#f0f0f0 |
| text muted |
#a1a4a5 |
| primary |
#18191c |
| primary text |
#f0f0f0 |
| accent |
#ffffff |
| success |
#22ff99 |
| warning |
#f7e650 |
| danger |
#ff173f |
Tokens — Typography
- Display: Domaine Display (400) — fallbacks: Newsreader, Instrument Serif, Georgia, serif. Used only for page-level hero headlines (home, pricing, feature pages). Regular weight at 77–96px with line-height 1 and slight negative tracking (-0.01em). Often filled with a subtle white-to-grey vertical gradient.
- Accent: ABC Favorit (400, 500) — fallbacks: Inter Tight, Space Grotesk, Helvetica Neue, sans-serif. Section headings and card titles. Tracked very tight at large sizes (-0.05em at 36–56px) and normal at 18–20px. Also used for the login title at 28px/500.
- Body: Inter (400, 500, 600) — fallbacks: system-ui, -apple-system, Segoe UI, sans-serif. All UI and body copy: nav, buttons (600), paragraphs, pricing numerals (36px, -0.9px). Docs pages also use Inter for headings at 600.
- Mono: Commit Mono (400) — fallbacks: JetBrains Mono, IBM Plex Mono, ui-monospace, monospace. Code samples, API responses, IDs and HTTP status lines at 14–16px/1.5 inside dark editor panes.
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display |
96px |
1 |
400 |
-0.96px |
display |
| H1 (page) |
77px |
1 |
400 |
-0.768px |
display |
| H2 (section) |
56px |
1.2 |
400 |
-2.8px |
accent |
| H3 / Price |
36px |
1.3 |
400 |
-1.8px |
accent |
| Card title |
20px |
1.3 |
400 |
normal |
accent |
| Lead |
18px |
1.5 |
400 |
normal |
body |
| Body |
16px |
1.5 |
400 |
normal |
body |
| Small / Nav |
14px |
20px |
500 |
normal |
body |
| Mono |
16px |
1.5 |
400 |
normal |
mono |
Tokens — Spacing & Layout
- Base unit: 4px
- Density: spacious
- Container max width: 1280px
- Section gap: 96px–128px
- Card padding: 24px (32px on large pricing/feature panels)
- Scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
Tokens — Radius
| Element |
Value |
| Buttons, inputs, segmented tabs |
16px |
| Feature and bento cards |
16px |
| Pricing panels, large showcase cards |
24px |
| Code panes, glow panels |
12px |
| Small controls, file tabs, docs chips |
6px |
| Announcement badges, small action pills, slider thumb |
9999px |
Tokens — Shadows
| Name |
Value |
Usage |
| Hairline ring |
0 0 0 1px rgba(24, 25, 28, 0.88) |
Default edge on dark pills and raised chips; replaces borders so the element sits flush on black |
| Inset top highlight |
inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) |
Glossy lip on primary dark buttons (measured with pure white; soften the alpha for a hairline sheen) |
| Soft halo glow |
0 0 64px 8px rgba(255, 255, 255, 0.043), 0 0 16px 6px rgba(255, 255, 255, 0.01) |
Spotlight panels such as the 510px glass card with rgba(255,255,255,0.02) fill |
| Input ring |
0 0 0 1px rgba(255, 255, 255, 0.2) |
Resting outline on text inputs; strengthens toward #caecff33 (--ring-accent) on focus |
| Black knockout |
0 0 0 8px #000000 |
Cuts avatars and icon tiles out of borders and lines behind them |
Components
Primary button (dark pill) (button)
| Property |
Value |
| background |
rgba(24, 25, 28, 0.88) |
| color |
#f0f0f0 |
| border |
1px solid rgba(214, 235, 253, 0.19) |
| radius |
16px |
| padding |
0 20px (height 40px nav / 48px hero) |
| font size |
16px |
| font weight |
600 |
| shadow |
inset 0 1px 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(24,25,28,0.88) |
| hover |
background lifts toward #212629, border alpha rises to ~0.3 |
The signature CTA ('Get started') is a smoked-glass capsule on black, not a white button. It is full-width on mobile. Nav instance is 14px/600.
Ghost / secondary button (button)
| Property |
Value |
| background |
transparent |
| color |
#a1a4a5 |
| border |
none |
| radius |
16px |
| padding |
0 16px |
| font size |
16px |
| font weight |
600 |
| shadow |
none |
| hover |
color #f0f0f0 |
Paired beside the primary ('Documentation', 'Log in'). Text only, same height as the primary so baselines align.
Segmented tab (button)
| Property |
Value |
| background |
rgba(24, 25, 28, 0.88) when active, transparent otherwise |
| color |
#f0f0f0 active / #a1a4a5 inactive |
| border |
none |
| radius |
16px |
| padding |
0 16px (height 40px) |
| font size |
14px |
| font weight |
600 |
| shadow |
0 0 0 1px rgba(24,25,28,0.88) when active |
| hover |
inactive label brightens to #f0f0f0 |
Pricing toggle between Transactional and Marketing emails. No track background; the active pill floats alone on black.
Text input (input)
| Property |
Value |
| background |
rgba(255, 255, 255, 0.04) |
| color |
#ffffff |
| border |
none |
| radius |
16px |
| padding |
0 16px (height 48px) |
| font size |
16px |
| font weight |
400 |
| shadow |
0 0 0 1px rgba(255, 255, 255, 0.2) |
| hover |
focus ring 0 0 0 2px #caecff33 |
Placeholder #52595b. The label sits above in 14px #a1a4a5. The disabled submit below is the same shape at very low contrast.
Feature card (card)
| Property |
Value |
| background |
transparent |
| color |
#f0f0f0 |
| border |
1px solid rgba(217, 237, 254, 0.14) |
| radius |
16px |
| padding |
24px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
border alpha to 0.19 |
The most common container (60 instances). A 20px ABC Favorit title sits over #a1a4a5 body. Often holds a product mockup on top with a 'Learn more' link below.
Pricing panel (card)
| Property |
Value |
| background |
transparent |
| color |
#f0f0f0 |
| border |
1px solid rgba(217, 237, 254, 0.14) |
| radius |
24px |
| padding |
32px |
| font size |
36px price / 14px features |
| font weight |
400 |
| shadow |
none |
| hover |
none |
Centred plan name, a large Inter price with -0.9px tracking, and hairline dividers between tiers. Feature lists use #22ff99 outline check icons.
Announcement badge (badge)
| Property |
Value |
| background |
#000000 |
| color |
#f0f0f0 |
| border |
1px solid transparent with iridescent teal→orange→violet gradient border-image |
| radius |
9999px |
| padding |
5px 12px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
chevron nudges right |
Sits above the hero headline ('Join us at Resend Forward ›'). It is the only place saturated colour touches the hero.
Top navigation (nav)
| Property |
Value |
| background |
transparent (sticky over #000000) |
| color |
#a1a4a5 |
| border |
none |
| radius |
0 |
| padding |
4px 12px per link, 58px bar height |
| font size |
14px |
| font weight |
500 |
| shadow |
none |
| hover |
link color #f0f0f0; dropdown chevrons on Features/Company/Enterprise/Help/Docs/AI |
Logo left, centred link cluster, and 'Log in' ghost plus dark-pill 'Get started' on the right. No border and no blur.
Layout
The marketing pages use a centred 1280px container on pure black. The home hero is asymmetric: left-aligned serif headline, lead and CTAs, with a glossy black Rubik's-cube render floating on the right under a diagonal light sweep. Below that, sections alternate between centred intros (an icon tile, a Favorit H2 with one gradient-tinted phrase, a muted lead) and left-aligned headings over 2–3 column card grids. Sections are separated by 96–128px of empty black with no background banding, and large framed product mockups (code editors, email editor, dashboards) act as section centrepieces. Pricing centres a serif H1, a pill toggle, a range slider and four equal bordered columns. Login is a narrow centred 426px column over silver drapery artwork. Docs switch to a light Mintlify theme (#ffffff, a sidebar with a grey active pill, 16px-radius outline cards, and a black 'Get Started' button).
Imagery
Monochrome 3D renders of glossy and matte black objects (a cube puzzle, a glass envelope, a camera-lens orb, the React atom) lit by a single soft key light, plus grainy silver fabric and paper curls on the auth pages. Product UI appears as faithful dark mockups (code with syntax colour, email previews, metric dashboards) rather than illustration. Customer logos render as flat white wordmarks. Colour is limited to syntax highlighting, status dots and the occasional green or blue glow behind a metric.
Motion
Restrained and premium: slow ambient light sweeps across the hero, gentle rotation on 3D objects, fade-and-rise section reveals, logo marquee, and animated gradient borders on AI/announcement elements (--ai-border-speed: 3s). Hover changes are colour and opacity shifts on muted text and borders, with no bouncy scaling.
Responsive
On phones the nav collapses to the logo plus a thin three-line hamburger. Opening it shows a full-screen black overlay with a close X. The overlay starts with a full-width 16px-radius dark pill 'Get started' and a centred 'Log in' text link, then a stacked list of nav items in ~20px semibold #a1a4a5 with right arrows and hairline dividers. The hero stacks and centres: the 3D cube moves above the copy and shrinks, the gradient-bordered badge centres, the serif headline drops to roughly 56px on two lines, the lead centres at 18px, the primary CTA becomes full width, and 'Documentation' sits centred below it. Card grids collapse to a single column with the 16px radii and 24px padding unchanged. Page gutters tighten to about 20px.
Do
- Keep the canvas #000000 and build depth with #141517/#18191c surfaces, not lighter greys
- Set hero and page titles in Domaine Display at regular weight with line-height 1, and section titles in ABC Favorit tracked to -0.05em
- Draw card and panel edges as 1px rgba(217,237,254,0.14) hairlines on transparent fills
- Make the primary CTA a smoked dark pill (rgba(24,25,28,0.88), 16px radius, inset white top highlight) paired with a text-only #a1a4a5 secondary
- Use #a1a4a5 for all supporting copy and reserve #f0f0f0 for headings, labels and active states
- Limit colour to tiny functional signals: #22ff99 checks and delivered dots, #ff173f failures, #3b9eff active links
- Show the product through realistic dark code and dashboard mockups set in Commit Mono
- Separate sections with 96–128px of empty black instead of alternating background bands
Don't
- Don't introduce a saturated brand colour for buttons, backgrounds or section fills
- Don't use bold weights on the serif display type or set it in a sans
- Don't add drop shadows to cards; use rings, inset highlights or faint white glows only
- Don't use solid mid-grey borders like #333; borders must be translucent and slightly cool
- Don't make the primary button solid white on marketing pages (that treatment belongs to the light docs theme)
- Don't use sharp corners; stay within the 6/12/16/24px and full-pill radius set
- Don't use colourful flat illustrations or stock photography; use monochrome 3D renders and grain
- Don't crowd sections; avoid gaps under 64px between major blocks on desktop
Agent prompt
Build a dark, editorial developer-tool site in the style of Resend: pure #000000 background, #f0f0f0 primary text, #a1a4a5 secondary text, #52595b placeholders, surfaces #141517 and rgba(24,25,28,0.88), and all borders as 1px rgba(217,237,254,0.14) hairlines on transparent cards. Typography: hero/page titles in Domaine Display (fallback Newsreader) 400 at 96px/1 with -0.96px tracking and a subtle white-to-grey gradient fill. Section headings in ABC Favorit (fallback Inter Tight) 400 at 56px/1.2 with -2.8px tracking, and 36px/-1.8px for sub-heads. Body in Inter 16px/1.5, leads 18px, nav 14px/500, buttons 600. Code in Commit Mono (fallback JetBrains Mono) 16px/1.5 in #141517 editor panes. Radii: 16px for buttons, inputs, tabs and cards; 24px for pricing panels; 12px for code panes; full pills for badges. Primary CTA is a smoked dark capsule (rgba(24,25,28,0.88) fill, 1px rgba(214,235,253,0.19) border, inset 0 1px 1px rgba(255,255,255,0.1)) next to a text-only #a1a4a5 ghost button. Inputs are 48px tall with 0 0 0 1px rgba(255,255,255,0.2) rings. No drop shadows, only rings and faint white glows (0 0 64px 8px rgba(255,255,255,0.043)). Colour only as small signals: #22ff99 success checks, #ff173f errors, #3b9eff active links, and an iridescent gradient border on the pill announcement badge. Use a 4px spacing grid, a 1280px container, 24–32px card padding and 96–128px section gaps. Imagery is monochrome glossy-black 3D renders and grainy silver drapery plus realistic dark product mockups. Motion is slow light sweeps and fade-rise reveals. On mobile, use a hamburger that opens a full-screen black menu with a full-width dark pill CTA and arrow-row links separated by hairlines, and stack the hero centred with the 3D object above the headline.
CSS custom properties
/* Resend — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-bg-base: #000000; /* Page canvas on every marketing page, the nav background, the mobile menu overlay and solid card fills */
--color-gray-1: #141517; /* Lowest raised surface: code editor panes, dashboard mockups, app-screenshot frames */
--color-gray-a2: #18191c; /* Fill for dark pill buttons and the active segmented tab, often used at 88% alpha (rgba(24,25,28,0.88)) */
--color-gray-3: #212629; /* Solid dividers, scroll-shadow lines and table rules inside product mockups */
--color-gray-a4: #d9edfe; /* Border tint for cards, used at 14–19% alpha (rgba(217,237,254,0.14)), which gives edges a faint cool cast */
--color-text-placeholder: #52595b; /* Input placeholders and disabled button labels */
--color-gray-11: #a1a4a5; /* Secondary text: nav links, lead paragraphs, card descriptions, ghost button labels */
--color-gray-12: #f0f0f0; /* Primary text, headlines and button labels on dark fills */
--color-bg-accent: #ffffff; /* Inverted accent fill, pricing slider thumb, logo mark and the inset highlight on buttons; hovers to #f0f0f0 */
--color-accent-blue: #3b9eff; /* Active file tab and link highlight in code/template explorers; #00a3ff appears as the in-email CTA fill */
--color-success: #22ff99; /* Delivered/success status dots, pricing checkmarks and positive metric indicators */
--color-danger: #ff173f; /* Bounced/failed status dots and error states in dashboard mockups */
--color-warning: #f7e650; /* Large highlight fill found in feature illustrations; use sparingly for warning/attention states */
/* Semantic roles */
--background: #000000;
--surface: #141517;
--surface-raised: rgba(24, 25, 28, 0.88);
--border: rgba(217, 237, 254, 0.14);
--text: #f0f0f0;
--text-muted: #a1a4a5;
--primary: #18191c;
--primary-text: #f0f0f0;
--accent: #ffffff;
--success: #22ff99;
--warning: #f7e650;
--danger: #ff173f;
/* Typography */
--font-display: 'Domaine Display', Newsreader, 'Instrument Serif', Georgia, serif;
--font-accent: 'ABC Favorit', 'Inter Tight', 'Space Grotesk', 'Helvetica Neue', sans-serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Commit Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
--text-display: 96px;
--text-display--line-height: 1;
--text-display--letter-spacing: -0.96px;
--text-display--font-weight: 400;
--text-h1-page: 77px;
--text-h1-page--line-height: 1;
--text-h1-page--letter-spacing: -0.768px;
--text-h1-page--font-weight: 400;
--text-h2-section: 56px;
--text-h2-section--line-height: 1.2;
--text-h2-section--letter-spacing: -2.8px;
--text-h2-section--font-weight: 400;
--text-h3-price: 36px;
--text-h3-price--line-height: 1.3;
--text-h3-price--letter-spacing: -1.8px;
--text-h3-price--font-weight: 400;
--text-card-title: 20px;
--text-card-title--line-height: 1.3;
--text-card-title--letter-spacing: normal;
--text-card-title--font-weight: 400;
--text-lead: 18px;
--text-lead--line-height: 1.5;
--text-lead--letter-spacing: normal;
--text-lead--font-weight: 400;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-small-nav: 14px;
--text-small-nav--line-height: 20px;
--text-small-nav--letter-spacing: normal;
--text-small-nav--font-weight: 500;
--text-mono: 16px;
--text-mono--line-height: 1.5;
--text-mono--letter-spacing: normal;
--text-mono--font-weight: 400;
/* Spacing */
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
--space-9: 64px;
--space-10: 96px;
--space-11: 128px;
--container: 1280px;
--section-gap: 96px–128px;
/* Radius */
--radius-buttons-inputs-segmented-tabs: 16px;
--radius-feature-and-bento-cards: 16px;
--radius-pricing-panels-large-showcase-cards: 24px;
--radius-code-panes-glow-panels: 12px;
--radius-small-controls-file-tabs-docs-chips: 6px;
--radius-announcement-badges-small-action-pills-slider-thumb: 9999px;
/* Shadows */
--shadow-hairline-ring: 0 0 0 1px rgba(24, 25, 28, 0.88);
--shadow-inset-top-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
--shadow-soft-halo-glow: 0 0 64px 8px rgba(255, 255, 255, 0.043), 0 0 16px 6px rgba(255, 255, 255, 0.01);
--shadow-input-ring: 0 0 0 1px rgba(255, 255, 255, 0.2);
--shadow-black-knockout: 0 0 0 8px #000000;
}
Tailwind v4 theme
/* Resend — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-bg-base: #000000;
--color-gray-1: #141517;
--color-gray-a2: #18191c;
--color-gray-3: #212629;
--color-gray-a4: #d9edfe;
--color-text-placeholder: #52595b;
--color-gray-11: #a1a4a5;
--color-gray-12: #f0f0f0;
--color-bg-accent: #ffffff;
--color-accent-blue: #3b9eff;
--color-success: #22ff99;
--color-danger: #ff173f;
--color-warning: #f7e650;
--color-background: #000000;
--color-surface: #141517;
--color-surface-raised: rgba(24, 25, 28, 0.88);
--color-border: rgba(217, 237, 254, 0.14);
--color-text: #f0f0f0;
--color-text-muted: #a1a4a5;
--color-primary: #18191c;
--color-primary-text: #f0f0f0;
--color-accent: #ffffff;
--color-success: #22ff99;
--color-warning: #f7e650;
--color-danger: #ff173f;
--font-display: 'Domaine Display', Newsreader, 'Instrument Serif', Georgia, serif;
--font-accent: 'ABC Favorit', 'Inter Tight', 'Space Grotesk', 'Helvetica Neue', sans-serif;
--font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Commit Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
--text-display: 96px;
--text-display--line-height: 1;
--text-display--letter-spacing: -0.96px;
--text-display--font-weight: 400;
--text-h1-page: 77px;
--text-h1-page--line-height: 1;
--text-h1-page--letter-spacing: -0.768px;
--text-h1-page--font-weight: 400;
--text-h2-section: 56px;
--text-h2-section--line-height: 1.2;
--text-h2-section--letter-spacing: -2.8px;
--text-h2-section--font-weight: 400;
--text-h3-price: 36px;
--text-h3-price--line-height: 1.3;
--text-h3-price--letter-spacing: -1.8px;
--text-h3-price--font-weight: 400;
--text-card-title: 20px;
--text-card-title--line-height: 1.3;
--text-card-title--letter-spacing: normal;
--text-card-title--font-weight: 400;
--text-lead: 18px;
--text-lead--line-height: 1.5;
--text-lead--letter-spacing: normal;
--text-lead--font-weight: 400;
--text-body: 16px;
--text-body--line-height: 1.5;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-small-nav: 14px;
--text-small-nav--line-height: 20px;
--text-small-nav--letter-spacing: normal;
--text-small-nav--font-weight: 500;
--text-mono: 16px;
--text-mono--line-height: 1.5;
--text-mono--letter-spacing: normal;
--text-mono--font-weight: 400;
--radius-buttons-inputs-segmented-tabs: 16px;
--radius-feature-and-bento-cards: 16px;
--radius-pricing-panels-large-showcase-cards: 24px;
--radius-code-panes-glow-panels: 12px;
--radius-small-controls-file-tabs-docs-chips: 6px;
--radius-announcement-badges-small-action-pills-slider-thumb: 9999px;
--shadow-hairline-ring: 0 0 0 1px rgba(24, 25, 28, 0.88);
--shadow-inset-top-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
--shadow-soft-halo-glow: 0 0 64px 8px rgba(255, 255, 255, 0.043), 0 0 16px 6px rgba(255, 255, 255, 0.01);
--shadow-input-ring: 0 0 0 1px rgba(255, 255, 255, 0.2);
--shadow-black-knockout: 0 0 0 8px #000000;
--container-site: 1280px;
}
Resend — Style Reference
obsidian stationery for quiet machines
Theme: dark · Mood: dark, minimal, editorial, monochrome, elegant, technical
Resend feels like a luxury print catalogue left in a dark server room. The page is pure black with near-white type and almost no colour. The contrast that makes it memorable is typographic: big, high-contrast Domaine serif headlines in an editorial register sit next to tightly tracked ABC Favorit grotesk section titles, Inter body copy and Commit Mono code. Glossy black 3D objects and grainy silver drapery add depth without adding colour, so the product reads as refined, confident and engineered.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Void Black |
#000000 |
--bg-base |
Page canvas on every marketing page, the nav background, the mobile menu overlay and solid card fills |
| Graphite |
#141517 |
--gray-1 |
Lowest raised surface: code editor panes, dashboard mockups, app-screenshot frames |
| Smoked Glass |
#18191c |
--gray-a2 |
Fill for dark pill buttons and the active segmented tab, often used at 88% alpha (rgba(24,25,28,0.88)) |
| Slate Seam |
#212629 |
--gray-3 |
Solid dividers, scroll-shadow lines and table rules inside product mockups |
| Frost Hairline |
#d9edfe |
--gray-a4 |
Border tint for cards, used at 14–19% alpha (rgba(217,237,254,0.14)), which gives edges a faint cool cast |
| Fog |
#52595b |
--text-placeholder |
Input placeholders and disabled button labels |
| Pewter |
#a1a4a5 |
--gray-11 |
Secondary text: nav links, lead paragraphs, card descriptions, ghost button labels |
| Paper White |
#f0f0f0 |
--gray-12 |
Primary text, headlines and button labels on dark fills |
| Pure White |
#ffffff |
--bg-accent |
Inverted accent fill, pricing slider thumb, logo mark and the inset highlight on buttons; hovers to #f0f0f0 |
| Signal Blue |
#3b9eff |
--accent-blue |
Active file tab and link highlight in code/template explorers; #00a3ff appears as the in-email CTA fill |
| Delivered Green |
#22ff99 |
--success |
Delivered/success status dots, pricing checkmarks and positive metric indicators |
| Bounce Red |
#ff173f |
--danger |
Bounced/failed status dots and error states in dashboard mockups |
| Sodium Yellow |
#f7e650 |
--warning |
Large highlight fill found in feature illustrations; use sparingly for warning/attention states |
Tokens — Typography
- Display: Domaine Display (Newsreader, Instrument Serif, Georgia, serif) — weights 400
- Accent: ABC Favorit (Inter Tight, Space Grotesk, Helvetica Neue, sans-serif) — weights 400/500
- Body: Inter (system-ui, -apple-system, Segoe UI, sans-serif) — weights 400/500/600
- Mono: Commit Mono (JetBrains Mono, IBM Plex Mono, ui-monospace, monospace) — weights 400
Tokens — Radius
| Element |
Value |
| Buttons, inputs, segmented tabs |
16px |
| Feature and bento cards |
16px |
| Pricing panels, large showcase cards |
24px |
| Code panes, glow panels |
12px |
| Small controls, file tabs, docs chips |
6px |
| Announcement badges, small action pills, slider thumb |
9999px |
Do
- Keep the canvas #000000 and build depth with #141517/#18191c surfaces, not lighter greys
- Set hero and page titles in Domaine Display at regular weight with line-height 1, and section titles in ABC Favorit tracked to -0.05em
- Draw card and panel edges as 1px rgba(217,237,254,0.14) hairlines on transparent fills
- Make the primary CTA a smoked dark pill (rgba(24,25,28,0.88), 16px radius, inset white top highlight) paired with a text-only #a1a4a5 secondary
- Use #a1a4a5 for all supporting copy and reserve #f0f0f0 for headings, labels and active states
- Limit colour to tiny functional signals: #22ff99 checks and delivered dots, #ff173f failures, #3b9eff active links
- Show the product through realistic dark code and dashboard mockups set in Commit Mono
- Separate sections with 96–128px of empty black instead of alternating background bands
Don't
- Don't introduce a saturated brand colour for buttons, backgrounds or section fills
- Don't use bold weights on the serif display type or set it in a sans
- Don't add drop shadows to cards; use rings, inset highlights or faint white glows only
- Don't use solid mid-grey borders like #333; borders must be translucent and slightly cool
- Don't make the primary button solid white on marketing pages (that treatment belongs to the light docs theme)
- Don't use sharp corners; stay within the 6/12/16/24px and full-pill radius set
- Don't use colourful flat illustrations or stock photography; use monochrome 3D renders and grain
- Don't crowd sections; avoid gaps under 64px between major blocks on desktop
{
"$name": "Resend",
"$source": "https://resend.com",
"$theme": "dark",
"$generated": "inspiration library",
"color": {
"bg-base": {
"$type": "color",
"$value": "#000000",
"$description": "Page canvas on every marketing page, the nav background, the mobile menu overlay and solid card fills"
},
"gray-1": {
"$type": "color",
"$value": "#141517",
"$description": "Lowest raised surface: code editor panes, dashboard mockups, app-screenshot frames"
},
"gray-a2": {
"$type": "color",
"$value": "#18191c",
"$description": "Fill for dark pill buttons and the active segmented tab, often used at 88% alpha (rgba(24,25,28,0.88))"
},
"gray-3": {
"$type": "color",
"$value": "#212629",
"$description": "Solid dividers, scroll-shadow lines and table rules inside product mockups"
},
"gray-a4": {
"$type": "color",
"$value": "#d9edfe",
"$description": "Border tint for cards, used at 14–19% alpha (rgba(217,237,254,0.14)), which gives edges a faint cool cast"
},
"text-placeholder": {
"$type": "color",
"$value": "#52595b",
"$description": "Input placeholders and disabled button labels"
},
"gray-11": {
"$type": "color",
"$value": "#a1a4a5",
"$description": "Secondary text: nav links, lead paragraphs, card descriptions, ghost button labels"
},
"gray-12": {
"$type": "color",
"$value": "#f0f0f0",
"$description": "Primary text, headlines and button labels on dark fills"
},
"bg-accent": {
"$type": "color",
"$value": "#ffffff",
"$description": "Inverted accent fill, pricing slider thumb, logo mark and the inset highlight on buttons; hovers to #f0f0f0"
},
"accent-blue": {
"$type": "color",
"$value": "#3b9eff",
"$description": "Active file tab and link highlight in code/template explorers; #00a3ff appears as the in-email CTA fill"
},
"success": {
"$type": "color",
"$value": "#22ff99",
"$description": "Delivered/success status dots, pricing checkmarks and positive metric indicators"
},
"danger": {
"$type": "color",
"$value": "#ff173f",
"$description": "Bounced/failed status dots and error states in dashboard mockups"
},
"warning": {
"$type": "color",
"$value": "#f7e650",
"$description": "Large highlight fill found in feature illustrations; use sparingly for warning/attention states"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#000000"
},
"surface": {
"$type": "color",
"$value": "#141517"
},
"surface_raised": {
"$type": "color",
"$value": "rgba(24, 25, 28, 0.88)"
},
"border": {
"$type": "color",
"$value": "rgba(217, 237, 254, 0.14)"
},
"text": {
"$type": "color",
"$value": "#f0f0f0"
},
"text_muted": {
"$type": "color",
"$value": "#a1a4a5"
},
"primary": {
"$type": "color",
"$value": "#18191c"
},
"primary_text": {
"$type": "color",
"$value": "#f0f0f0"
},
"accent": {
"$type": "color",
"$value": "#ffffff"
},
"success": {
"$type": "color",
"$value": "#22ff99"
},
"warning": {
"$type": "color",
"$value": "#f7e650"
},
"danger": {
"$type": "color",
"$value": "#ff173f"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"Domaine Display",
"Newsreader",
"Instrument Serif",
"Georgia",
"serif"
],
"$description": "Used only for page-level hero headlines (home, pricing, feature pages). Regular weight at 77–96px with line-height 1 and slight negative tracking (-0.01em). Often filled with a subtle white-to-grey vertical gradient."
},
"accent": {
"$type": "fontFamily",
"$value": [
"ABC Favorit",
"Inter Tight",
"Space Grotesk",
"Helvetica Neue",
"sans-serif"
],
"$description": "Section headings and card titles. Tracked very tight at large sizes (-0.05em at 36–56px) and normal at 18–20px. Also used for the login title at 28px/500."
},
"body": {
"$type": "fontFamily",
"$value": [
"Inter",
"system-ui",
"-apple-system",
"Segoe UI",
"sans-serif"
],
"$description": "All UI and body copy: nav, buttons (600), paragraphs, pricing numerals (36px, -0.9px). Docs pages also use Inter for headings at 600."
},
"mono": {
"$type": "fontFamily",
"$value": [
"Commit Mono",
"JetBrains Mono",
"IBM Plex Mono",
"ui-monospace",
"monospace"
],
"$description": "Code samples, API responses, IDs and HTTP status lines at 14–16px/1.5 inside dark editor panes."
}
},
"typography": {
"display": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "96px",
"lineHeight": "1",
"fontWeight": 400,
"letterSpacing": "-0.96px"
}
},
"h1-page": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "77px",
"lineHeight": "1",
"fontWeight": 400,
"letterSpacing": "-0.768px"
}
},
"h2-section": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.accent}",
"fontSize": "56px",
"lineHeight": "1.2",
"fontWeight": 400,
"letterSpacing": "-2.8px"
}
},
"h3-price": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.accent}",
"fontSize": "36px",
"lineHeight": "1.3",
"fontWeight": 400,
"letterSpacing": "-1.8px"
}
},
"card-title": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.accent}",
"fontSize": "20px",
"lineHeight": "1.3",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"lead": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "18px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"small-nav": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "20px",
"fontWeight": 500,
"letterSpacing": "normal"
}
},
"mono": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "16px",
"lineHeight": "1.5",
"fontWeight": 400,
"letterSpacing": "normal"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "2px"
},
"2": {
"$type": "dimension",
"$value": "4px"
},
"3": {
"$type": "dimension",
"$value": "8px"
},
"4": {
"$type": "dimension",
"$value": "12px"
},
"5": {
"$type": "dimension",
"$value": "16px"
},
"6": {
"$type": "dimension",
"$value": "24px"
},
"7": {
"$type": "dimension",
"$value": "32px"
},
"8": {
"$type": "dimension",
"$value": "48px"
},
"9": {
"$type": "dimension",
"$value": "64px"
},
"10": {
"$type": "dimension",
"$value": "96px"
},
"11": {
"$type": "dimension",
"$value": "128px"
}
},
"radius": {
"buttons-inputs-segmented-tabs": {
"$type": "dimension",
"$value": "16px"
},
"feature-and-bento-cards": {
"$type": "dimension",
"$value": "16px"
},
"pricing-panels-large-showcase-cards": {
"$type": "dimension",
"$value": "24px"
},
"code-panes-glow-panels": {
"$type": "dimension",
"$value": "12px"
},
"small-controls-file-tabs-docs-chips": {
"$type": "dimension",
"$value": "6px"
},
"announcement-badges-small-action-pills-slider-thumb": {
"$type": "dimension",
"$value": "9999px"
}
},
"shadow": {
"hairline-ring": {
"$type": "shadow",
"$value": "0 0 0 1px rgba(24, 25, 28, 0.88)",
"$description": "Default edge on dark pills and raised chips; replaces borders so the element sits flush on black"
},
"inset-top-highlight": {
"$type": "shadow",
"$value": "inset 0 1px 1px 0 rgba(255, 255, 255, 0.1)",
"$description": "Glossy lip on primary dark buttons (measured with pure white; soften the alpha for a hairline sheen)"
},
"soft-halo-glow": {
"$type": "shadow",
"$value": "0 0 64px 8px rgba(255, 255, 255, 0.043), 0 0 16px 6px rgba(255, 255, 255, 0.01)",
"$description": "Spotlight panels such as the 510px glass card with rgba(255,255,255,0.02) fill"
},
"input-ring": {
"$type": "shadow",
"$value": "0 0 0 1px rgba(255, 255, 255, 0.2)",
"$description": "Resting outline on text inputs; strengthens toward #caecff33 (--ring-accent) on focus"
},
"black-knockout": {
"$type": "shadow",
"$value": "0 0 0 8px #000000",
"$description": "Cuts avatars and icon tiles out of borders and lines behind them"
}
},
"component": {
"primary-button-dark-pill": {
"kind": "button",
"background": "rgba(24, 25, 28, 0.88)",
"color": "#f0f0f0",
"border": "1px solid rgba(214, 235, 253, 0.19)",
"radius": "16px",
"padding": "0 20px (height 40px nav / 48px hero)",
"font_size": "16px",
"font_weight": 600,
"shadow": "inset 0 1px 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(24,25,28,0.88)",
"hover": "background lifts toward #212629, border alpha rises to ~0.3",
"notes": "The signature CTA ('Get started') is a smoked-glass capsule on black, not a white button. It is full-width on mobile. Nav instance is 14px/600."
},
"ghost-secondary-button": {
"kind": "button",
"background": "transparent",
"color": "#a1a4a5",
"border": "none",
"radius": "16px",
"padding": "0 16px",
"font_size": "16px",
"font_weight": 600,
"shadow": "none",
"hover": "color #f0f0f0",
"notes": "Paired beside the primary ('Documentation', 'Log in'). Text only, same height as the primary so baselines align."
},
"segmented-tab": {
"kind": "button",
"background": "rgba(24, 25, 28, 0.88) when active, transparent otherwise",
"color": "#f0f0f0 active / #a1a4a5 inactive",
"border": "none",
"radius": "16px",
"padding": "0 16px (height 40px)",
"font_size": "14px",
"font_weight": 600,
"shadow": "0 0 0 1px rgba(24,25,28,0.88) when active",
"hover": "inactive label brightens to #f0f0f0",
"notes": "Pricing toggle between Transactional and Marketing emails. No track background; the active pill floats alone on black."
},
"text-input": {
"kind": "input",
"background": "rgba(255, 255, 255, 0.04)",
"color": "#ffffff",
"border": "none",
"radius": "16px",
"padding": "0 16px (height 48px)",
"font_size": "16px",
"font_weight": 400,
"shadow": "0 0 0 1px rgba(255, 255, 255, 0.2)",
"hover": "focus ring 0 0 0 2px #caecff33",
"notes": "Placeholder #52595b. The label sits above in 14px #a1a4a5. The disabled submit below is the same shape at very low contrast."
},
"feature-card": {
"kind": "card",
"background": "transparent",
"color": "#f0f0f0",
"border": "1px solid rgba(217, 237, 254, 0.14)",
"radius": "16px",
"padding": "24px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "border alpha to 0.19",
"notes": "The most common container (60 instances). A 20px ABC Favorit title sits over #a1a4a5 body. Often holds a product mockup on top with a 'Learn more' link below."
},
"pricing-panel": {
"kind": "card",
"background": "transparent",
"color": "#f0f0f0",
"border": "1px solid rgba(217, 237, 254, 0.14)",
"radius": "24px",
"padding": "32px",
"font_size": "36px price / 14px features",
"font_weight": 400,
"shadow": "none",
"hover": "none",
"notes": "Centred plan name, a large Inter price with -0.9px tracking, and hairline dividers between tiers. Feature lists use #22ff99 outline check icons."
},
"announcement-badge": {
"kind": "badge",
"background": "#000000",
"color": "#f0f0f0",
"border": "1px solid transparent with iridescent teal→orange→violet gradient border-image",
"radius": "9999px",
"padding": "5px 12px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "chevron nudges right",
"notes": "Sits above the hero headline ('Join us at Resend Forward ›'). It is the only place saturated colour touches the hero."
},
"top-navigation": {
"kind": "nav",
"background": "transparent (sticky over #000000)",
"color": "#a1a4a5",
"border": "none",
"radius": "0",
"padding": "4px 12px per link, 58px bar height",
"font_size": "14px",
"font_weight": 500,
"shadow": "none",
"hover": "link color #f0f0f0; dropdown chevrons on Features/Company/Enterprise/Help/Docs/AI",
"notes": "Logo left, centred link cluster, and 'Log in' ghost plus dark-pill 'Get started' on the right. No border and no blur."
}
}
}
