resend.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: resend.com
description: "Dark-canvas product system built on #ffffff with #9281f7 as the single brand accent. Type anchored in domaine at 76.8px / weight 400. Extracted automatically from https://resend.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  resend.com is built on a near-black canvas (rgb(0, 0, 0)).
  The system uses rgb(146, 129, 247) as the accent for primary actions and brand signals.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside domaine as the primary typeface.
  A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 50 keyframe animations plus transition-driven interactions.

colors:
  surface-1: "#0b0e14"
  surface-2: "#464a4d"
  ink: "#f0f0f0"
  ink-muted: "#a1a4a5"
  ink-subtle: "#a1a4a5"
  primary: "#9281f7"
  on-primary: "#111111"
  primary-hover: "rgba(34, 255, 153, 0.118)"
  hairline: "rgba(214, 235, 253, 0.19)"
  accent-glow: "#ffffff"

typography:
  display-xl:
    fontFamily: "domaine, Georgia, 'Times New Roman', serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.96px
  headline:
    fontFamily: "aBCFavorit, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  body:
    fontFamily: "inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  caption:
    fontFamily: "commitMono, 'SF Mono', 'JetBrains Mono', Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0
  button:
    fontFamily: "inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#f1f7fe"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 4px
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.accent-glow}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: 0px 16px
  button-outline-2:
    backgroundColor: "transparent"
    textColor: "{colors.accent-glow}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 0px 20px
  cta-banner-full-width-cta:
    backgroundColor: "#d3edf8"
    textColor: "{colors.accent-glow}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: 8px 6px 8px 12px
  code-block-inline-code--pre:
    backgroundColor: "transparent"
    textColor: "#f8f8f8"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 16px 10px 16px 0px

extracted_at: "2026-06-11T05:02:15.783Z"
completeness: 86
scoreVersion: "v2"

---

# Design System — resend.com
> Extracted automatically by Prism from https://resend.com
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).

> ⚠️ **LOW-CONFIDENCE CAPTURE** — this extraction likely sampled an app shell / interactive demo, **not** the marketing page. Signals: button labels look like filenames (Node.js, Node.js, Next.js); only 0 card component detected. Treat the component, color and copy values below with caution, and re-extract the canonical marketing URL if fidelity matters.


## 0. Design DNA

**Density**: moderate  |  **Motion**: animated  |  **Weight**: medium  |  **Aesthetic**: editorial-minimal

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#000000` |
| Type posture | serif-led (domaine) | "Email reimagined.Available tod" |
| Color assertion | dual-accent | #9281f7 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | animated | 50 keyframes, 13 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `dark-canvas · serif-display · dual-accent · 8px-rounded · animated-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(0, 0, 0)` is the page background. Every component composits against this.
> - **Accent**: `rgb(146, 129, 247)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 48px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

**Signature:** a gradient wash in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

resend.com commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a near-pure-black surface (`#000000`) where surfaces are layered through stepped luminance — each elevated level is slightly less dark than the one beneath it, creating depth without color shifts. 

