resend.com

---
name: resend.com
description: "I built this around a single tension: serif display type on near-black, with everything else turned down to a whisper. The H1 is Domaine at 96px/400 — I rejected a sans-serif hero because every other dev-tool site uses Inter Display Bold, and I wanted Resend to read like it belongs on a bookshelf, not a pitch deck. The page sits on #0a0a0a, surfaces lift to roughly #141517 with a 1px hairline rather than a shadow, because shadows on true-black look muddy and I'd rather earn elevation through a border than fake it with blur. Body copy is Inter 16px/400 in #a0a0a0 — yes, that's lower contrast than WCAG AA loves, but the whole point is that the serif headline does the shouting and the supporting text recedes. The pill 'Get started' button in the nav is the only hero pill in the system; pricing cards use 16px radius and inline buttons use 6-12px, so don't ship pills system-wide. The trade-off I'm accepting: this language is gorgeous for a homepage and a docs index, but it asks the reader to slow down — if you need to convert a distracted skimmer in 4 seconds, the serif and the muted greys will lose to a louder competitor."

colors:
  primary: "#ffffff"
  background: "#0a0a0a"
  surface: "#141517"
  surface-2: "#212629"
  fg: "#f0f0f0"
  fg-muted: "#a0a0a0"
  border: "#252525"
  neutral-1: "#6c6c6c"

typography:
  sans: Inter
  mono: Commit Mono
  weights: [400, 500, 700]
  scale:
    page-hero:
      size: 96px
      lineHeight: 96px
      classes: text-8xl tracking-tight
    page-hero-2:
      size: 76px
      lineHeight: 76px
      classes: text-7xl tracking-tight
    section-header:
      size: 56px
      lineHeight: 67px
      classes: text-6xl tracking-tight
    subsection-header:
      size: 36px
      lineHeight: 46px
      classes: text-4xl tracking-tight
    body:
      size: 16px
      lineHeight: 24px
      classes: text-base
    caption-secondary:
      size: 14px
      lineHeight: 20px
      classes: text-sm font-medium

rounded:
  button: 9999px
  card: 16px
  input: 12px

spacing:
  container: max-w-6xl mx-auto px-6
  section: py-24

components:
  button-primary:
    background: "{colors.primary}"
    text: "{colors.background}"
    rounded: "{rounded.button}"
    padding: 8px 12px
  button-secondary:
    background: "{colors.surface}"
    text: "{colors.fg}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.button}"
    padding: 8px 12px
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.card}"
    padding: 24px
  input:
    background: "{colors.surface}"
    text: "{colors.fg}"
    placeholder: "{colors.fg-muted}"
    border: "1px solid {colors.border}"
    rounded: "{rounded.input}"
    padding: 8px 10px
---

# Design System — inspired by resend.com

> **Let one element (the serif headline) carry all the personality so every other surface can recede into hairlines and greys.**

I built this around a single tension: serif display type on near-black, with everything else turned down to a whisper. The H1 is Domaine at 96px/400 — I rejected a sans-serif hero because every other dev-tool site uses Inter Display Bold, and I wanted Resend to read like it belongs on a bookshelf, not a pitch deck. The page sits on #0a0a0a, surfaces lift to roughly #141517 with a 1px hairline rather than a shadow, because shadows on true-black look muddy and I'd rather earn elevation through a border than fake it with blur. Body copy is Inter 16px/400 in #a0a0a0 — yes, that's lower contrast than WCAG AA loves, but the whole point is that the serif headline does the shouting and the supporting text recedes. The pill 'Get started' button in the nav is the only hero pill in the system; pricing cards use 16px radius and inline buttons use 6-12px, so don't ship pills system-wide. The trade-off I'm accepting: this language is gorgeous for a homepage and a docs index, but it asks the reader to slow down — if you need to convert a distracted skimmer in 4 seconds, the serif and the muted greys will lose to a louder competitor.

**Signature move.** A Domaine serif headline at weight 400 paired with Inter body copy on near-black — the serif does all the brand work so the UI chrome can stay invisible.

**Use this when.** Building a developer infrastructure product where the audience values craft signals and you want the brand to feel like a publication, not a funnel.
**Avoid when.** Building a consumer or SMB conversion site that needs to grab cold traffic fast — the muted greys and serif headlines reward attention they may not get.

When in doubt: less. Restraint reads as confidence.

## Rules

