---
version: alpha
name: Resend
description: "A black room, a serif whisper, one lit word in violet."
colors:
  on-surface-variant: "#191B1E"
  surface: "#000000"
  outline: "#212629"
  on-surface: "#FFFFFF"
  primary: "#00C950"
  paper: "#F0F0F0"
  muted: "#A1A4A5"
  card: "#141517"
  hairline: "rgba(214, 235, 253, 0.19)"
  panel-edge: "rgba(217, 237, 254, 0.14)"
  link-ink: "rgba(241, 247, 254, 0.71)"
  display-ink: "rgba(252, 253, 255, 0.94)"
  violet: "#9281F7"
  code-plain: "#EBECED"
  docs-ink: "#252525"
  docs-rule: "rgba(10, 10, 10, 0.1)"
typography:
  poster:
    fontFamily: Inter
    fontSize: 160px
    fontWeight: 400
    lineHeight: 128px
    letterSpacing: -3.2px
  poster-s:
    fontFamily: Inter
    fontSize: 120px
    fontWeight: 400
    lineHeight: 100.8px
    letterSpacing: 0em
  display-xl:
    fontFamily: Domaine
    fontSize: 96px
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: -0.96px
  display-l:
    fontFamily: Domaine
    fontSize: 76.8px
    fontWeight: 400
    lineHeight: 76.8px
    letterSpacing: -0.768px
  section:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 67.2px
    letterSpacing: -2.8px
  heading:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 46.8px
    letterSpacing: -1.8px
  title:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  subheading:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.8px
  lede:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  prose-s:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  code:
    fontFamily: Commit Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
rounded:
  icon-glyph-box-code-scroller: 4px
  inline-chip-table-header-cap: 6px
  tab-tab-label-icon-tile: 8px
  event-status-badge: 10px
  docs-sidebar-item-docs-control: 12px
  card-panel-button: 16px
  wide-section-shell: 24px
  pill-avatar-status-dot: 9999px
  table-header-left-cap-right-cap: 6px
spacing:
  3xs: 4px
  2xs: 6px
  xs: 8px
  sm: 10px
  md: 12px
  lg: 16px
  xl: 32px
  2xl: 48px
  section: 96px
  section-xl: 144px
---
# Resend — Style Reference

> A black room, a serif whisper, one lit word in violet.

**Theme:** dark

Three systems share this capture. The home and pricing pages are one marketing system on true black — a Domaine serif hero over an ABC Favorit grotesk, Inter beneath it, Commit Mono in the code; the event page keeps the black but swaps in a poster-scale condensed uppercase face over a warm atmospheric wash; the documentation flips to white paper with Inter and grey rules. The split falls the moment you leave marketing for reference material. The marketing palette is almost entirely achromatic — black canvas, near-white ink, two card greys — and colour is rationed to status: violet on one headline word, green on a live dot, a five-hue set for delivery events. Type carries hierarchy through scale and negative tracking rather than weight, since the display faces paint one weight each. The rhythm is vertical and generous, sections separated by breathing room rather than dividers.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#000000` | `--color-canvas` | The ground on marketing and the event page. Never a card fill — cards lift off it. |
| Paper | `#F0F0F0` | `--color-ink` | The dominant text ink on home, pricing and the event page; not a fill anywhere the census measures. |
| Muted | `#A1A4A5` | `--color-ink-muted` | Nav labels, ledes, captions — for anything supporting a headline, never the headline. |
| White | `#FFFFFF` | `--color-white` | Primary-button ink, top stop of the headline gradient, ticket-button fill. Reserve the solid fill for inversion. |
| Card | `#141517` | `--color-surface` | The filled pricing panel, one step off black — the lift is luminance, not shadow. |
| Card Lift | `#191B1E` | `--color-surface-2` | Second stop of the avatar placeholder gradient; the top of the surface ladder. |
| Card Edge | `#212629` | `--color-border` | The 1px border on pricing's panels — the dark pages' one opaque structural line. |
| Hairline | `rgba(214, 235, 253, 0.19)` | `--color-hairline` | Table rules, chip borders, icon-tile edges. Cool blue-white at 19%, never a flat grey. |
| Panel Edge | `rgba(217, 237, 254, 0.14)` | `--color-hairline-soft` | Feature cards and label chips. Where Hairline draws data, this draws content. |
| Link Ink | `rgba(241, 247, 254, 0.71)` | `--color-ink-link` | Footer links, table headers, HTTP lines. Translucent, so it sits under Paper without a second grey. |
| Display Ink | `rgba(252, 253, 255, 0.94)` | `--color-ink-display` | Mid-scale headings. Six percent short of white, which is the point. |
| Violet | `#9281F7` → `#9A54DC` | `--color-accent` | Clip-text on the word "tonight", plus one checkbox border. Editorial emphasis — never a CTA. |
| Signal Green | `#00C950` | `--color-signal` | The footer's live dot and the delivery indicator. System state only. |
| Code Plain | `#EBECED` | `--color-code` | Plain identifiers in the code panel, above the dimmer token greys. |
| Docs Ink | `#252525` | `--color-docs-ink` | Documentation card and section headings — the light system's near-black. |
| Docs Rule | `rgba(10, 10, 10, 0.1)` | `--color-docs-border` | The 1px edge of every white quickstart card. |