Headlines are set in **domaine**, a serif display face (the dominant type signature, e.g. "Email reimagined.Available today." at 76.8px). A second display voice — **aBCFavorit** (sans) — appears in lower bands (e.g. "Beyond expectations"), used for editorial accent. Body text is set in **inter**, deployed with OpenType features enabled globally (`"ss01", "ss04", "ss11"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Negative letter-spacing at display sizes (-0.96px at 96px) compresses headlines into engineered blocks, dense and authoritative. 

Body text reads in Off-White (`#f0f0f0`) (contrast ratio 19.8:1, well above WCAG AA). **#9281f7** (`#9281f7`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks (4 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Black (`#000000`)
- Primary typeface: inter
- Primary text: White (`#ffffff`)
- Accent: #9281f7 (`#9281f7`)
- Display: 96px weight 400, letter-spacing -0.96px
- Shadow system: 4 distinct elevation levels
- Custom fonts loaded: inter, aBCFavorit, domaine, commitMono

## 2. Color Palette & Roles

### Background & Surface
- **Black** (`#000000`): Page background (primary)
- **Canvas** (`rgba(20, 21, 23, 0.6)`): Surface / elevated background (CSS var)
- **Near-Black** (`#0b0e14`): Surface / elevated background
- **Charcoal** (`#464a4d`): Surface / elevated background
- **Near-Black** (`#262a2d`): Surface / elevated background

### Text & Content
- **Off-White** (`#f0f0f0`): Primary body text
- **Grey** (`#a1a4a5`): Secondary text
- **Grey** (`#999999`): Secondary text
- **Grey** (`#bbbbbb`): Secondary text
- **#9281f7** (`#9281f7`): Secondary text

### Accent & Interactive
- **Translucent Light Gray (19%)** (`rgba(214, 235, 253, 0.19)`): Interactive / accent
- **Translucent Light Gray (37%)** (`rgba(217, 237, 255, 0.365)`): Interactive / accent
- **Translucent #22ff99 (12%)** (`rgba(34, 255, 153, 0.118)`): Interactive / accent
- **Translucent #46fea5 (83%)** (`rgba(70, 254, 165, 0.83)`): Interactive / accent
- **Amber** (`#ffca16`): Interactive / accent
- **Translucent #fa8200 (13%)** (`rgba(250, 130, 0, 0.133)`): Interactive / accent
- **Ring Blue** (`#4285f4`): Interactive / accent

### Full Extracted Palette
**43 colors rendered on the page** + **26** more declared in design tokens (CSS custom properties — not necessarily painted). (17 categorized above + 52 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#ffffff` — White
- `#777777` — Slate Grey
- `#dddddd` — Whitesmoke
- `rgba(241, 247, 254, 0.71)` — Translucent Ghost White (71%)
- `rgba(252, 253, 255, 0.937)` — Translucent Pure White (94%)
- `#f8f8f8` — Off-White
- `#6c6c6c` — Slate Grey
- `#a0a0a0` — Grey
- `#ebeced` — Whitesmoke
- `rgba(229, 237, 253, 0.482)` — Translucent Light Gray (48%)
- `#c5221f` — M Tricolor Red
- `#ff9592` — #ff9592
- `rgba(255, 23, 63, 0.176)` — Translucent #ff173f (18%)
- `#70b8ff` — #70b8ff
- `rgba(0, 119, 255, 0.227)` — Translucent #0077ff (23%)
- `rgba(211, 237, 248, 0.114)` — Translucent Light Gray (11%)
- `rgba(216, 244, 246, 0.035)` — Translucent Light Gray (4%)
- `rgba(217, 237, 254, 0.145)` — Translucent Light Gray (14%)
- `#cccccc` — Light Grey
- `#70757e` — Slate Gray
- `rgba(255, 100, 101, 0.92)` — Translucent #ff6465 (92%)
- `#ffd60a` — Gold
- `rgba(67, 254, 164, 0.67)` — Translucent #43fea4 (67%)
- `#3b9eff` — Ring Blue
- `#ababab` — Grey
- `#00a3ff` — Sky Bright
- `rgba(68, 255, 164, 0.62)` — Translucent #44ffa4 (62%)
- `#52595b` — Charcoal *(token)*
- `#ff801f` — #ff801f *(token)*
- `#ffc53d` — #ffc53d *(token)*
- `#ffe7b3` — Vibrant Yellow *(token)*
- `#191b1e` — Near-Black *(token)*
- *…+20 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(to top in oklab, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)` — (footer)
- `linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.5))` — (heading)

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-inset-shadow-alpha`: `100%`
- `--tw-inset-ring-shadow`: `0 0 #0000`
- `--tw-inset-shadow`: `0 0 #0000`
- `--tw-shadow-alpha`: `100%`

**Success**
- `--color-green-4`: `#11ff992d`
- `--color-green-3`: `#22ff991e`
- `--color-green-500`: `lab(70.5521% -66.5147 45.8073)`
- `--color-green-6`: `#44ffaa4b`

**Warning**
- `--color-yellow-9`: `#ffc53d`
- `--color-yellow-300`: `lab(89.7033% -.480294 84.4917)`
- `--color-yellow-4`: `#fc820032`
- `--color-yellow-5`: `#fd8b0041`

**Border Radius Token**
- `--radius-4xl`: `2rem`
- `--radius-sm`: `.25rem`
- `--radius-2xl`: `1rem`
- `--radius-md`: `.375rem`

**Font Weight Token**
- `--font-weight-bold`: `700`
- `--font-weight-light`: `300`
- `--font-weight-semibold`: `600`
- `--font-weight-medium`: `500`

**Error / Destructive**
- `--color-red-5`: `#ff204756`
- `--color-red-9`: `#fe4e54e4`
- `--color-red-600`: `lab(48.4493% 77.4328 61.5452)`
- `--color-red-12`: `#ffd1d9`

**Spacing Token**
- `--tw-space-x-reverse`: `0`
- `--spacing`: `.25rem`
- `--tw-border-spacing-y`: `0px`
- `--tw-space-y-reverse`: `0`

**Motion Token**
- `--default-transition-duration`: `.15s`
- `--default-transition-timing-function`: `cubic-bezier(.4, 0, .2, 1)`
- `--tw-duration`: `.2s`

