Resend

Pure-black canvas (#000000, 55+ measured background occurrences) paired with off-white #f0f0f0 doing the dominant reading layer (2323 occurrences) and pure #ffffff reserved for hero emphasis. Cool slate descender #464a4d / #6c6c6c / #a0a0a0 carries de-emphasis. Accent palette is a five-voice synthesizer: #44ffa4 (signature green, ~36 occurrences), #ffff92 (pastel yellow), #ff9592 (coral), #3b9eff (bright blue), #ffca16 (amber) — together under 5% of total surface area. The atmospheric IMG glow tiles introduce additional warm-cool tones via raster, never via CSS color tokens.

• Off-white #f0f0f0 (weight 400) — primary reading text, ~2323 measured surface occurrences
• Pure #ffffff — hero display headlines and emphasis only, ~176 occurrences
• Cool slate #a0a0a0 / #6c6c6c / #464a4d — secondary text, captions, metadata, de-emphasized labels
• Signature accent #44ffa4 — single-section emphasis (CTA hover, active state, pull-quote highlight); never as a fill background
• Secondary accent voices #ffff92 / #ff9592 / #3b9eff / #ffca16 — used solo per section, never combined; treat as printer's marks
• Pure black #000000 background does ~95% of surface; never gradient the body, let atmospheric IMG layer carry depth

linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%) — section bottom mask blending atmospheric IMG into pure black
Atmospheric IMG glow tiles (1525×1566 absolute decorative layers at op:0.8 + op:1.0) — raster-based, not CSS gradient

• Triple-family discipline: Domaine (serif display) + Inter (sans body/UI) + Commit Mono (code). Self-hosted via Next.js font preloading: domaine_regular/medium/bold + abc_favorit_book/medium + commit_mono_regular/italic + inter_variable.
• Domaine serif: hero display only — italic 'Email for developers'-tier headlines. Never use serif in UI controls, dashboard, or transactional surfaces.
• Inter: body and UI at weight 400 (reading) and 500 (labels, buttons, dense UI). Sizes: 12 / 14 / 16 / 18 px. Line-height 16/20/24/27 — tight body, generous read.
• Commit Mono: code blocks (16/24px), inline code (12-14px / 16-20px line-height). Treat code like editorial pull-quotes — same compositional weight as a section heading.
• No italic in Inter or Commit Mono — italic is reserved exclusively for Domaine display.
• Paragraph max 55-65 ch at 16px Inter; code blocks may run wider but stay inside 1280 max container.

• Tailwind-native scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 20 / 24 / 28 / 30 px — single-digit micro increments are the rhythm signature.
• Container max-width 1280px (Tailwind 2xl); secondary narrow rails at 344 / 364 / 400 px for mobile content clusters and code-block wrappers.
• Section vertical rhythm: 80-120px on desktop, 48-64px on mobile — atmospheric IMG layer extends past section boundaries to soften transitions.
• Card and code-block padding: 12-24px on desktop, 8-16px on mobile. Always pick from scale; never magic numbers.
• Gutter values for flex/grid: 4 / 8 / 12 / 16 px — tighter than typical Tailwind defaults to support code-block-first compositions.

• Primary elevation: heavy 8px focus ring at the active accent — `box-shadow: rgb(0, 0, 0) 0px 0px 0px 8px` (extracted measured token). Used for code-block focus and CTA hover.
• Subtle multi-layer drop shadow available with rgba(176, 199, 217, x) tint — single-digit-percent opacity, blur 1-4px, near-zero spread. Reserved for floating cards on light panels (rare).
• Atmospheric depth comes from layered IMG glow tiles, not CSS shadow. The decorative layer sits behind text at z-index 0-10; text and UI live at z-index 20-50.
• Never use bloom, halo, or glassmorphism — Resend's depth is grounded in layered raster + flat type, not blur.

• Pick radius from the 4 / 6 / 8 / 10 / 12 px scale; never half-pixel or magic values.
• Buttons and inputs: 6-8px radius (medium); cards and code blocks: 10-12px (the upper end of the scale, for editorial weight).
• Avoid pill / fully-rounded shapes outside of badges — Resend's geometry is rectangular-with-corners-softened, not stadium-rounded.
• Icons stay 16-22px in UI; never larger than 28px outside of decorative spotlight contexts.