## Tokens — Typography

### Domaine — the serif hero, set once per page at optical size with line-height locked to 1.0 · `--font-display-serif`
- **Substitute:** Freight Display Pro, Canela, Playfair Display
- **Weights:** 400
- **Sizes:** 96px, 76.8px
- **Line height:** 96px at 96px, 76.8px at 76.8px — solid, exactly 1.0
- **Letter spacing:** −0.96px at 96px, −0.768px at 76.8px (a constant −0.01em)
- **Role:** The largest type on home and pricing, and the system's only serif — "Email for developers", "Pricing", then out of the way.

### ABC Favorit — the section display grotesk, one weight, tracking tightening as it grows · `--font-display`
- **Substitute:** Aeonik, Söhne, General Sans
- **Weights:** 400
- **Sizes:** 56px, 36px, 20px, 16px
- **Line height:** 67.2px at 56px (1.20), 46.8px at 36px (1.30), 26px and 25px at 20px, 24px at 16px
- **Letter spacing:** −2.8px at 56px (−0.05em), −1.8px at 36px, −0.8px at 16px, normal at 20px
- **Role:** Every section headline and card title on home and pricing, doing a 600 weight's work with size and tracking instead.

### Inter — the body and interface face across both marketing and docs · `--font-body`
- **Substitute:** Geist, SF Pro Text, system-ui
- **Weights:** 400, 500, 600 on home, pricing and the event page; 400, 500, 600, 700 in the documentation
- **Sizes:** 18px, 16px, 14px, 12px on marketing; 24px, 16px, 14px in docs
- **Line height:** 27px at 18px (1.5), 24px at 16px, 22.4px at 14px (1.6) for prose, 20px at 14px (1.43) for interface, 16px at 12px
- **Letter spacing:** normal at every marketing size the census measures; −0.6px on the docs 24px heading
- **Role:** Ledes, feature copy, nav labels, buttons, table cells, the whole documentation page. 500 on nav items, 600 on buttons and docs headings.

### Commit Mono — the code voice and every technical label · `--font-mono`
- **Substitute:** JetBrains Mono, IBM Plex Mono, ui-monospace
- **Weights:** 400, 500
- **Sizes:** 16px, 14px, 12px
- **Line height:** 24px at 16px, 20px at 14px, 16px at 12px — a flat 1.33 at the small sizes
- **Letter spacing:** normal at every size the census measures
- **Role:** Syntax-highlighted samples, the line-number gutter, the `HTTP 200:` response lines, and the event page's date and venue lines.