**Background**
- `--color-background`: `#000`
- `--color-canvas`: `#14151799`

**Other tokens**
- `--color-orange-4`: `#ff590039`
- `--text-placeholder`: `#52595b`
- `--color-orange-10`: `#ff801f`
- `--color-zinc-200`: `lab(90.6853% .399232 -1.45452)`
- `--color-pink-500`: `lab(56.9303% 76.8162 -8.07021)`
- `--font-abc-favorit`: `"aBCFavorit"`
- `--color-neutral-300`: `lab(84.92% 0 -.0000119209)`
- `--text-base--line-height`: `calc(1.5 / 1)`

## 3. Typography Rules

### Font Families
- **Primary**: `inter`
- **Secondary**: `domaine`
- **Font 3**: `aBCFavorit`
- **Font 4**: `commitMono`
- **Font 5**: `-apple-system`

### Custom Fonts Loaded
- **inter** weight 100 900 (normal)
- **aBCFavorit** weight 400 (normal)
- **aBCFavorit** weight 500 (normal)
- **domaine** weight 400 (normal)
- **domaine** weight 500 (normal)
- **domaine** weight 700 (normal)
- **commitMono** weight 400 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | domaine | 96px | 400 | 1 | -0.96px | Main headline (h1) |
| Label Heading | aBCFavorit | 20px | 400 | 1 | normal | Small heading (H4) |
| Body | inter | 16px | 400 | 1.5 | normal | Standard reading text |
| Button Large | inter | 16px | 600 | 1.5 | normal | Button label (16px) |
| Button | inter | 14px | 500 | 1.43 | normal | Button label (14px) |
| Button | inter | 14px | 600 | 1.43 | normal | Button label (14px) |
| Link | inter | 14px | 400 | 1 | normal | Link (14px) — Decoration: none |
| Caption / Badge | commitMono | 12px | 400 | 1.33 | normal | small text (12px) |

### Font Weight Scale

CSS custom properties define 5 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--font-weight-normal`: `400` — Regular
- `--font-weight-medium`: `500` — Medium
- `--font-weight-semibold`: `600` — SemiBold
- `--font-weight-bold`: `700` — Bold

### Full Font Size Scale

Sizes detected in the design (descending): `96px`, `76.80px`, `56px`, `24px`, `20px`, `18px`, `16px`, `14px`, `12px`

> 4 size(s) detected outside the sampled hierarchy (76.8px, 56px, 24px, 18px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

### OpenType & Variable Font Features

The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:

- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)
- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)

**Clone instruction:** Enable these in your CSS:
```css
body {
  font-feature-settings: "ss01", "ss04", "ss11", "liga", "ss03";
}
```

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `rgba(241, 247, 254, 0.71)`
- Padding: 4px
- Radius: 6px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

**Outline**
- Background: `transparent`
- Text: `#ffffff` `{colors.accent-glow}`
- Padding: 0px 16px
- Radius: 16px
- Border: 2px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.05)
- Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Font: 14px weight 600
- Use: Secondary action with border

**Outline**
- Background: `transparent`
- Text: `#ffffff` `{colors.accent-glow}`
- Padding: 0px 20px
- Radius: 16px
- Border: 2px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.05)
- Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Font: 16px weight 600
- Use: Secondary action with border

**Icon Button**
- Background: `transparent`
- Text: `#a1a4a5` `{colors.ink-subtle}`
- Padding: 0px
- Radius: 8px
- Border: 1px solid rgba(214, 235, 253, 0.19)
- Font: 16px weight 400
- Use: Toolbar/UI icons

**Primary Brand**
- Background: `#00a3ff`
- Text: `#ffffff` `{colors.accent-glow}`
- Padding: 12px 20px
- Radius: 4px
- Font: 14px weight 600
- Use: Primary CTA / brand action

### CTA Banners

**Full-width CTA**
- Background: `rgba(211, 237, 248, 0.114)`
- Text: `#ffffff` `{colors.accent-glow}`
- Padding: 8px 6px 8px 12px
- Radius: 9999px
- Font: 14px weight 500
- Use: Full-width conversion strip with headline + button

### Code Blocks

**Inline Code / Pre**
- Background: `transparent`
- Text: `#f8f8f8`
- Padding: 16px 10px 16px 0px
- Radius: 0px
- Font: 14px weight 400 — commitMono
- Use: Code samples, CLI commands, syntax highlighting blocks


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(240, 240, 240)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(240, 240, 240)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(240, 240, 240)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(241, 247, 254, 0.71)"
  badge:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(160, 160, 160)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgba(241, 247, 254, 0.71)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **4 shape(s)** in this system: `Ghost`, `Outline`, `Icon Button`, `Primary Brand`