- **Color**: Use only tokens from `tailwind.config.ts` theme.colors. Never hardcode hex values, hsl(), or arbitrary `bg-[#...]` classes.
- **Spacing**: Use Tailwind's default scale. Avoid arbitrary values like `p-[18px]` unless matching a fixed asset.
- **Type weights**: Only `font-normal`, `font-medium`, `font-bold`. Do not introduce other weights.
- **Radius**: Buttons and inputs use `rounded-full`. Cards use `rounded-2xl`. Avatars use `rounded-full`. Nothing else.
- **Borders before shadows**: Use `border border-border` for elevation. Reserve `shadow-sm` for floating menus only.
- **Motion**: Hover transitions are `transition-colors duration-150`. Never animate layout. Never use `duration-500` or longer for UI feedback.
- **Container**: Page content sits in `max-w-6xl mx-auto px-6`. Sections use `py-24`.
- **Icons**: Use `lucide-react` at `size-4` (default) or `size-5` (emphasis). No emoji in UI.

## Tokens

### Color (defined in `tailwind.config.ts`)

| Token | Value | Use for |
|---|---|---|
| `bg-primary` | `#ffffff` | CTA button background |
| `bg-background` | `#0a0a0a` | Page background |
| `bg-surface` | `#141517` | Surface background, elevated above page |
| `bg-surface-2` | `#212629` | Elevated hover state |
| `text-fg` | `#f0f0f0` | Primary text, headings |
| `text-fg-muted` | `#a0a0a0` | Secondary text, muted content |
| `border-border` | `#252525` | Borders, dividers |
| `bg-neutral-1` | `#6c6c6c` | Tertiary text, placeholders |

### Type scale

| Class | Size / line-height | Use for |
|---|---|---|
| `text-8xl tracking-tight` | 96px / 96px | Page hero |
| `text-7xl tracking-tight` | 76px / 76px | Page hero |
| `text-6xl tracking-tight` | 56px / 67px | Section header |
| `text-4xl tracking-tight` | 36px / 46px | Subsection header |
| `text-base` | 16px / 24px | Body |
| `text-sm font-medium` | 14px / 20px | Caption / secondary |

### Font families

- **Sans**: Inter. Class: `font-sans`.
- **Mono**: Commit Mono. Class: `font-mono`. Code only.


## Components

### Button

- **Primary**: `bg-primary text-background px-3 h-8 rounded-full text-sm font-medium hover:opacity-90 transition-colors`
- **Secondary**: `bg-surface text-fg border border-border px-3 h-8 rounded-full text-sm font-medium hover:bg-opacity-80`
- **Ghost**: `text-fg-muted px-3 h-8 rounded-full text-sm hover:bg-surface hover:text-fg`
- **Sizes**: only `h-8` (default) and `h-7 text-xs` (compact).

### Card

`bg-surface border border-border rounded-2xl p-6`

Cards never have shadows in this design. Hover state: slightly lighter border.

### Input

`bg-surface border border-border rounded-xl h-8 px-2.5 text-sm text-fg placeholder:text-fg-muted focus:outline-none focus:border-primary`

### Section

```html
<section class="py-24">
  <div class="max-w-6xl mx-auto px-6">
    ...
  </div>
</section>
```


## Anti-patterns — this design does NOT use

- **Drop shadows.** Depth comes from borders and surface tints. Never `shadow-md`, `shadow-lg`, etc.
- **Gradients.** All fills are solid. No `bg-gradient-*`.
- **Multiple accent colors.** There is one accent (`primary`). No success-green, warning-yellow, etc., unless explicitly building a status indicator.
- **Light font weights.** This design does not use `font-light` or `font-thin` for UI text.
- **Decorative animations.** No fade-in-on-scroll, parallax, or entrance animations on page load. Motion is reserved for hover/focus feedback.
- **Emoji in UI.** Use `lucide-react` icons. Never emoji in buttons, headings, or interface chrome.
- **Centered body text.** Long-form content is left-aligned. Centering is reserved for hero headlines and short CTA blocks.
- **Multiple type families on one screen.** Sans for everything except code blocks (mono).
- **Arbitrary Tailwind values.** Avoid `text-[15px]`, `p-[13px]`, `bg-[#abc]` — these break the system. If a value is missing from the theme, add it to `tailwind.config.ts` first.


## Slop to avoid

Patterns AI coding agents reach for that produce visibly AI-generated UI. Avoid all of these. Items marked **avoided here** are choices the source design explicitly makes — preserve them when generating new screens.

- **Purple-to-pink gradient hero**
  The default LLM hero — every AI starter looks like this. Reads as 'made by ChatGPT' on sight.
  - ✗ `bg-gradient-to-br from-purple-600 to-pink-500`
  - ✓ Solid brand color with one accent. Reserve gradients for illustration, not chrome.