### Lateral — the event poster face: condensed, uppercase, set past 100px · `--font-poster`
- **Substitute:** Druk Condensed, Anton, Oswald
- **Weights:** 400, 700
- **Sizes:** 160px, 140px, 120px, 75px
- **Line height:** 128px at 160px (0.80), 112px at 140px, 100.8px at 120px, 112.5px at 75px
- **Letter spacing:** −3.2px at 160px, −1.6px at 140px, −0.75px at 75px, normal at 120px/700
- **Role:** The event page only — "AN EVENT FOR BUILDERS", the wordmark lockup, the pull quote. Line-height under 1.0 makes two lines read as one block.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Poster | 160px | 128px | −3.2px | `--text-poster` |
| Poster S | 120px | 100.8px | normal | `--text-poster-sm` |
| Display XL | 96px | 96px | −0.96px | `--text-display-xl` |
| Display L | 76.8px | 76.8px | −0.768px | `--text-display-lg` |
| Section | 56px | 67.2px | −2.8px | `--text-section` |
| Heading | 36px | 46.8px | −1.8px | `--text-heading` |
| Title | 20px | 26px | normal | `--text-title` |
| Subheading | 16px | 24px | −0.8px | `--text-subheading` |
| Lede | 18px | 27px | normal | `--text-lede` |
| Body | 16px | 24px | normal | `--text-body` |
| Prose S | 14px | 22.4px | normal | `--text-prose-sm` |
| Label | 14px | 20px | normal | `--text-label` |
| Caption | 12px | 16px | normal | `--text-caption` |
| Code | 12px | 16px | normal | `--text-code` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 6px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 10px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 32px | `--spacing-xl` |
| 2xl | 48px | `--spacing-2xl` |
| section | 96px | `--spacing-section` |
| section-xl | 144px | `--spacing-section-xl` |

### Border Radius

| Element | Value |
|---------|-------|
| Icon glyph box, code scroller | 4px |
| Inline chip, table header cap | 6px |
| Tab, tab label, icon tile | 8px |
| Event status badge | 10px |
| Docs sidebar item, docs control | 12px |
| Card, panel, button | 16px |
| Wide section shell | 24px |
| Pill, avatar, status dot | 9999px |
| Table header, left cap / right cap | `6px 0 0 6px` / `0 6px 6px 0` |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Avatar ring | `rgba(24, 25, 28, 0.88) 0 0 0 1px` | `--shadow-ring` |
| Button lift | `rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px` | `--shadow-button` |
| Icon halo | `rgb(0, 0, 0) 0 0 0 8px` | `--shadow-halo` |
| Inner light | `rgb(255, 255, 255) 0 1px 1px 0 inset` | `--shadow-inner` |
| Docs focus ring | `rgba(0, 0, 0, 0) 0 0 0 2px` | `--shadow-focus` |

### Layout

- **Page max-width:** the marketing column is `.mx-auto.w-full.max-w-5xl.px-6`; the event page runs wider — pixel widths `not measured`
- **Section gap:** 96px is the home page's standing rhythm; 64px and 48px for tighter blocks, 144px above both footers, 220px before the event page's first section
- **Card padding:** 24px 32px on the feature card, 32px on the wide media panel, 16px on the pricing accordion row, 48px 64px on the docs main
- **Element gap:** 8px default, 4px inside pills and buttons, 6px between tabs, 12px and 16px between grouped blocks, 32px and 48px between columns

## Components

### Sticky Nav Bar
**Role:** The page-level wayfinder — brand left, link cluster centred, sign-in and sign-up right.
Built on `.sticky.top-0.z-40.transition`, carrying `#F0F0F0` ink over black with no border and no shadow. The nav item row — sample text "Features" — is Inter 14px/500/20px, ink `#A1A4A5`, 6px gap to its chevron; box height `not measured`. "Log in" uses `.outline-hidden.relative.items-center.border` at 16px radius in the same muted ink, the "Get started" pill beside it. The bar never blurs — the hero art is darker than the type.

### Primary Button — "Get started"
**Role:** The one repeated call to action across marketing.
`.relative.inline-flex.items-center.justify-center` paints two sizes: 14px/600/20px with `padding 0 16px` on pricing and the event page, 16px/600/24px with `padding 0 20px` on home and pricing. Both take `radius 16px`, `border 2px rgba(255, 255, 255, 0.05)`, `shadow rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px`, `#FFFFFF` ink. The fill is a wash, not a colour — `rgba(253, 253, 253, 0.05) → rgba(240, 240, 228, 0.1)`, warmed by a unit of yellow at the bottom — so the 2px translucent border, not contrast, makes it a button.

### Ticket Button — inverted
**Role:** The event page's single conversion, and the only inverted control in the capture.
An `a` with `fill #FFFFFF`, `text #000000`, 16px/600, `padding 0 16px`, `radius 16px`, `border none`, `shadow none`, carried by `"Get your ticket" .relative.inline-flex.items-center.border`. Solid white on near-black atmosphere is the whole mechanic — no border, no shadow, no gradient — and it appears twice, in the nav and under the headline. A white fill is a statement the system otherwise declines to make.