- **DO NOT introduce new buttons variants** without justification

### CTA Banners
- **1 shape(s)** in this system: `Full-width CTA`
- **DO NOT introduce new cta banners variants** without justification

### Code Blocks
- **1 shape(s)** in this system: `Inline Code / Pre`
- **DO NOT introduce new code blocks variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
calc(100% - 18px)

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 48px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 16px | Large rounded elements, pill segments |
| Xl | 24px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `6px` |
| CTA Banners | `9999px` |
| Code Blocks | `0px` |
| Page Body | `0px` |

**Shape Personality**: Sharp + Pill Contrast — Angular precision with pill-shaped accents (status badges, tags). Creates strong visual hierarchy.

**Full Radius Spectrum**: 0px, 4px, 6px, 7px, 8px, 10px, 12px, 16px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~96px internal vertical padding (up to 144px) — **very airy / premium**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**6/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 410px tall (not full-viewport)
- **Heading:** "Email fordevelopers" — 96px left-aligned
- **Subheading:** "The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale."
- **CTAs:** 2 (primary: "Get started")
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** sticky (stays visible during scroll)
- **Layout:** unknown — Layout not classified
- **Height:** 58px
- **Logo:** ✓ present
- **Nav links:** 1 primary items
- **CTAs in nav:** 2
- **Clone instruction:** Build a sticky unknown navigation. Reserve 2 slots for primary CTAs.

### Card Grid Pattern

- **Card count:** 3 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 6234×244px (aspect 25.58:1)
- **Gap:** 32px between cards
- **Content:** ✓ image
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~25.58:1 aspect ratio. Each card has an image at the top.

### Pricing Table Pattern

- **Tier count:** 2 pricing tiers
- **Layout:** vertical stacked
- **Columns (desktop):** 2-up
- **Feature list:** ✓ (median ~41 feature points per tier)
- **Clone instruction:** Build a 2-column vertical-stack pricing comparison.

### Testimonial Pattern

- **Count:** 40 testimonial blocks
- **Layout:** grid
- **Avg quote length:** 224 chars (long-form story)
- **Includes:** ✓ avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a grid of 40 testimonials. Each includes an avatar.  

### Footer Pattern