- **Glassmorphism card (frosted blur)**
  backdrop-blur + low-opacity white was a 2021 trend. AI agents pile it on every modal and card.
  - ✗ `bg-white/10 backdrop-blur-md border border-white/20`
  - ✓ Solid surface color with a 1px border. If you need elevation, raise the surface.
- **Stacked drop shadows on every surface** — _avoided here_
  shadow-md on cards, shadow-lg on modals, shadow-xl on hover — depth performed instead of designed.
  - ✗ `shadow-md hover:shadow-xl`
  - ✓ Pick one: borders OR shadows for elevation, never both. Reserve shadow for floating menus.
- **Gradient text on headlines**
  bg-clip-text on every H1 — distracts from the message and ages instantly.
  - ✗ `bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent`
  - ✓ Solid foreground color. If the headline needs emphasis, use weight or size.
- **Pill-shaped buttons everywhere**
  rounded-full is the consumer-app default. On a B2B/dev tool it reads as derivative.
  - ✗ `rounded-full px-6 py-3`
  - ✓ Match the radius vocabulary of the design — usually 4-8px on dev tools, 12-16px on consumer.
- **Inter or Geist as the default 'modern' font**
  Every AI-generated UI uses Inter. It's not wrong, it's just the same answer everyone gets.
  - ✗ `font-family: "Inter", sans-serif;`
  - ✓ If you don't have a brand font, use the system stack. If you do, use it. Don't reach for Inter as a 'safe' default.
- **Decorative emoji in headings and buttons**
  "🚀 Launch your app" — emoji as decoration is the visual equivalent of comic sans for AI output.
  - ✗ `<button>🚀 Get started</button>`
  - ✓ Use icon components (lucide, heroicons). Reserve emoji for user-generated content.
- **Generic testimonial cards with stock-photo avatars**
  Three round avatars, three star ratings, three made-up quotes — the AI 'social proof' template.
  - ✗ `<Avatar src="/photo-1.jpg" /> "Game-changer for our team!" — Sarah, CEO`
  - ✓ Real testimonials with real attribution, or omit the section entirely.
- **3D-tilted feature cards on hover**
  perspective(1000px) rotateX/rotateY hover effects — 2023 SaaS-template default.
  - ✗ `hover:transform hover:rotate-1 hover:scale-105 transition-all`
  - ✓ Subtle border-color or background-color change on hover. Static layouts read as confident.
- **Green-checkmark feature lists**
  Every AI pricing page has the same ✓ ✓ ✓ list. Becomes wallpaper.
  - ✗ `<li><CheckCircle className="text-green-500" /> Unlimited projects</li>`
  - ✓ If the list is short, write prose. If it's long, use a comparison table.
- **Center-aligned long-form content**
  AI defaults to text-align:center for everything. Long-form reads as ad copy when centered.
  - ✗ `<div class="text-center max-w-3xl mx-auto">{long paragraph}</div>`
  - ✓ Center hero headlines and short CTA blocks only. Body content is left-aligned.
- **Vague aspirational hero headline**
  "Build the future of your business" — meaningless because it would fit any product.
  - ✗ `<h1>Empower your team to do their best work</h1>`
  - ✓ Name the user, the action, and the outcome. If you swap your product name and the headline still works, rewrite it.
- **Bento grid with mixed card sizes**
  The Apple-pages-imitator layout. Used as an excuse not to decide what's important.
  - ✗ `Grid of 6 cards, 2 large + 4 small, each with a different feature.`
  - ✓ Linear list of features in priority order. If you must use a grid, make all cards equal weight.
- **Animated mesh-gradient background**
  The 'I learned about CSS conic-gradient last week' look. Distracts from content, kills perf.
  - ✗ `Animated SVG mesh or conic-gradient with @keyframes rotation`
  - ✓ Static background. If the page needs energy, get it from typography or content density.
- **Auto-playing hero video loop**
  10MB MP4 of generic abstract footage. Page LCP cratered, brand value zero.
  - ✗ `<video autoplay loop muted><source src='/abstract-tech.mp4' /></video>`
  - ✓ Static image, animated SVG, or a real product screenshot.
- **Translucent navigation with backdrop-blur**
  Apple did it once. Now every AI agent puts blur(12px) on every nav.
  - ✗ `fixed top-0 bg-white/80 backdrop-blur-md`
  - ✓ Solid nav background. If you must, add a 1px bottom border on scroll.