### Announcement Pill
**Role:** A dateline for the thing happening next, floated above the hero headline.
`"Join us at Resend Forward" .inline-flex.items-center.gap-1.whitespace-nowrap` fills `#0B0E14` — a hair off canvas — at `radius 9999px`, 4px gap to its chevron. Its container `.rainbow-border.mb-8.inline-flex.items-center` paints three 44%-opacity stops as a rim: `rgba(2, 252, 239, 0.44)`, `rgba(255, 181, 43, 0.44)`, `rgba(160, 43, 254, 0.44)`. The ghost pill beside it, `.outline-hidden.transition.duration-150.ease-in-out`, runs 12px/400/16px, `padding 8px 14px`, `radius 9999px`, `border 1px rgba(255, 255, 255, 0.05)`. Colour enters marketing here, nowhere near the buttons.

### Feature Card
**Role:** The repeating unit in the horizontally scrolling capability rows.
`.max-w-full.rounded-2xl.border` is an `li`: `fill none`, `padding 24px 32px`, `radius 16px`, `border 1px rgba(217, 237, 254, 0.14)`, `shadow none`, 16px/400/24px. No fill is the point: a rectangle of hairline on canvas. Its icon tile, `.flex.h-9.w-9.shrink-0`, takes a `#1B1B1B → #030303` gradient at `radius 8px`, `border 1px rgba(214, 235, 253, 0.19)` and an 8px black halo that bleeds it back into the canvas.

### Pricing Panel
**Role:** The filled container for pay-as-you-go and add-on blocks.
`.mb-4.rounded-2xl.border.border-gray-3` fills `#141517`, `radius 16px`, `border 1px #212629`, `shadow none`, `padding 0`, 16px/400/24px — the padding lives on the row inside, `.group.w-full.p-4.text-left`, a button at `padding 16px`, `radius 16px`, no border, no fill, so the whole header is the hit target. The one place an opaque surface meets an opaque border; elsewhere the border is translucent and the fill absent.

### Plan Comparison Table
**Role:** The dense feature matrix beneath the plan cards.
Cells are `.border-slate-6.h-11.truncate.border-b` — 14px/400/20px, `padding 0 12px`, `radius 0`, `border 1px rgba(214, 235, 253, 0.19)`. Headers use `.border-slate-6.text-slate-11.h-9.border-b` at 12px/600/16px, ink `rgba(241, 247, 254, 0.71)`, end caps at `radius 6px 0 0 6px` and `0 6px 6px 0` so the header band reads as one rounded strip. A second rule, `.border-b.border-gray-200` on `tr`, paints `1px #E5E7EB`. Rounding only at the caps is what keeps a long table from reading as a stack of cards.

### Language Tab Row
**Role:** The SDK switcher above the code sample — Node.js, Next.js, Remix, Nuxt and the rest.
The tab is `.group.relative.h-8.shrink-0`, a button at `padding 1px`, `radius 8px`, no border, no shadow; its label `"Node.js" .relative.z-10.flex.h-full` runs Inter 14px/400/20px, ink `#F0F0F0`, `padding 0 8px`, `radius 8px`, on a 6px gap. That 1px outer padding is the selection mechanic: the active pill draws one pixel inside the button, so nothing shifts when selection moves.

### Code Block
**Role:** The proof that the API is three lines — the largest single element on the home page.
Commit Mono 12px/400/16px throughout, in a four-tone token ramp: plain `#EBECED`, strings `#ABABAB`, keywords `#6C6C6C`, punctuation `#A0A0A0`, and the `.relative.inline-block.w-8.shrink-0` gutter at `#464A4D`. The panel scrolls inside `.relative.overflow-auto.py-4.pr-2.5`, its side rules paint `#262A2D`, the inner scroller takes a 4px radius. The gap between brightest and dimmest token is narrow on purpose — code as texture first.

### Event Status Badge
**Role:** The delivery-state chip in the logs and webhook demos.
`.inline-flex.items-center.font-medium.truncate` on a `span` at `radius 10px`, one tinted fill and one saturated ink per state: delivered `rgba(34, 255, 153, 0.12)` under `rgba(70, 254, 165, 0.83)`; opened `rgba(0, 119, 255, 0.23)` under `#70B8FF`; clicked `rgba(131, 84, 254, 0.21)` under `#BAA7FF`; bounced `rgba(255, 23, 63, 0.18)` under `#FF9592`; complained `rgba(250, 130, 0, 0.13)` under `#FFCA16`. Fills stay under a quarter opacity so five hues share one dark row without shouting — the palette's whole chroma budget.