- **Columns:** 2
- **Links:** 2 total
- **Height:** 56px
- **Includes:** ✗ no newsletter | ✓ social icons |  
- **Clone instruction:** Build a 2-column footer with ~1 links per column, social media links.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgb(0, 0, 0) 0px 0px 0px 8px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgb(255, 255, 255) 0px 1px 1px 0px inset` | Buttons, pressed-state elements |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ease-in` | `cubic-bezier(.4, 0, 1, 1)` | Custom Ease — Balanced |
| `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-out` | `cubic-bezier(0, 0, .2, 1)` | Ease Out — Decelerating |
| `--ease-in-out` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |
| `--tw-ease` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--ai-shimmer-speed` | `2s` | Cinematic |
| `--default-transition-duration` | `.15s` | Fast |
| `--ai-border-speed` | `3s` | Cinematic |
| `--tw-duration` | `.2s` | Normal |

### Copy-Paste Transition Snippets

**Color / Background**
```css
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-...;
```

**Color / Background**
```css
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cub...;
```

**Color / Background**
```css
transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-...;
```

**Transform**
```css
transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), translate 0.2s cubic-bezier(0.4, 0, 1, 1), scale 0.2s cubic-bezier(0.4, 0,...;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `drawerIn` | Fade + Move | opacity, transform | UI transition |
| `drawerOut` | Fade + Move | opacity, transform | UI transition |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `pulse` | Fade | opacity | Attention / status |
| `ai-shimmer-text` | Custom | background-position-x, background-position-y | Loading placeholder |
| `scroll-x` | Slide | transform | UI transition |
| `shine` | Custom | background-position-x, background-position-y | UI transition |
| `disco` | Rotate / Spin | transform | UI transition |
| `fade-in` | Fade | opacity | Element entrance |
| `fade-out` | Fade | opacity | Element exit |
| `open-slide-down-fade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `close-slide-up-fade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `open-slide-up-fade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `close-slide-down-fade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `open-scale-in-fade` | Fade + Move | opacity, animation-composition, transform | Focus / emphasis |
| `close-scale-out-fade` | Fade | opacity | Focus / emphasis |
| `open-scale-up-fade` | Fade + Move | opacity, transform | Focus / emphasis |
| `plop` | Fade | opacity | UI transition |
| `hero-text-slide-up-fade` | Fade + Move | opacity, transform | Panel / drawer enter |
| `webgl-scale-in-fade` | Fade + Move | opacity, transform | Focus / emphasis |

> *29 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `500ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 49 unique animations (50 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use dark background (`#000000`) as the foundation — this is a dark-mode-native design
- Use inter as the primary typeface — it defines the brand personality
- Use negative letter-spacing (-0.96px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use #9281f7 (`#9281f7`) as the primary accent — it's the brand's signature interactive color
- Use 16px border-radius on buttons — the standard corner rounding for interactive elements
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Make the navigation sticky — it stays visible during scroll, signaling content depth
- Each card includes a top image — imagery is part of the card identity, not optional
- Show person avatars with testimonials — social proof is human-centric here
- Lay out testimonials in a grid (40+ items) — quantity signals scale and trust

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't over-build the footer — this design keeps it minimal (2 cols, 2 links)


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(0, 0, 0)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(0, 0, 0)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(146, 129, 247)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(146, 129, 247)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 375px | Single column, compact spacing |
| Mobile | 480px | Single column, compact spacing |
| Mobile Large | 600px | Expanded mobile layout |
| Tablet | 900px | Multi-column grids begin |
| Tablet | 1000px | Multi-column grids begin |
| Desktop | 1160px | Full feature layout |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `96px` | `64px` |
| heading | line-height | `96px` | `64px` |
| heading | letter-spacing | `-0.96px` | `-0.64px` |
| button | width | `auto` | `40px` |
| sidebar | width | `200px` | `340px` |

### Collapsing Strategy
- Headlines: 96px → 64px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 4px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Hero collapses left-aligned → centered** — composition shifts (verify on actual mobile render).
- **Footer columns collapse:** 2 columns (desktop) → 1 column (mobile).


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
- **WebGL** — GPU 3D/shader graphics (hero atmosphere is rendered, not a flat gradient).
- **Glassmorphism** — 4 frosted/blur layer(s) (e.g. `blur(25px)`).
- **Mesh gradients** — 5 multi-stop organic color field(s) as background atmosphere.
- **Clip-path shapes** — 8 non-rectangular cut(s).
- **Blend modes** — 5 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.
- **CSS-variable animations** (5) — animated custom properties.

> **Motion fingerprint**: WebGL/3D canvas, glassmorphism (4 layers), mesh gradients, non-rectangular shapes (10), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://resend.com/static/cover.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 1.6:1 (landscape (16:9-ish))
- Rendered size: 1440×900px
- Alt text: "Floor background"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 3 (38%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 1 (13%)
- Ultra-wide (>2.3): 4 (50%)

**Media Format Mix:**

**Average rendered image size:** 894×442px
**Above-fold image count:** 2 / 8

**Decorative Patterns Detected:**
- 56 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 3 radial gradients — circular color blooms used for spotlight/glow effects
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Black (`#000000`)
- Primary text: Off-White (`#f0f0f0`)
- Accent: #9281f7 (`#9281f7`)
- Border: Translucent Light Gray (19%) (`rgba(214, 235, 253, 0.19)`)
- Font: inter
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Black background (#000000). Headline at 96px inter weight 400, line-height 1, letter-spacing -0.96px, color #f0f0f0."
- "Create the primary CTA button: `#9281f7` background, `rgba(241, 247, 254, 0.71)` text, 6px border-radius, 4px padding, 600 weight, inter font."
- "Build navigation: sticky on `#000000`. inter 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Black (`#000000`) — every component is composited against this exact base.
2. **Typography**: All type in inter, weight range 300–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
3. **Accent**: #9281f7 (`#9281f7`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 150ms for micro-interactions, 2000ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-surface-1: #0b0e14;
  --ca-surface-2: #464a4d;
  --ca-ink: #f0f0f0;
  --ca-ink-subtle: #a1a4a5;
  --ca-primary: #9281f7;
  --ca-on-primary: #111111;
  --ca-primary-hover: #22ff99;
  --ca-hairline: #d6ebfd;
  --ca-accent-glow: #ffffff;
}

/* Typography */
:root {
  --ca-font-primary: "domaine", system-ui, sans-serif;
  --ca-text-display: 96px;
  --ca-text-body: 16px;
  --ca-text-small: 14px;
  --ca-text-caption: 12px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 48px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 24px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-in: cubic-bezier(.4, 0, 1, 1);
  --ca-ease-out: cubic-bezier(0, 0, .2, 1);
  --ca-ease-in-out: cubic-bezier(.4, 0, .2, 1);
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    classes: ["bg-black", "isolate"]
    height: 12320px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgb(0, 0, 0)"
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: hero
    tag: div
    classes: ["relative", "z-20", "pt-[60px]", "md:max-h-[950px]"]
    height: 900px
    width: full-bleed
    layout: block
    children: 2
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
  - section: feature-section
    tag: section
    classes: ["mx-auto", "max-w-5xl", "px-6", "pb-8"]
    height: 900px
    width: 1280px
    layout: block
    children: 1
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "0px 24px 32px"
  - section: feature-section
    tag: div
    classes: ["origin-center-left", "order-2", "max-w-3xl", "animate-hero-text-slide-up-fade"]
    height: 410px
    width: 544px
    layout: block
    children: 4
    padding: "0px 0px 0px 64px"
  - section: content-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 479px
    width: 1280px
    layout: flex-column justify=normal
    children: 5
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 1296px
    width: 1280px
    layout: block
    children: 4
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 975px
    width: 1280px
    layout: block
    children: 3
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 1358px
    width: 1280px
    layout: block
    children: 4
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 899px
    width: 1280px
    layout: block
    children: 3
    vertical-padding: ~96px (airy)
    contains: chart/canvas (reproduce as live data-viz, not a flat image)
    padding: "96px 24px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 1367px
    width: 1280px
    layout: block
    children: 5
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: sidebar
    tag: aside
    classes: ["flex-shirk-0", "w-full", "overflow-auto", "border-b"]
    height: 650px
    width: 200px
    layout: block
    children: 1
    padding: "10px 8px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "sm:py-24", "relative", "mt-12"]
    height: 941px
    width: 1280px
    layout: block
    children: 6
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: unknown
    tag: div
    classes: ["relative", "flex", "flex-col", "items-center"]
    height: 631px
    width: full-bleed
    layout: flex-column justify=center
    children: 6
    vertical-padding: ~96px (airy)
    padding: "96px 0px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 1351px
    width: 1280px
    layout: block
    children: 4
    vertical-padding: ~96px (airy)
    padding: "96px 24px"
  - section: feature-section
    tag: section
    classes: ["mx-auto", "py-12", "sm:py-24", "px-0"]
    height: 661px
    width: full-bleed
    layout: block
    children: 3
    vertical-padding: ~96px (airy)
    padding: "96px 0px"
  - section: section
    tag: section
    classes: ["mx-auto", "px-6", "py-12", "sm:py-24"]
    height: 768px
    width: 1280px
    layout: block
    children: 3
    vertical-padding: ~48px
    padding: "96px 24px 0px"
  - section: content-section
    tag: div
    classes: ["relative", "z-20", "-mt-[9vh]", "overflow-hidden"]
    height: 637px
    width: full-bleed
    layout: block
    children: 3
    bg: "rgb(0, 0, 0)"
    vertical-padding: ~144px (airy)
  - section: footer
    tag: footer
    classes: ["mx-auto", "flex", "max-w-5xl", "flex-col"]
    height: 636px
    width: 1280px
    layout: flex-row justify=normal
    children: 2
    vertical-padding: ~144px (airy)
    padding: "144px 24px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "Integrate tonight"
    - "First-class developer experience"
    - "Test mode"
    - "Welcome to ACME, user!"
    - "Email reimagined. Available today."
  ctas:
    - "Features"
    - "Log in"
    - "Get started"
    - "Documentation"
    - "Node.js"
    - "Next.js"
  navigation:
    - "Pricing"
    - "Log in"
    - "Get started"
  footer-links:
    - "View on GitHub"
    - "All systems operational"
    - "Email API"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  hero:
    count: 1
    avg-ratio: 1.87
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "Resend Dashboard - Overview"
  thumbnail:
    count: 44
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "Logo Example"
      - "Vercel"
      - "Guillermo Rauch"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Features
Company
Resources
Help
Docs
AI
Pricing
Log in
Get started
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `400`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 1 · **cta** 2 · **auth** 1 · **product** 10 · **pricing** 1 · **docs** 6 · **blog** 2 · **project** 1 · **social** 5 · **legal** 1 · **footer** 18 · **download** 1 · **other** 1

**Primary actions (conversion path):**
- Account access — "Log in" (login/signup) → `https://resend.com/login`
- Primary call-to-action — "Get started" (the conversion path) → `https://resend.com/signup`
- Primary call-to-action — "Get Started" (the conversion path) → `https://resend.com/get-started`

**Signals:** 10/50 links carry a featured image · dominant link roles: footer-link (36), content-card (6), inline-link (6).


---
## Extraction Completeness: 86/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 24 | 25 | 17 named colors |
| Typography | 20 | 20 | 8 roles defined |
| Components | 12 | 20 | 3 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 10 | 10 | 485 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (inter, aBCFavorit, domaine)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
- **1 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Dark mode** | Dark surface is the canonical medium; no separate light-mode variables detected | The dark canvas IS the design — reproduce it as the default. Do not generate a light-mode variant unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 485 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 8 typography roles inferred |
| §4 Components | Medium | 3 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 18 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 8 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

8 font file(s) captured (623KB total). When running `prism add`, fonts are saved to `extractions/resend.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'inter';
  /* src: url('/fonts/inter.woff2') format('woff2'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'aBCFavorit';
  /* src: url('/fonts/aBCFavorit.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'aBCFavorit';
  /* src: url('/fonts/aBCFavorit.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'domaine';
  /* src: url('/fonts/domaine.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'domaine';
  /* src: url('/fonts/domaine.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'domaine';
  /* src: url('/fonts/domaine.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'commitMono';
  /* src: url('/fonts/commitMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'commitMono';
  /* src: url('/fonts/commitMono.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**42 @keyframes found** — these are the real animation definitions:

```
@keyframes drawerIn { ... }
@keyframes drawerOut { ... }
@keyframes spin { ... }
@keyframes pulse { ... }
@keyframes ai-shimmer-text { ... }
@keyframes scroll-x { ... }
@keyframes shine { ... }
@keyframes disco { ... }
@keyframes fade-in { ... }
@keyframes fade-out { ... }
@keyframes open-slide-down-fade { ... }
@keyframes close-slide-up-fade { ... }
@keyframes open-slide-up-fade { ... }
@keyframes close-slide-down-fade { ... }
@keyframes open-scale-in-fade { ... }
@keyframes close-scale-out-fade { ... }
@keyframes open-scale-up-fade { ... }
@keyframes plop { ... }
@keyframes hero-text-slide-up-fade { ... }
@keyframes webgl-scale-in-fade { ... }
@keyframes header-slide-down-fade { ... }
@keyframes accordion-slide-down { ... }
@keyframes accordion-slide-up { ... }
@keyframes scaleIn { ... }
@keyframes scaleOut { ... }
@keyframes enterFromRight { ... }
@keyframes enterFromLeft { ... }
@keyframes exitToRight { ... }
@keyframes exitToLeft { ... }
@keyframes caret-blink { ... }
@keyframes scroll-shadow-line { ... }
@keyframes fade-half { ... }
@keyframes fade { ... }
@keyframes hero-scale-in { ... }
@keyframes dots-float-01 { ... }
@keyframes dots-float-02 { ... }
@keyframes bars-bounce { ... }
@keyframes column-border-flash { ... }
@keyframes fadeOut { ... }
@keyframes fadeIn { ... }
@keyframes ai-selection-pulse { ... }
@keyframes rotate { ... }
```

<details><summary>Full keyframes CSS (42 animations)</summary>

```css
@keyframes drawerIn{0%{opacity:0;transform:translate(100%)}
@keyframes drawerOut{0%{opacity:1;transform:translate(0%)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5}}
@keyframes ai-shimmer-text{0%{background-position:100%}
@keyframes scroll-x{0%{transform:translate(0)}
@keyframes shine{0%{background-position:0%}
@keyframes disco{0%{transform:translateY(-50%)rotate(0)}
@keyframes fade-in{0%{opacity:0}
@keyframes fade-out{0%{opacity:1}
@keyframes open-slide-down-fade{0%{opacity:0;transform:translateY(-4px)}
@keyframes close-slide-up-fade{0%{opacity:1;transform:translateY(0)}
@keyframes open-slide-up-fade{0%{opacity:0;transform:translateY(4px)}
@keyframes close-slide-down-fade{0%{opacity:1;transform:translateY(0)}
@keyframes open-scale-in-fade{0%{opacity:0;animation-composition:add,accumulate;transform:scale(.98)}
@keyframes close-scale-out-fade{0%{opacity:1}50%{opacity:0}
@keyframes open-scale-up-fade{0%{opacity:0;transform:scale(.98)translateY(5px)}
@keyframes plop{0%,to{opacity:.2}20%{opacity:1}}
@keyframes hero-text-slide-up-fade{0%{opacity:0;transform:translateY(16px)}
@keyframes webgl-scale-in-fade{0%{opacity:0;transform:scale(.7)}
@keyframes header-slide-down-fade{0%{opacity:0;transform:translateY(-16px)}
@keyframes accordion-slide-down{0%{height:0}
@keyframes accordion-slide-up{0%{height:var(--radix-accordion-content-height)}
@keyframes scaleIn{0%{transform:rotateX(-10deg)scale(.9)}
@keyframes scaleOut{to{opacity:0;filter:blur(10px);transform:rotateX(-10deg)scale(.9)}}
@keyframes enterFromRight{0%{opacity:0;filter:blur(5px);transform:translate(100px)}
@keyframes enterFromLeft{0%{opacity:0;filter:blur(5px);transform:translate(-100px)}
@keyframes exitToRight{0%{opacity:1;filter:blur(5px);transform:translate(0)}50%,to{opacity:0;filter:blur();transform:translate(100px)}}
@keyframes exitToLeft{0%{opacity:1;filter:blur();transform:translate(0)}50%,to{opacity:0;filter:blur(5px);transform:translate(-100px)}}
@keyframes caret-blink{0%{opacity:1}20%{opacity:0}50%{opacity:0}70%{opacity:1}
@keyframes scroll-shadow-line{0%{box-shadow:0 -1px #0000}
@keyframes fade-half{0%{opacity:0}
@keyframes fade{0%{opacity:0}
@keyframes hero-scale-in{0%{opacity:0;transform:scale(.97)}30%{opacity:0}
@keyframes dots-float-01{0%{opacity:0;transform:translate(0)}20%{opacity:1;transform:translate(-24%,-36%)}50%{opacity:0;transform:translate(-60%)}80%{opacity:1;transform:translate(-24%,12%)}
@keyframes dots-float-02{0%{opacity:0;transform:translate(0)}20%{opacity:1;transform:translate(24%,-36%)}50%{opacity:0;transform:translate(60%)}80%{opacity:1;transform:translate(12%,36%)}
@keyframes bars-bounce{10%{transform:scaleX(.84)translate(1px)}30%{transform:scaleX(1.5)translate(2px)}60%{transform:scaleX(.84)translate(2px)}80%{transform:scaleX(.96)translate(1px)}
@keyframes column-border-flash{0%{outline-color:#0000}15%{outline-color:var(--black-a7)}65%{outline-color:var(--black-a7)}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeIn{to{opacity:1}}
@keyframes ai-selection-pulse{0%,to{opacity:1}50%{opacity:.2}}
@keyframes rotate{to{--angle:360deg}}
```
</details>

### Brand Gradient Palette

**13 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: radial-gradient(142% 172% at 116% -36%, #0000 0%,#48484866 100%);

/* Gradient 2 */
background: radial-gradient(184.29% 112.9% at 46.2% 0%, #ffffff80 0%, #fff0 10%);

/* Gradient 3 */
background: linear-gradient(90deg, #fff0 0.46%, #fff3 0.82%, #fff0 2.18%, #fff0 4.43%, #0000 4.79%, #0000000f 5.18%, #00000026 5.44%, #0003 5.74%, #fff3 5.78%, #ffffff2b 6.03%, #ffffff17 6.29%, #fff0 6.56%);

/* Gradient 4 */
background: radial-gradient(var(--tw-gradient-stops,114.08% 50% at 50.2% 0.07%);

/* Gradient 5 */
background: linear-gradient(90deg,#3c2017 0%,#feb400 54%,#62462e 100%);

```

### Hover State CSS (Intercepted)

**4 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-scroll-snap-strictness:proximity;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-i
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 3794 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**8 breakpoints** read from the live `@media` rules (not guessed):
`375px` · `480px` · `600px` · `900px` · `1000px` · `1160px` · `1340px` · `1920px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `12px`×1354 · `16px`×1182 · `14px`×1154 · `18px`×38 · `20px`×26 · `56px`×20 · `24px`×7 · `96px`×4

**Radius scale** (× = paint count): `6px`×100 · `16px`×88 · `8px`×39 · `4px`×24 · `24px`×10 · `10px`×10 · `12px`×3

**Weights** (× = paint count): `400`×3544 · `500`×200 · `600`×41 · `700`×4

**Layout gaps** (× = paint count): `4px`×62 · `16px`×61 · `8px`×59 · `6px`×37 · `32px`×11 · `48px`×10 · `12px`×10 · `normal 16px`×2

**Elevation (real shadows)**:
```css
rgba(176, 199, 217, 0.145) 0px 0px 0px 1px
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
rgb(0, 0, 0) 0px 0px 0px 8px
rgb(255, 255, 255) 0px 1px 1px 0px inset
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:var(--color-background) }
body { font-family:var(--font-sans) }
body { color:var(--color-gray-12) }
body { background-color:var(--color-background,var(--background)) }
body { font-family:var(--font-sans,var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") }
body { color:var(--color-gray-12,var(--gray-12)) }
h1 { font-family:var(--font-domaine) }
h1 { font-size:4rem }
@media (min-width: 48rem) h1 { font-size:6rem }
h1 { font-family:var(--font-domaine,var(--font-domaine-src), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") }
h1 { color:unset; background:linear-gradient(to bottom right,#fff 30%,#ffffff80); background-color:initial }
h2 { font-family:var(--font-display) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://resend.com | 2026-06-11T05:02:15.909Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*