- **Arbitrary Tailwind values everywhere**
  p-[13px], text-[15px], bg-[#f3e1c4] — the design system was abandoned line-by-line.
  - ✗ `px-[13px] text-[15px] bg-[#f3e1c4]`
  - ✓ Use scale tokens. If a value is missing, add it to the theme first.
- **Untouched shadcn slate/zinc default palette**
  The 'I installed shadcn and never theme'd it' look. Looks like every AI-generated app.
  - ✗ `Using the default `--primary: 222.2 47.4% 11.2%` and `--background: 0 0% 100%` from shadcn init.`
  - ✓ Replace the default tokens with your brand palette before shipping.
- **py-32 / py-48 between every section**
  Vertical whitespace as a substitute for content. The page scrolls forever, says nothing.
  - ✗ `py-32 (everywhere)`
  - ✓ Match the rhythm of your content. py-16 to py-24 is usually plenty.
- **One icon per word in headings**
  AI agents add lucide icons next to every nav link, button, and bullet — visual noise.
  - ✗ `<Button><Sparkles /> Try it free</Button>`
  - ✓ Reserve icons for nav and actions where the icon adds meaning the word doesn't.
- **Neumorphism (soft 3D embossed) buttons**
  Two opposing shadows on every button to fake 3D. Accessibility nightmare and looks dated.
  - ✗ `shadow-[inset_2px_2px_5px_#bbb,_-3px_-3px_5px_#fff]`
  - ✓ Flat or border-only. Save 3D for actual physical product mockups.
- **Auto-scrolling logo marquee for 'social proof'**
  12 customer logos sliding across the page. Reads as 'we copied Stripe's homepage'.
  - ✗ `Animate-x infinite scroll of grayscale customer logos`
  - ✓ Static grid of 4-6 real customer logos, no animation.
- **Dark mode = invert all the colors** — _avoided here_
  Pure-black bg with white text and the same brand color at full saturation — eye-fatigue mode.
  - ✗ `html.dark { background: #000; color: #fff; }`
  - ✓ Real dark mode uses near-black (not pure), softened text (not pure white), and desaturated accents.
- **Framer-template-style: hero / features / pricing / testimonials / cta / footer**
  The same six sections in the same order on every AI-generated landing page.
  - ✗ `Hero → Features → Pricing → Testimonials → CTA → Footer with no variation.`
  - ✓ Decide what your page actually needs to convince the reader. Skip sections that don't earn their space.
- **Bootstrap-default status colors (red/yellow/green/blue)**
  #ff0000 #ffcc00 #00cc00 #0066ff — the 'I didn't theme my status palette' tell.
  - ✗ `text-red-500 text-yellow-500 text-green-500 text-blue-500`
  - ✓ Tint your status colors toward your brand palette. Desaturate them on dark mode.
- **Mixing a serif "elegant" headline with a sans body for "contrast"** — _avoided here_
  Editorial type pairing applied to a SaaS landing — reads as a Squarespace template.
  - ✗ `<h1 class="font-serif">Reimagine work</h1><p class="font-sans">…</p>`
  - ✓ One typographic voice. If you want hierarchy, use weight and size, not family.
- **Fade-in/slide-up on every section as the user scrolls**
  data-aos='fade-up' on every block. The user can't read until they wait for the animation.
  - ✗ `Every <section> has an entrance animation triggered by IntersectionObserver.`
  - ✓ Static layouts. Reserve motion for actual interactions (hover, focus, modal open).
- **12-column footer with 60+ links**
  Copying SaaS-megacorp footers without their actual content depth. Empty links for 'Product / Solutions / Resources'.
  - ✗ `<footer> with 6 columns × 10 links each, 80% leading to empty pages.`
  - ✓ List the pages you actually have. A 4-link footer is fine.
- **Stat blocks with made-up percentages**
  "99% faster", "10× more efficient", "3× ROI" — round numbers no real customer cited.
  - ✗ `<div>99%</div><div>faster deploys</div>`
  - ✓ Real metrics with real attribution, or skip the section.
- **"Eyebrow" + "Big Claim" + "Subtitle" pattern on every section**
  The mandatory three-line section opener. Recognizable as AI output from the silhouette alone.
  - ✗ `<small>WHY US</small><h2>Built for teams</h2><p>The platform that scales…</p>`
  - ✓ One headline that earns its space. Drop the eyebrow unless it's load-bearing taxonomy.

_Slop catalog is shipped as `slop.json` for programmatic access. Catalog concept popularized by [Impeccable](https://impeccable.style/)._

## Visual reference

Open `.reseed/design-reference.html` in a browser to see every token and
component rendered. Use it to verify visual decisions before committing.

Source: extracted from <https://resend.com> on 2026-05-07.
Re-extract with `npx reseed-cli update`.