### Docs Quickstart Card
**Role:** The framework tile grid under the documentation introduction.
`.card.block.font-normal.group`: `fill #FFFFFF`, `radius 16px`, `border 1px rgba(10, 10, 10, 0.1)`, `shadow rgba(0, 0, 0, 0) 0 0 0 2px` — a transparent ring for focus and hover — at 16px/400/28px, `padding 0`. Its heading is `"Node.js Quickstart" .not-prose.font-semibold.text-base.text-gray-800` in Inter 16px/600/24px, ink `#252525`. Same 16px radius as the dark cards, opposite polarity: white fill and a black-at-10% edge.

### Docs Sidebar Item
**Role:** The left-hand navigation row in the documentation.
`.group.flex.items-start.pr-3` paints as both `a` and `button` at 14px/400/20px, `padding 6px 16px`, `radius 12px`, no border, no shadow, 12px gap to its icon. Selected is the same class with `fill rgba(0, 0, 0, 0.1)` — a tinted wash, no border, no weight change. Ink runs `#3E3E3E` for items, `#161616` for the group header `.sidebar-group-header.flex.items-center.gap-2.5`, `#6F6F6F` for quieter rows. 12px here against 16px on the cards separates navigation from content.


## Do's and Don'ts

### Do
- Set display type at 400. ABC Favorit and Domaine each paint one weight in the census; hierarchy is size plus tracking instead.
- Pull tracking negative as type grows: −0.05em at 56px on ABC Favorit, −0.01em at 96px on Domaine. Leave Inter alone — every marketing Inter row the census measures reads `normal`.
- Lift surfaces with luminance and hairlines: `#141517` over `#000000`, edged `1px #212629`.
- Keep `radius 16px` for card- and button-shaped things and `9999px` for pills; that pair is the most-painted radius in the capture.
- Ration colour to state: violet on one headline word, green on system health, the five delivery hues inside badges at ≤25% fill opacity.
- Let sections breathe at 96px, 144px above the footer. Space, not rules, does the separating.

### Don't
- Don't put the accent on a call to action. Violet is carried by `"tonight" .inline.leading-[0].bg-gradient-to-br.bg-clip-text` and a checkbox border; buttons take a near-transparent wash.
- Don't fill the feature card. `.w-[350px].max-w-full.rounded-2xl.border` measures `fill none` — filling it breaks the ladder the pricing panel tops.
- Don't reach for a flat grey border on the dark pages. The structural line is `rgba(214, 235, 253, 0.19)`, cool and translucent, shifting with whatever sits behind it.
- Don't add shadows to dark surfaces. The captured shadows are an avatar ring, a button lift, an icon halo, an inner highlight and a transparent docs focus ring — no drop shadows.
- Don't mix polarities in one view: `#000000` with `#F0F0F0` ink for marketing, `#FFFFFF` with `#252525` ink for docs, black with poster type for the event.
- Don't uppercase the marketing type. Uppercase belongs to Lateral, on the event page.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The ground on home, pricing and the event page |
| 1 | Card | `#141517` | The filled pricing panel, one luminance step up, edged in `#212629` |
| 2 | Card Lift | `#191B1E` | The upper stop of the avatar placeholder gradient |
| 3 | Inner Sheen | `rgba(255, 255, 255, 0.03)` / `rgba(255, 255, 255, 0.01)` | The `.absolute.inset-px.rounded-2xl.bg-black` inlay |
| — | Docs Paper | `#FFFFFF` | The documentation's `main` and cards, edged `1px rgba(222, 222, 222, 0.7)` |

## Elevation

Depth is luminance and hairline; the measured shadows confirm it. The most-painted box-shadow, `rgba(24, 25, 28, 0.88) 0 0 0 1px` on the avatar images, is a ring rather than a lift — it punches each face out of the one behind it. The primary button's `rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px` is faint enough on black to work as an edge softener; `rgb(0, 0, 0) 0 0 0 8px` on the icon tile is a halo that *removes* separation by extending the canvas; the docs card's `rgba(0, 0, 0, 0) 0 0 0 2px` is transparent, a slot for interaction. Rank by fill: canvas, then `#141517`, then a hairline.