• Hero CTA button (primary)

  background

  #ffffff

  color

  #000000

  padding

  12px 20px

  borderRadius

  8px

  fontSize

  14px

  fontWeight

  500

  fontFamily

  Inter, system-ui, sans-serif

  transition

  all 0.15s cubic-bezier(0.4, 0, 0.2, 1)

  Tailwind

  Copy

  inline-flex items-center justify-center px-5 py-3 bg-white text-black text-sm font-medium font-[Inter] rounded-lg transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)] hover:bg-[#f0f0f0]

• Code block (Commit Mono editorial)

  background

  #000000

  color

  #f0f0f0

  padding

  20px 24px

  borderRadius

  12px

  border

  1px solid #464a4d

  fontSize

  14px

  lineHeight

  20px

  fontFamily

  Commit Mono, ui-monospace, monospace

  Tailwind

  Copy

  block bg-black text-[#f0f0f0] px-6 py-5 rounded-xl border border-[#464a4d] text-sm leading-5 font-[Commit_Mono] whitespace-pre overflow-x-auto

• Hero display headline (Domaine italic)

  fontFamily

  Domaine, ui-serif, Georgia, serif

  fontStyle

  italic

  fontSize

  64px

  fontWeight

  400

  lineHeight

  1.05

  letterSpacing

  -1.5px

  color

  #ffffff

  Tailwind

  Copy

  font-[Domaine] italic text-[64px] leading-[1.05] tracking-[-1.5px] text-white font-normal

• Section atmospheric glow wrapper

  position

  relative

  background

  #000000

  overflow

  hidden

  Tailwind

  Copy

  relative bg-black overflow-hidden [&>img.atmosphere]:absolute [&>img.atmosphere]:inset-0 [&>img.atmosphere]:w-full [&>img.atmosphere]:h-full [&>img.atmosphere]:object-cover [&>img.atmosphere]:opacity-90 [&>img.atmosphere]:pointer-events-none [&>img.atmosphere]:z-0 [&>.content]:relative [&>.content]:z-20

• Inline accent highlight (signature green)

  color

  #44ffa4

  fontWeight

  500

  Tailwind

  Copy

  text-[#44ffa4] font-medium

• Two-tier timing system: an interactive tier at 0.15-0.2s (transition-all baseline + transform/border emphasis) and a longer reveal/ambient tier at 0.5 / 1 / 1.5 / 30 s (slow scroll choreography + atmospheric drift). The tiers stay separated — interactive feedback never strays into the slow tier.
• Primary easing: cubic-bezier(0.4, 0, 0.2, 1) — Tailwind ease-out. Reserve cubic-bezier(0.4, 0, 1, 1) for transform-exit only. Slow scroll choreography uses cubic-bezier(0.36, 0.66, 0.6, 1) and ease-in-out / ease-out CSS keywords; long ambient drifts run linear.
• Respect prefers-reduced-motion — all decorative IMG and canvas animations should pause; code-block reveals should switch to instant.

• Buttons confirm with a 0.15s background-color shift, not a translate or scale — motion is for layout transitions, not affordance.
• Links underline on hover with a single-pixel solid line at the same color — never an accent shift on simple text links.
• Code blocks on hover/focus gain an 8px solid focus ring at the section accent — no blur, no glow.
• Cursor stays default on body content; pointer reserved for genuine interactives. No custom cursor pranks.

Tailwind defaults: sm=640 / md=768 / lg=1024 / xl=1280 / 2xl=1536. Container narrows to 344-400px on mobile (three explicit breakpoints for content clusters), expands to 1024-1280 on desktop. Atmospheric IMG layer crops to viewport but never tiles.

• Mobile (< 640px): single-column, container 344-400px, vertical rhythm 48-64px between sections, code blocks horizontal-scroll-overflow.
• Tablet (640-1024px): two-column hero permitted; code blocks stay full-width.
• Desktop (> 1024px): full grid, 1280px max container, atmospheric IMG layer at full bleed.
• Domaine serif display sizes: 64px hero / 48px section / 32px sub on desktop; 40 / 32 / 24 on mobile.

• Off-white #f0f0f0 on pure-black #000000 yields ~17.7:1 contrast — exceeds WCAG AAA. Maintain this ratio for body reading; never drop body text below #a0a0a0 (~7.5:1, AA Large).
• Focus ring is 8px solid accent — high-visibility, no blur. Never remove `:focus-visible` outline in favor of pure visual cue.
• Atmospheric IMG layers use `pointer-events: none` and `aria-hidden=true` — they are decorative, must not enter the accessibility tree.
• Domaine italic display headings use sufficient size (>32px) and weight to remain readable; never set italic body in Domaine.
• Code blocks include both syntax highlighting and `<pre><code>` semantic markup; never style raw `<div>` as code.
• Respect `prefers-reduced-motion` for all atmospheric animations and reveal transitions.

Next.js for routing + font preloading (Domaine, ABC Favorit, Commit Mono, Inter Variable all loaded via /_next/static/media). Tailwind for utility-first styling on a custom dark-first config. Atmospheric IMG glow tiles are static raster assets, not generated SVG. Code highlighting is likely Shiki or Prism (syntax tokens visible in extracted typography).

• Self-host Domaine + Commit Mono + ABC Favorit + Inter Variable via `next/font/local`; preload critical weights (Domaine bold/medium/regular, Inter Variable, Commit Mono regular/italic).
• Define Tailwind theme with the 5-voice accent palette as semantic tokens: --color-accent-green/yellow/coral/blue/amber.
• Atmospheric IMG layer: export from design tool at 2x resolution, serve as `next/image` with `priority={false}`, `loading="lazy"`, and `pointer-events-none` class.
• Code blocks: render via Shiki SSR with a custom dark theme matching the off-white-on-black palette and accent highlights.

• Reserve Domaine serif for display only — hero, section titles, editorial pull-quotes.
• Use signature green #44ffa4 as a brand fingerprint — fewer occurrences, more impact.
• Layer atmospheric IMG glow behind type at z-index 0; keep all readable content at z-index 20+.
• Stick to the two-tier timing system: 0.15-0.2s for interactive feedback (cubic-bezier(0.4, 0, 0.2, 1) primary, cubic-bezier(0.4, 0, 1, 1) for transform exit) and 0.5-30s for slow reveals + atmospheric drift (cubic-bezier(0.36, 0.66, 0.6, 1), ease-in-out, ease-out, linear).
• Treat code blocks as editorial centerpieces — full width, generous padding, syntax-highlighted typography.
• Pull spacing values exclusively from the 2-30px Tailwind-native scale.

• Don't use Domaine in dashboard, transactional UI, or product surfaces — serif belongs to marketing display.
• Don't combine more than two accent colors per section — five-voice palette stays solo.
• Don't fake the atmospheric IMG layer with CSS gradients alone — the depth comes from layered raster.
• Don't add a third motion duration or alternate easing — two signatures is the brand fingerprint.
• Don't pill-round buttons (border-radius >12px on rectangles) — Resend's geometry is rectangular-with-soft-corners.
• Don't drop body text contrast below 7.5:1 — Resend's pure-black canvas demands high-contrast reading layers.

• Pure-black background only — no off-black substitutions. The brand depends on the literal #000000.
• Triple-font discipline is non-negotiable — substituting Domaine with another serif or Commit Mono with another monospace dilutes the editorial-developer tone.
• Atmospheric IMG layer must be raster, not SVG/CSS — the visual depth comes from real photographic noise.
• Tailwind 2-30px spacing scale is the entire vocabulary — no off-scale magic numbers.
• Container max-width 1280px — wider compositions break the editorial pacing.

• Background grep: only `#000000` appears as `bg-black` or `background-color: rgb(0, 0, 0)` on body and section wrappers.
• Font-family grep: Domaine appears only on `display`, `hero`, or `editorial` selectors; Inter on body/UI; Commit Mono on `code`/`pre`/`kbd`.
• Accent color grep: each of #44ffa4 / #ffff92 / #ff9592 / #3b9eff / #ffca16 appears in at most two sections; combined surface area < 5%.
• Spacing grep: every padding/margin/gap value belongs to {2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 30}px.
• Border-radius grep: every value belongs to {4, 6, 8, 10, 12}px.
• Motion grep: `transition-duration` values draw from {0.15s, 0.2s, 0.5s, 1s, 1.5s, 30s}; easings draw from {cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 1, 1), cubic-bezier(0.36, 0.66, 0.6, 1), ease-in-out, ease-out, linear}. Interactive feedback stays at 0.15-0.2s; longer values reserved for reveals + atmospheric drift.
• Container grep: max-width values are {344, 364, 400, 1024, 1280}px — no other.
• Atmospheric layer grep: every decorative `<img>` has `pointer-events-none`, `aria-hidden`, and z-index 0; readable content has z-index ≥ 20.