## Imagery

Two registers, both dark. Marketing uses rendered 3D on black: a matte faceted cube in the hero, then squircle app icons — an envelope on violet, a lens on purple, an atom on cyan — each lit from within so the glow is the only colour in frame. Under those, product screenshots composited so the panel edge dissolves into the canvas, and a monochrome white logo wall. The event page swaps rendering for atmosphere: a warm wash bloomed behind the type, vignetted by stacked black gradients at 92%, 78%, 58%, 74%, 54% and 38% opacity. Documentation uses no photography, only monochrome framework glyphs inside white cards. Never put this art on a light background; it is built to end in black.

## Layout

Full-bleed canvas, contained content. Marketing sections centre on `.mx-auto.w-full.max-w-5xl.px-6`, and the hero splits headline left, 3D art right, before stacking. The rhythm holds at 96px between home-page sections, drops to 64px and 48px inside a block, opens to 144px before the footer. The event page runs wider, its sections padded `0 32px` and `0 40px`, and pushes the first one down 220px so the poster headline owns the screen. Pricing is a four-column plan grid over a full-width comparison table, then stacked pay-as-you-go and add-on panels. Documentation abandons the pattern: fixed left sidebar, a `main` padded 48px 64px with a `1px rgba(222, 222, 222, 0.7)` edge, an "On this page" rail at right. Marketing navigation is sticky and unblurred; docs uses a three-tab bar and a search control.

## Typography Voice

Two display voices against one interface voice. Domaine sets the page-opening statement at 96px with line-height locked to exactly 96px and −0.01em tracking — a serif set solid, so the two lines of "Email for developers" interlock into one shape. ABC Favorit takes every heading below it at −0.05em, tight enough at 56px that letters nearly touch, on a 1.20 line-height. Then Inter, `normal` in every marketing row the census measures, at 1.6 line-height for prose against 1.43 for interface labels — one face, two jobs, separated by leading rather than size. What makes it work: the display faces stay at 400, so no type competes with the one bright thing on screen. The event page breaks the rule on purpose — Lateral at 160px, 0.80 line-height, 700 for the pull quote.

## Agent Prompt Guide

## Quick Color Reference

- background: `#000000`
- text: `#F0F0F0`
- surface: `#141517`
- border: `#212629`
- accent: `#9281F7`
- primary action: no distinct CTA color — `rgba(253, 253, 253, 0.05) → rgba(240, 240, 228, 0.1)` wash inside a `2px rgba(255, 255, 255, 0.05)` border

## Example Component Prompts

1. **Hero**: Full-bleed `#000000`, content on `.mx-auto.w-full.max-w-5xl.px-6`, 96px rhythm. Headline in Domaine 400 at 96px / 96px / −0.96px, filled `#FFFFFF → rgba(255, 255, 255, 0.5)`; lede in Inter 400 18px / 27px, ink `#A1A4A5`; pill above at `radius 9999px`, fill `#0B0E14`, 4px gap. Primary button beside a text link, 16px gap.
2. **Primary Button**: Inline-flex anchor, Inter 600 at 16px / 24px, ink `#FFFFFF`, `padding 0 20px`, `radius 16px`, `border 2px rgba(255, 255, 255, 0.05)`, background gradient `rgba(253, 253, 253, 0.05) → rgba(240, 240, 228, 0.1)`, `box-shadow rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px`. Icon gap 4px.
3. **Feature Card**: 350px `li`, no fill, `padding 24px 32px`, `radius 16px`, `border 1px rgba(217, 237, 254, 0.14)`. Icon tile 36px square, `radius 8px`, gradient `#1B1B1B → #030303`, `border 1px rgba(214, 235, 253, 0.19)`, `box-shadow rgb(0, 0, 0) 0 0 0 8px`. Title ABC Favorit 400 16px / 24px / −0.8px, ink `rgba(252, 253, 255, 0.94)`; body Inter 400 14px / 22.4px, ink `#A1A4A5`.
4. **Status Badge Row**: Inline-flex spans at `radius 10px`, Inter 500 14px / 20px, 8px gap to the timestamp. Delivered: fill `rgba(34, 255, 153, 0.12)`, ink `rgba(70, 254, 165, 0.83)`. Opened: `rgba(0, 119, 255, 0.23)` / `#70B8FF`. Bounced: `rgba(255, 23, 63, 0.18)` / `#FF9592`. Complained: `rgba(250, 130, 0, 0.13)` / `#FFCA16`.
5. **Docs Card Grid**: Three columns on `#FFFFFF`, 16px gap. Each card `fill #FFFFFF`, `radius 16px`, `border 1px rgba(10, 10, 10, 0.1)`, `box-shadow rgba(0, 0, 0, 0) 0 0 0 2px`, line-height 28px; glyph, then a heading in Inter 600 16px / 24px, ink `#252525`. Sidebar rows at `padding 6px 16px`, `radius 12px`, ink `#3E3E3E`, active fill `rgba(0, 0, 0, 0.1)`.

## Similar Brands

- **Linear** — near-black canvas, one tight grotesk, hierarchy from scale and translucent hairlines rather than colour.
- **Vercel** — the same monochrome discipline, and the same habit of letting a code block be the hero image.
- **Stripe Docs** — a light Inter-set reference system of card grids and quiet grey rules beside a darker marketing site.
- **Railway** — dark developer marketing where product screenshots composite into the canvas rather than sit framed on it.
- **Arc / The Browser Company** — the same serif display against a technical sans, with one warm gradient carrying the colour.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #000000;
  --color-ink: #F0F0F0;
  --color-ink-muted: #A1A4A5;
  --color-white: #FFFFFF;
  --color-surface: #141517;
  --color-surface-2: #191B1E;
  --color-border: #212629;
  --color-hairline: rgba(214, 235, 253, 0.19);
  --color-hairline-soft: rgba(217, 237, 254, 0.14);
  --color-ink-link: rgba(241, 247, 254, 0.71);
  --color-ink-display: rgba(252, 253, 255, 0.94);
  --color-accent: #9281F7;
  --color-accent-deep: #9A54DC;
  --color-signal: #00C950;
  --color-code: #EBECED;
  --color-code-string: #ABABAB;
  --color-code-keyword: #6C6C6C;
  --color-code-punctuation: #A0A0A0;
  --color-code-gutter: #464A4D;
  --color-code-rule: #262A2D;
  --color-state-delivered: rgba(70, 254, 165, 0.83);
  --color-state-opened: #70B8FF;
  --color-state-clicked: #BAA7FF;
  --color-state-bounced: #FF9592;
  --color-state-complained: #FFCA16;
  --color-docs-ink: #252525;
  --color-docs-ink-body: #3E3E3E;
  --color-docs-ink-muted: #6F6F6F;
  --color-docs-border: rgba(10, 10, 10, 0.1);
  --color-docs-rule: rgba(222, 222, 222, 0.7);
  --gradient-button: linear-gradient(rgba(253, 253, 253, 0.05), rgba(240, 240, 228, 0.1));
  --gradient-headline: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0.5));
  --gradient-icon-tile: linear-gradient(#1B1B1B, #030303);

  /* Typography — Families */
  --font-display-serif: 'Domaine Display', 'Freight Display Pro', Canela, Georgia, serif;
  --font-display: 'ABC Favorit', Aeonik, 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Commit Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-poster: Lateral, 'Druk Condensed', Anton, sans-serif;

  /* Typography — Scale */
  --text-poster: 160px;      --leading-poster: 128px;
  --text-poster-sm: 120px;   --leading-poster-sm: 100.8px;
  --text-display-xl: 96px;   --leading-display-xl: 96px;
  --text-display-lg: 76.8px; --leading-display-lg: 76.8px;
  --text-section: 56px;      --leading-section: 67.2px;
  --text-heading: 36px;      --leading-heading: 46.8px;
  --text-title: 20px;        --leading-title: 26px;
  --text-subheading: 16px;   --leading-subheading: 24px;
  --text-lede: 18px;         --leading-lede: 27px;
  --text-body: 16px;         --leading-body: 24px;
  --text-prose-sm: 14px;     --leading-prose-sm: 22.4px;
  --text-label: 14px;        --leading-label: 20px;
  --text-caption: 12px;      --leading-caption: 16px;
  --text-code: 12px;         --leading-code: 16px;
  --tracking-poster: -3.2px;
  --tracking-display-xl: -0.96px;
  --tracking-section: -2.8px;
  --tracking-heading: -1.8px;
  --tracking-subheading: -0.8px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-section: 96px;
  --spacing-section-xl: 144px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-badge: 10px;
  --radius-nav: 12px;
  --radius-card: 16px;
  --radius-shell: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-ring: rgba(24, 25, 28, 0.88) 0 0 0 1px;
  --shadow-button: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
  --shadow-halo: rgb(0, 0, 0) 0 0 0 8px;
  --shadow-inner: rgb(255, 255, 255) 0 1px 1px 0 inset;
  --shadow-focus: rgba(0, 0, 0, 0) 0 0 0 2px;
}
```

### Tailwind v4

```css
@theme {
  --color-canvas: #000000;
  --color-ink: #F0F0F0;
  --color-ink-muted: #A1A4A5;
  --color-white: #FFFFFF;
  --color-surface: #141517;
  --color-surface-2: #191B1E;
  --color-border: #212629;
  --color-hairline: rgba(214, 235, 253, 0.19);
  --color-hairline-soft: rgba(217, 237, 254, 0.14);
  --color-ink-link: rgba(241, 247, 254, 0.71);
  --color-ink-display: rgba(252, 253, 255, 0.94);
  --color-accent: #9281F7;
  --color-accent-deep: #9A54DC;
  --color-signal: #00C950;
  --color-code: #EBECED;
  --color-code-string: #ABABAB;
  --color-code-keyword: #6C6C6C;
  --color-code-punctuation: #A0A0A0;
  --color-code-gutter: #464A4D;
  --color-code-rule: #262A2D;
  --color-state-delivered: rgba(70, 254, 165, 0.83);
  --color-state-opened: #70B8FF;
  --color-state-clicked: #BAA7FF;
  --color-state-bounced: #FF9592;
  --color-state-complained: #FFCA16;
  --color-docs-ink: #252525;
  --color-docs-ink-body: #3E3E3E;
  --color-docs-ink-muted: #6F6F6F;
  --color-docs-border: rgba(10, 10, 10, 0.1);
  --color-docs-rule: rgba(222, 222, 222, 0.7);

  --font-display-serif: 'Domaine Display', 'Freight Display Pro', Canela, Georgia, serif;
  --font-display: 'ABC Favorit', Aeonik, 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Commit Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-poster: Lateral, 'Druk Condensed', Anton, sans-serif;

  --text-poster: 160px;
  --text-poster--line-height: 128px;
  --text-poster-sm: 120px;
  --text-poster-sm--line-height: 100.8px;
  --text-display-xl: 96px;
  --text-display-xl--line-height: 96px;
  --text-display-lg: 76.8px;
  --text-display-lg--line-height: 76.8px;
  --text-section: 56px;
  --text-section--line-height: 67.2px;
  --text-heading: 36px;
  --text-heading--line-height: 46.8px;
  --text-title: 20px;
  --text-title--line-height: 26px;
  --text-subheading: 16px;
  --text-subheading--line-height: 24px;
  --text-lede: 18px;
  --text-lede--line-height: 27px;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-prose-sm: 14px;
  --text-prose-sm--line-height: 22.4px;
  --text-label: 14px;
  --text-label--line-height: 20px;
  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-code: 12px;
  --text-code--line-height: 16px;

  --tracking-poster: -3.2px;
  --tracking-display-xl: -0.96px;
  --tracking-section: -2.8px;
  --tracking-heading: -1.8px;
  --tracking-subheading: -0.8px;

  --spacing-3xs: 4px;
  --spacing-2xs: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 10px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-section: 96px;
  --spacing-section-xl: 144px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-badge: 10px;
  --radius-nav: 12px;
  --radius-card: 16px;
  --radius-shell: 24px;
  --radius-pill: 9999px;

  --shadow-ring: rgba(24, 25, 28, 0.88) 0 0 0 1px;
  --shadow-button: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
  --shadow-halo: rgb(0, 0, 0) 0 0 0 8px;
  --shadow-inner: rgb(255, 255, 255) 0 1px 1px 0 inset;
  --shadow-focus: rgba(0, 0, 0, 0) 0 0 0 2px;
}
```