④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

open-design/design-systems/resend/DESIGN.md

@@ -0,0 +1,306 @@
+# Design System Inspired by Resend
+
+> Category: Productivity & SaaS
+> Email API. Minimal dark theme, monospace accents.
+
+## 1. Visual Theme & Atmosphere
+
+Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.
+
+The typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.
+
+What makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`), the result is a design system that feels premium, precise, and quietly confident.
+
+**Key Characteristics:**
+- Pure black background with near-white (`#f0f0f0`) text — theatrical, gallery-like darkness
+- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)
+- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a cold, crystalline shimmer
+- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales
+- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds
+- OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`) on display fonts
+- Commit Mono for code — monospace as a design element, not an afterthought
+- Whisper-level shadows using blue-tinted ring: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Void Black** (`#000000`): Page background, the defining canvas color (95% opacity via `--color-black-12`)
+- **Near White** (`#f0f0f0`): Primary text, button text, high-contrast elements
+- **Pure White** (`#ffffff`): `--color-white`, maximum emphasis text, link highlights
+
+### Accent Scale — Orange
+- **Orange 4** (`#ff5900`): `--color-orange-4`, at 22% opacity — subtle warm glow
+- **Orange 10** (`#ff801f`): `--color-orange-10`, primary orange accent — warm, energetic
+- **Orange 11** (`#ffa057`): `--color-orange-11`, lighter orange for secondary use
+
+### Accent Scale — Green
+- **Green 3** (`#22ff99`): `--color-green-3`, at 12% opacity — faint emerald wash
+- **Green 4** (`#11ff99`): `--color-green-4`, at 18% opacity — success indicator glow
+
+### Accent Scale — Blue
+- **Blue 4** (`#0075ff`): `--color-blue-4`, at 34% opacity — medium blue accent
+- **Blue 5** (`#0081fd`): `--color-blue-5`, at 42% opacity — stronger blue
+- **Blue 10** (`#3b9eff`): `--color-blue-10`, bright blue — links, interactive elements
+
+### Accent Scale — Other
+- **Yellow 9** (`#ffc53d`): `--color-yellow-9`, warm gold for warnings or highlights
+- **Red 5** (`#ff2047`): `--color-red-5`, at 34% opacity — error states, destructive actions
+
+### Neutral Scale
+- **Silver** (`#a1a4a5`): Secondary text, muted links, descriptions
+- **Dark Gray** (`#464a4d`): Tertiary text, de-emphasized content
+- **Mid Gray** (`#5c5c5c`): Hover states, subtle emphasis
+- **Medium Gray** (`#494949`): Quaternary text
+- **Light Gray** (`#f8f8f8`): Light mode surface (if applicable)
+- **Border Gray** (`#eaeaea`): Light context borders
+- **Edge Gray** (`#ececec`): Subtle borders on light surfaces
+- **Mist Gray** (`#dedfdf`): Light dividers
+- **Soft Gray** (`#e5e6e6`): Alternate light border
+
+### Surface & Overlay
+- **Frost Primary** (`#fcfdff`): Primary color token (slight blue tint, 94% opacity)
+- **White Hover** (`rgba(255, 255, 255, 0.28)`): Button hover state on dark
+- **White 60%** (`oklab(0.999994 ... / 0.577)`): Semi-transparent white for muted text
+- **White 64%** (`oklab(0.999994 ... / 0.642)`): Slightly brighter semi-transparent white
+
+### Borders & Shadows
+- **Frost Border** (`rgba(214, 235, 253, 0.19)`): The signature — icy blue-tinted borders at 19% opacity
+- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`): Slightly lighter variant for list items
+- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`): Blue-tinted shadow-as-border
+- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`): Heavy black focus ring
+- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`): Minimal card elevation
+
+## 3. Typography Rules
+
+### Font Families
+- **Display Serif**: `domaine` (Domaine Display by Klim Type Foundry) — hero headlines
+- **Display Sans**: `aBCFavorit` (ABC Favorit by Dinamo), fallbacks: `ui-sans-serif, system-ui` — section headings
+- **Body / UI**: `inter`, fallbacks: `ui-sans-serif, system-ui` — body text, buttons, navigation
+- **Monospace**: `commitMono`, fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+- **Secondary**: `Helvetica` — fallback for specific UI contexts
+- **System**: `-apple-system, system-ui, Segoe UI, Roboto` — embedded content
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | `"ss01", "ss04", "ss11"` |
+| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |
+| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | `"ss01", "ss04", "ss11"` |
+| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | `"ss01", "ss04", "ss11"` |
+| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | `"ss01", "ss04", "ss11"` |
+| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |
+| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |
+| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |
+| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |
+| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | `"ss01", "ss03", "ss04"` — positive tracking |
+| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |
+| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |
+| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |
+| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |
+| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: uppercase` |
+| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: capitalize` |
+| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
+| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |
+| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |
+| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |
+
+### Principles
+- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.
+- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.
+- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.
+- **OpenType as identity**: The `"ss01"`, `"ss03"`, `"ss04"`, `"ss11"` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.
+- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Transparent Pill**
+- Background: transparent
+- Text: `#f0f0f0`
+- Padding: 5px 12px
+- Radius: 9999px (full pill)
+- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
+- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)
+- Use: Primary CTA on dark backgrounds
+
+**White Solid Pill**
+- Background: `#ffffff`
+- Text: `#000000`
+- Padding: 5px 12px
+- Radius: 9999px
+- Use: High-contrast CTA ("Get started")
+
+**Ghost Button**
+- Background: transparent
+- Text: `#f0f0f0`
+- Radius: 4px
+- No border
+- Hover: subtle background tint
+- Use: Secondary actions, tab items
+
+### Cards & Containers
+- Background: transparent or very subtle dark tint
+- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
+- Radius: 16px (standard cards), 24px (large sections/panels)
+- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)
+- Dark product screenshots and code demos as card content
+- No traditional box-shadow elevation
+
+### Inputs & Forms
+- Text: `#f0f0f0` on dark, `#000000` on light
+- Radius: 4px
+- Focus: shadow-based ring
+- Minimal styling — inherits dark theme
+
+### Navigation
+- Sticky dark header with frost border bottom: `1px solid rgba(214, 235, 253, 0.19)`
+- "Resend" wordmark left-aligned
+- ABC Favorit 14px weight 500 with +0.35px tracking for nav links
+- Pill CTAs right-aligned
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Product screenshots and code demos dominate content sections
+- Dark-themed screenshots on dark background — seamless integration
+- Rounded corners: 12px–16px on images
+- Full-width sections with subtle gradient overlays
+
+### Distinctive Components
+
+**Tab Navigation**
+- Horizontal tabs with subtle selection indicator
+- Tab items: 8px radius
+- Active state with subtle background differentiation
+
+**Code Preview Panels**
+- Dark code blocks using Commit Mono
+- Frost borders (`rgba(214, 235, 253, 0.19)`)
+- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)
+
+**Multi-color Accent Badges**
+- Each product feature has its own accent color from the CSS variable scale
+- Badges use the accent color at low opacity (12–42%) for background, full opacity for text
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px
+
+### Grid & Container
+- Centered content with generous max-width
+- Full-width black sections with contained inner content
+- Single-column hero, expanding to feature grids below
+- Code preview panels as full-width or contained showcases
+
+### Whitespace Philosophy
+- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.
+- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated "islands" of content.
+- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.
+
+### Border Radius Scale
+- Sharp (4px): Buttons (ghost), inputs, small interactive elements
+- Subtle (6px): Menu panels, navigation items
+- Standard (8px): Tabs, content blocks
+- Comfortable (10px): Accent elements
+- Card (12px): Clipboard buttons, medium containers
+- Large (16px): Feature cards, images, main buttons
+- Section (24px): Large panels, section containers
+- Pill (9999px): Primary CTAs, tags, badges
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |
+| Ring (Level 1) | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | Shadow-as-border for cards, containers |
+| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)` | Explicit borders — buttons, dividers, tabs |
+| Subtle (Level 2) | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Light card elevation |
+| Focus (Level 3) | `rgb(0, 0, 0) 0px 0px 0px 8px` | Heavy black focus ring — accessibility |
+
+**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (`rgba(214, 235, 253, 0.19)`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a "glass panel floating in space" aesthetic where borders are the primary depth mechanism.
+
+### Decorative Depth
+- Subtle warm gradient glows behind hero content (orange/amber tints)
+- Product screenshots create visual depth through their own internal UI
+- No gradient backgrounds — depth comes from border luminance and content contrast
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure black (`#000000`) as the page background — the void is the canvas
+- Apply frost borders (`rgba(214, 235, 253, 0.19)`) for all structural lines — they're the blue-tinted signature
+- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else
+- Enable OpenType `"ss01"`, `"ss04"`, `"ss11"` on Domaine and ABC Favorit text
+- Apply pill radius (9999px) to primary CTAs and tags
+- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity variants for context-specific highlighting
+- Keep shadows at ring level (`0px 0px 0px 1px`) — on black, traditional shadows don't work
+- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking
+
+### Don't
+- Don't lighten the background above `#000000` — the pure black void is non-negotiable
+- Don't use neutral gray borders — all borders must have the frost blue tint
+- Don't apply Domaine Display to body text — it's a display-only serif
+- Don't mix accent colors in the same component — each feature gets one accent color
+- Don't use box-shadow for elevation on the dark background — use frost borders instead
+- Don't skip the OpenType stylistic sets — they define the typographic character
+- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px
+- Don't make buttons opaque on dark — transparency with frost border is the pattern
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <480px | Single column, tight padding, 76.8px hero |
+| Mobile | 480–600px | Standard mobile, stacked layout |
+| Desktop | >600px | Full layout, 96px hero, expanded sections |
+
+*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*
+
+### Touch Targets
+- Pill buttons: adequate padding (5px 12px minimum)
+- Tab items: 8px radius with comfortable hit areas
+- Navigation links spaced with 0.35px tracking for visual separation
+
+### Collapsing Strategy
+- Hero: Domaine 96px → 76.8px on mobile
+- Navigation: horizontal → hamburger
+- Feature sections: side-by-side → stacked
+- Code panels: maintain width, horizontal scroll if needed
+- Spacing compresses proportionally
+
+### Image Behavior
+- Product screenshots maintain aspect ratio
+- Dark screenshots blend seamlessly with dark background at all sizes
+- Rounded corners (12px–16px) maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Void Black (`#000000`)
+- Primary text: Near White (`#f0f0f0`)
+- Secondary text: Silver (`#a1a4a5`)
+- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)
+- Orange accent: `#ff801f`
+- Green accent: `#11ff99` (at 18% opacity)
+- Blue accent: `#3b9eff`
+- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`
+
+### Example Component Prompts
+- "Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19))."
+- "Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned."
+- "Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text."
+- "Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d)."
+- "Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500."
+
+### Iteration Guide
+1. Start with pure black — everything floats in the void
+2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural element — not gray, not neutral
+3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross
+4. OpenType stylistic sets are mandatory on display fonts — they define the character
+5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text
+6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers
+7. No shadows — use frost borders for depth against the void

open-design/design-systems/resend/USAGE.md

@@ -0,0 +1,32 @@
+# Resend Usage
+
+Design System 2.0 package guide for OpenDesign agents and reviewers.
+
+## Read Order
+
+1. Read this file first to understand the package contract.
+2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
+3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
+4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
+5. Inspect `preview/` pages when a visual sanity check is useful.
+
+## Design Highlights
+
+- Pure black background with near-white (`#f0f0f0`) text — theatrical, gallery-like darkness
+- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)
+- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a cold, crystalline shimmer
+- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales
+
+## Do
+
+- Preserve the schema token names exactly so cross-brand switching stays reliable.
+- Use `--accent` for primary actions, links, focus states, and one clear focal element.
+- Reuse component groups from `components.manifest.json` before inventing new controls.
+- Treat `source/` files as audit evidence for the bundled fixture backfill.
+
+## Avoid
+
+- Avoid raw hex values outside the copied `:root` token block.
+- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
+- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
+- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.

open-design/design-systems/resend/components.html

@@ -0,0 +1,839 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Resend — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/resend. Every visible
+        value comes from tokens.css; the page itself follows Resend's
+        rules — void-black canvas, near-white text, frost-blue borders
+        instead of gray, one accent at a time (Resend Orange), ABC
+        Favorit with -0.05em display tracking, Inter for body, Commit
+        Mono for code."
+    />
+
+    <style>
+      /* :root paste — sourced verbatim from design-systems/resend/tokens.css. */
+      :root {
+        --bg: #000000;
+        --surface: #000000;
+        --surface-warm: var(--surface);
+
+        --fg: #f0f0f0;
+        --fg-2: #a1a4a5;
+        --muted: #5c5c5c;
+        --meta: #464a4d;
+
+        --border: rgba(214, 235, 253, 0.19);
+        --border-soft: rgba(217, 237, 254, 0.145);
+
+        --accent: #ff801f;
+        --accent-on: #000000;
+        --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+        --accent-active: color-mix(in oklab, var(--accent), black 12%);
+
+        --success: #11ff99;
+        --warn: #ffc53d;
+        --danger: #ff2047;
+
+        --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+        --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+        --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+        --text-xs: 12px;
+        --text-sm: 14px;
+        --text-base: 16px;
+        --text-lg: 20px;
+        --text-xl: 24px;
+        --text-2xl: 36px;
+        --text-3xl: 56px;
+        --text-4xl: 96px;
+
+        --leading-body: 1.5;
+        --leading-tight: 1.0;
+        --tracking-display: -0.05em;
+
+        --space-1: 4px;
+        --space-2: 8px;
+        --space-3: 12px;
+        --space-4: 16px;
+        --space-5: 20px;
+        --space-6: 24px;
+        --space-8: 32px;
+        --space-12: 48px;
+
+        --section-y-desktop: 120px;
+        --section-y-tablet: 80px;
+        --section-y-phone: 48px;
+
+        --radius-sm: 4px;
+        --radius-md: 8px;
+        --radius-lg: 16px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised:
+          0 0 0 1px rgba(176, 199, 217, 0.145),
+          0 1px 3px rgba(0, 0, 0, 0.4),
+          0 1px 2px -1px rgba(0, 0, 0, 0.4);
+
+        --focus-ring: 0 0 0 2px var(--accent);
+
+        --motion-fast: 150ms;
+        --motion-base: 200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max: 1200px;
+        --container-gutter-desktop: 32px;
+        --container-gutter-tablet: 24px;
+        --container-gutter-phone: 16px;
+      }
+
+      /* ─── Reset (minimal) ─────────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        font-weight: 400;
+        /* OpenType ligatures + ABC Favorit / Domaine stylistic sets per
+           DESIGN.md §3: ss01 / ss03 / ss04 / ss11 are part of the
+           typographic identity. Browsers without those faces simply
+           ignore the directives — no fallback ugliness. */
+        font-feature-settings: "liga" 1, "ss01" 1, "ss04" 1, "ss11" 1;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+      }
+
+      /* ─── Layout primitives ─────────────────────────────────── */
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section {
+        padding-block: var(--section-y-desktop);
+      }
+      section + section {
+        /* Single frost hairline between major sections — DESIGN.md §4
+           "Sticky dark header with frost border bottom"; we extend
+           the same idea to inter-section dividers so the page reads
+           as a stack of gallery rooms rather than a continuous wash. */
+        border-top: 1px solid var(--border);
+      }
+      @media (max-width: 1023px) {
+        .container { padding-inline: var(--container-gutter-tablet); }
+        section { padding-block: var(--section-y-tablet); }
+      }
+      @media (max-width: 639px) {
+        .container { padding-inline: var(--container-gutter-phone); }
+        section { padding-block: var(--section-y-phone); }
+      }
+
+      /* ─── Typography ────────────────────────────────────────────
+       * Three-font hierarchy: display uses ABC Favorit via the display
+       * font token with aggressive negative tracking; body uses Inter
+       * via the body font token; code uses Commit Mono via the mono
+       * font token. Hierarchy comes from size + tracking, not weight —
+       * DESIGN.md §3 keeps weight at 400 / 500 / 600 only. */
+      h1, h2, h3, h4 {
+        font-family: var(--font-display);
+        line-height: var(--leading-tight);
+        margin: 0;
+        color: var(--fg);
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        font-weight: 400;
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-3xl);
+        font-weight: 400;
+        /* DESIGN.md §3 Section Heading line-height 1.20 — overrides
+           the shared --leading-tight (1.0) used by the 96px hero. */
+        line-height: 1.20;
+        letter-spacing: var(--tracking-display);
+      }
+      h3 {
+        font-size: var(--text-xl);
+        font-weight: 500;
+        /* DESIGN.md §3 Feature Title (24px Inter weight 500, line-
+           height 1.50). Feature titles use Inter, not the display
+           face — opt out of var(--font-display) inline. */
+        font-family: var(--font-body);
+        line-height: 1.5;
+        letter-spacing: normal;
+      }
+      h4 {
+        font-size: var(--text-lg);
+        font-weight: 400;
+        line-height: 1.3;
+      }
+      p { margin: 0; }
+
+      .lede {
+        font-family: var(--font-display);
+        font-size: var(--text-lg);
+        line-height: 1.3;
+        color: var(--fg-2);
+        letter-spacing: normal;
+      }
+      .body-muted { color: var(--fg-2); }
+      .body-meta  { color: var(--muted); font-size: var(--text-sm); }
+      .body-sm    { font-size: var(--text-sm); }
+
+      /* Eyebrow uses Commit Mono uppercase with positive tracking —
+         the documented nav-link pattern from DESIGN.md §3:
+         "ABC Favorit nav links use +0.35px letter-spacing — the only
+         positive tracking in the system." We extend the same airy
+         tracking to mono eyebrows so they read as a technical label
+         rather than a heading. */
+      .eyebrow {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        line-height: 1;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ───────────────────────────────────────────────
+       * DESIGN.md §4 documents three primary patterns:
+       *   .btn-pill          transparent fill + frost border + pill radius
+       *   .btn-pill-white    white solid fill + black label + pill radius
+       *   .btn-ghost         transparent, no border, sharp 4px radius
+       * The hero CTA pair below pairs a white-pill (max contrast)
+       * with a frost-pill (subtle) — Resend's signature CTA shape. */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 8px 18px;
+        border: none;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        line-height: 1.43;
+        cursor: pointer;
+        text-decoration: none;
+        background: transparent;
+        color: inherit;
+        transition:
+          background-color var(--motion-fast) var(--ease-standard),
+          color var(--motion-fast) var(--ease-standard),
+          box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+      .btn-pill {
+        border-radius: var(--radius-pill);
+        padding: 8px 18px;
+        background: transparent;
+        color: var(--fg);
+        box-shadow: 0 0 0 1px var(--border);
+      }
+      .btn-pill:hover {
+        /* White-glass hover from DESIGN.md §4: rgba(255,255,255,0.28).
+           Expressed via color-mix so it stays token-clean. */
+        background: color-mix(in oklab, var(--fg), transparent 72%);
+        box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg), transparent 60%);
+      }
+      .btn-pill-white {
+        border-radius: var(--radius-pill);
+        padding: 8px 18px;
+        background: #ffffff;
+        color: #000000;
+      }
+      .btn-pill-white:hover {
+        background: color-mix(in oklab, #ffffff, var(--accent) 6%);
+      }
+      .btn-ghost {
+        background: transparent;
+        color: var(--fg-2);
+        padding-inline: var(--space-3);
+      }
+      .btn-ghost:hover {
+        color: var(--fg);
+        background: color-mix(in oklab, var(--fg), transparent 92%);
+      }
+
+      /* ─── Inputs ────────────────────────────────────────────────
+       * DESIGN.md §4: "Radius: 4px. Focus: shadow-based ring."
+       * Inputs use the frost-border via box-shadow so the focus
+       * state can swap the shadow to the accent ring without a
+       * layout shift. */
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+      .field label {
+        font-size: var(--text-sm);
+        font-weight: 500;
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+      .field input {
+        padding: 10px 14px;
+        border: none;
+        border-radius: var(--radius-sm);
+        background: var(--surface);
+        color: var(--fg);
+        font-family: inherit;
+        font-size: var(--text-sm);
+        line-height: 1.43;
+        outline: none;
+        box-shadow: 0 0 0 1px var(--border);
+        transition: box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field input:hover {
+        box-shadow: 0 0 0 1px color-mix(in oklab, var(--border), white 30%);
+      }
+      .field input:focus-visible {
+        box-shadow: var(--focus-ring);
+      }
+      .field-help {
+        font-size: var(--text-xs);
+        color: var(--muted);
+      }
+
+      /* ─── Cards ─────────────────────────────────────────────────
+       * DESIGN.md §4: "Background: transparent or very subtle dark
+       * tint. Border: 1px solid rgba(214, 235, 253, 0.19)." Radius
+       * 16px (--radius-lg) for feature cards. Depth comes from the
+       * frost border alone — no opaque blur shadow, which would
+       * vanish into the void. */
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        padding: var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        transition:
+          border-color var(--motion-base) var(--ease-standard),
+          background-color var(--motion-base) var(--ease-standard);
+      }
+      .card:hover {
+        /* Intensify the frost edge on hover — luminance step, not
+           a shadow drop. Faintly tint the background with the same
+           cool blue at near-zero opacity so the card warms up. */
+        border-color: color-mix(in oklab, var(--border), white 30%);
+        background: color-mix(in oklab, var(--bg), white 2%);
+      }
+
+      /* ─── Badges ────────────────────────────────────────────────
+       * DESIGN.md §4 "Multi-color Accent Badges": background at
+       * 12–42% opacity of the accent, text at full opacity.
+       * `.badge-accent` uses the orange accent; `.badge-success` /
+       * `.badge-danger` reach the semantic tokens. Pill radius
+       * (9999px) is the brand-default badge shape. */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-1);
+        padding: 4px 12px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        line-height: 1.5;
+        font-family: var(--font-body);
+      }
+      .badge-accent {
+        color: var(--accent);
+        background: color-mix(in oklab, var(--accent), transparent 80%);
+      }
+      .badge-muted {
+        color: var(--fg-2);
+        background: transparent;
+        box-shadow: 0 0 0 1px var(--border);
+      }
+      .badge-success {
+        color: var(--success);
+        background: color-mix(in oklab, var(--success), transparent 85%);
+      }
+      .badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      /* ─── Links ─────────────────────────────────────────────────
+       * Resend's link voice from DESIGN.md §2: link highlights are
+       * the pure-white moment. We pair an underline that thickens
+       * on hover with `--fg` (near-white) for body links — leaving
+       * the orange accent for explicit CTA badges only, so the ≤2
+       * accent uses per screen rule holds even in copy-dense
+       * sections. */
+      a {
+        color: var(--fg);
+        text-decoration: underline;
+        text-decoration-color: var(--border);
+        text-underline-offset: 3px;
+        text-decoration-thickness: 1px;
+        transition: text-decoration-color var(--motion-fast) var(--ease-standard);
+      }
+      a:hover {
+        text-decoration-color: var(--fg);
+      }
+      a.link-accent {
+        color: var(--accent);
+        text-decoration-color: color-mix(in oklab, var(--accent), transparent 50%);
+      }
+      a.link-accent:hover { text-decoration-color: var(--accent); }
+      a:focus-visible {
+        outline: none;
+        border-radius: 2px;
+        box-shadow: var(--focus-ring);
+      }
+
+      /* ─── Kbd ───────────────────────────────────────────────────
+       * Commit Mono, frost shadow-border edge. The mono face is
+       * the "developer console voice" connecting marketing copy
+       * to the product surface. */
+      kbd {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        padding: 2px 8px;
+        border-radius: var(--radius-sm);
+        background: var(--surface);
+        color: var(--fg-2);
+        box-shadow: 0 0 0 1px var(--border);
+      }
+
+      /* ─── Distinctive: Code preview panel ───────────────────────
+       * DESIGN.md §4 "Code Preview Panels": dark code blocks using
+       * Commit Mono, frost borders, syntax-highlighted with multi-
+       * color accent tokens. The 24px radius is the brand "Section"
+       * radius (panel tier); reached inline because the schema's
+       * --radius-lg caps at 16px and adding a fifth radius slot
+       * would require a C-extension. */
+      .code-panel {
+        border: 1px solid var(--border);
+        border-radius: 24px;
+        background: var(--surface);
+        overflow: hidden;
+        box-shadow: var(--elev-raised);
+      }
+      .code-panel-head {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--border-soft);
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        color: var(--muted);
+      }
+      .code-panel-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: color-mix(in oklab, var(--fg), transparent 80%);
+      }
+      .code-panel-title { margin-inline-start: auto; }
+      .code-panel pre {
+        margin: 0;
+        padding: var(--space-5) var(--space-6);
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: 1.6;
+        color: var(--fg);
+        overflow-x: auto;
+      }
+      .code-panel .tok-key { color: var(--accent); }
+      .code-panel .tok-str { color: var(--success); }
+      .code-panel .tok-fn  { color: var(--warn); }
+      .code-panel .tok-com { color: var(--meta); font-style: italic; }
+
+      /* ─── Section-specific layout ─────────────────────────────── */
+      .hero {
+        text-align: left;
+        position: relative;
+        overflow: hidden;
+      }
+      /* Atmospheric warm gradient glow behind the hero — DESIGN.md
+         §6 "Decorative Depth: subtle warm gradient glows behind hero
+         content (orange/amber tints)". A radial wash of the accent
+         at very low opacity, blurred heavily — token-clean because
+         it mixes var(--accent) over var(--bg) rather than
+         introducing a raw hex. */
+      .hero::before {
+        content: "";
+        position: absolute;
+        inset: -20% -10% auto -10%;
+        height: 80%;
+        background: radial-gradient(
+          ellipse at 20% 30%,
+          color-mix(in oklab, var(--accent), var(--bg) 70%) 0%,
+          color-mix(in oklab, var(--accent), var(--bg) 90%) 35%,
+          var(--bg) 70%
+        );
+        filter: blur(80px);
+        opacity: 0.5;
+        z-index: 0;
+        pointer-events: none;
+      }
+      .hero > * { position: relative; z-index: 1; }
+      .hero .eyebrow { margin-block-end: var(--space-6); }
+      .hero h1 { max-width: 16ch; }
+      .hero .lede {
+        max-width: 52ch;
+        margin-block-start: var(--space-6);
+      }
+      .hero-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-8);
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .hero-meta {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-3);
+        margin-block-start: var(--space-6);
+        color: var(--muted);
+        font-size: var(--text-sm);
+        flex-wrap: wrap;
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+        margin-block-start: var(--space-12);
+      }
+      @media (max-width: 1023px) {
+        .features-grid { grid-template-columns: 1fr 1fr; }
+      }
+      @media (max-width: 639px) {
+        .features-grid { grid-template-columns: 1fr; }
+      }
+      .feature-card .feature-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: var(--radius-md);
+        background: color-mix(in oklab, var(--accent), transparent 85%);
+        color: var(--accent);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .form-row {
+        display: grid;
+        grid-template-columns: 1.1fr 1fr;
+        gap: var(--space-12);
+        align-items: start;
+        margin-block-start: var(--space-8);
+      }
+      @media (max-width: 1023px) {
+        .form-row { grid-template-columns: 1fr; gap: var(--space-8); }
+      }
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        max-width: 460px;
+        padding: var(--space-6);
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+      }
+      .form-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-2);
+        align-items: center;
+      }
+
+      .row-between {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-3);
+      }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- ════════════════════════════════════════════════════════════
+           HERO — exercises: atmospheric warm gradient (DESIGN.md §6
+           "subtle warm gradient glows behind hero content"), h1 at
+           96px ABC Favorit with -0.05em tracking, .lede in --fg-2,
+           white-pill CTA (max contrast), frost-pill CTA (subtle),
+           kbd shortcut, muted-pill status badge. Single-column
+           layout — Resend heroes float a tight content island in
+           vast dark space.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section class="hero" data-od-id="hero">
+        <p class="eyebrow">Reference fixture · Resend</p>
+        <h1>Email for developers, not marketing teams.</h1>
+        <p class="lede">
+          A token block distilled from Resend's published design
+          system — ABC Favorit with -0.05em display tracking, frost
+          borders instead of gray hairlines, one accent at a time.
+          The fixture you are reading paints from the same
+          <code style="font-family: var(--font-mono); font-size: 0.95em">:root</code>
+          block agents inline into every Resend artifact.
+        </p>
+        <div class="hero-actions">
+          <a href="./tokens.css" class="btn btn-pill-white">
+            Send your first email
+            <svg
+              class="icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M5 12h14M13 6l6 6-6 6" />
+            </svg>
+          </a>
+          <a href="./DESIGN.md" class="btn btn-pill">Read the spec</a>
+          <a href="#code" class="btn btn-ghost">See the SDK</a>
+        </div>
+        <p class="hero-meta">
+          <span class="badge badge-success">
+            <span class="badge-dot" aria-hidden="true"></span>
+            v0.1 · stable
+          </span>
+          <span>Press <kbd>⌘</kbd> <kbd>K</kbd> to search the docs.</span>
+        </p>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FEATURES — exercises: .card with frost border (no opaque
+           shadow on void), h3 at 24px Inter weight 500, .body-muted,
+           .badge-accent at 20% accent tint, .feature-icon glyph
+           tile, .features-grid three-up collapsing to one. Three
+           cards demonstrate the three product surfaces: SDK / API
+           / Domain — each gets exactly one accent tint per card so
+           the ≤2 accent uses per screen rule still reads at scale.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2 style="max-width: 18ch">
+            Built for the way you actually ship.
+          </h2>
+          <p class="body-muted" style="margin-block-start: var(--space-4); max-width: 56ch">
+            Every component below pulls from
+            <code style="font-family: var(--font-mono); font-size: 0.95em">var(--*)</code>
+            — no raw hex outside the documented brand palette, no
+            off-token type. Frost borders carry every container edge;
+            the orange accent appears at most twice per viewport.
+          </p>
+        </div>
+
+        <div class="features-grid">
+          <article class="card feature-card">
+            <span class="feature-icon" aria-hidden="true">
+              <svg
+                class="icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M4 6h16v12H4z" />
+                <path d="M4 6l8 7 8-7" />
+              </svg>
+            </span>
+            <h3>One SDK, every runtime.</h3>
+            <p class="body-muted body-sm">
+              Node, Python, Ruby, Go, PHP, Rust, Java — same surface,
+              same idempotent send. Drop the SDK into an edge worker
+              and the API contract doesn't shift.
+            </p>
+            <a href="./tokens.css" class="link-accent body-sm">Inspect tokens &rarr;</a>
+          </article>
+
+          <article class="card feature-card">
+            <span class="feature-icon" aria-hidden="true">
+              <svg
+                class="icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M3 12h4l3-7 4 14 3-7h4" />
+              </svg>
+            </span>
+            <h3>Frost borders, no shadows.</h3>
+            <p class="body-muted body-sm">
+              <code style="font-family: var(--font-mono); font-size: 0.95em">border: 1px solid rgba(214,235,253,.19)</code>
+              replaces every gray hairline. On pure black, blur
+              shadows vanish — the icy line catches what little
+              light there is and reads as a crystalline edge.
+            </p>
+            <a href="./DESIGN.md" class="link-accent body-sm">Read the rule &rarr;</a>
+          </article>
+
+          <article class="card feature-card">
+            <span class="feature-icon" aria-hidden="true">
+              <svg
+                class="icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M4 7h16M4 12h10M4 17h16" />
+              </svg>
+            </span>
+            <h3>Three fonts, three roles.</h3>
+            <p class="body-muted body-sm">
+              ABC Favorit announces, Inter reads, Commit Mono
+              instructs. Display tracking compresses to
+              <code style="font-family: var(--font-mono); font-size: 0.95em">-0.05em</code>
+              so headlines feel engineered, never decorative.
+            </p>
+            <a href="./tokens.css" class="link-accent body-sm">Inspect typography &rarr;</a>
+          </article>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           CODE PANEL — Resend's distinctive surface: a Commit Mono
+           code block inside a frost-bordered 24px-radius panel.
+           Syntax highlighting reaches the multi-color accent tokens
+           (orange for keys, green for strings, yellow for fn names,
+           dark gray for comments) — this is the ONE place per
+           viewport where multiple accent colors are sanctioned by
+           DESIGN.md §4 "Code Preview Panels".
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="code" id="code">
+        <p class="eyebrow">The SDK in two lines</p>
+        <h2 style="margin-block-start: var(--space-3); max-width: 22ch">
+          <code style="font-family: var(--font-mono); font-size: 0.78em">resend.emails.send</code>, and you're done.
+        </h2>
+        <p class="body-muted" style="margin-block-start: var(--space-4); max-width: 56ch">
+          The code panel is the one surface where Resend's multi-
+          color accent scale is sanctioned: orange for keys, green
+          for strings, yellow for function names, dark gray for
+          comments. Everywhere else, the orange accent holds the
+          chromatic moment alone.
+        </p>
+
+        <div class="code-panel" style="margin-block-start: var(--space-8); max-width: 760px">
+          <div class="code-panel-head">
+            <span class="code-panel-dot" aria-hidden="true"></span>
+            <span class="code-panel-dot" aria-hidden="true"></span>
+            <span class="code-panel-dot" aria-hidden="true"></span>
+            <span class="code-panel-title">send.ts</span>
+          </div>
+          <pre><span class="tok-com">// send your first transactional email</span>
+<span class="tok-key">import</span> { Resend } <span class="tok-key">from</span> <span class="tok-str">"resend"</span>;
+
+<span class="tok-key">const</span> resend = <span class="tok-key">new</span> <span class="tok-fn">Resend</span>(<span class="tok-str">"re_xxxxx"</span>);
+
+<span class="tok-key">await</span> resend.emails.<span class="tok-fn">send</span>({
+  from: <span class="tok-str">"[email protected]"</span>,
+  to: <span class="tok-str">"[email protected]"</span>,
+  subject: <span class="tok-str">"Hello from Resend"</span>,
+  html: <span class="tok-str">"&lt;p&gt;Shipped.&lt;/p&gt;"</span>,
+});</pre>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FORM — exercises: .field with frost shadow-border inputs,
+           focus-visible swap to the 2px accent ring, .btn-pill-white
+           and .btn-pill reuse. Form sits inside its own frost-
+           bordered card so the input edges read as recessed within
+           the form surface.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="form">
+        <p class="eyebrow">Form components</p>
+        <h2 style="margin-block-start: var(--space-3); max-width: 28ch">
+          Inputs inherit the same tokens.
+        </h2>
+
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="body-muted" style="max-width: 48ch">
+              Focus rings, edges, placeholder color — all derive from
+              <code style="font-family: var(--font-mono); font-size: 0.95em">--accent</code>
+              and <code style="font-family: var(--font-mono); font-size: 0.95em">--border</code>.
+              The submit button reuses
+              <code style="font-family: var(--font-mono); font-size: 0.95em">.btn-pill-white</code>
+              unchanged — white fill, black label, 9999px radius.
+            </p>
+            <p class="body-muted body-sm">
+              No new token is introduced for this section. The form
+              card uses the standard frost border + 16px radius;
+              input shadow-borders read as recessed beneath the
+              card's outer frost line.
+            </p>
+            <p class="body-meta">
+              Full reference at <a href="./tokens.css">tokens.css</a> ·
+              spec at <a href="./DESIGN.md">DESIGN.md</a>.
+            </p>
+          </div>
+
+          <form class="form" onsubmit="event.preventDefault();">
+            <div class="row-between">
+              <p class="eyebrow">Join the beta</p>
+              <span class="badge badge-muted">
+                <span class="badge-dot" aria-hidden="true" style="color: var(--success)"></span>
+                Open
+              </span>
+            </div>
+            <div class="field">
+              <label for="email">Work email</label>
+              <input
+                id="email"
+                type="email"
+                placeholder="[email protected]"
+                autocomplete="email"
+                required
+              />
+              <p class="field-help">
+                We'll send the API key and nothing else.
+              </p>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-pill-white">
+                Get the API key
+              </button>
+              <button type="button" class="btn btn-pill">
+                Read the docs
+              </button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

open-design/design-systems/resend/components.manifest.json

@@ -0,0 +1,529 @@
+{
+  "schemaVersion": 1,
+  "brandId": "resend",
+  "source": {
+    "componentsHtml": "components.html",
+    "tokensCss": "tokens.css"
+  },
+  "fixture": {
+    "title": "Resend — reference components",
+    "description": "Reference fixture for design-systems/resend. Every visible value comes from tokens.css; the page itself follows Resend's rules — void-black canvas, near-white text, frost-blue borders instead of gray, one accent at a time (Resend Orange), ABC Favorit with -0.05em display tracking, Inter for body, Commit Mono for code.",
+    "styleBlockCount": 1,
+    "selectorCount": 73,
+    "classCount": 39,
+    "elementCount": 25
+  },
+  "tokens": {
+    "declared": [
+      "--accent",
+      "--accent-active",
+      "--accent-hover",
+      "--accent-on",
+      "--bg",
+      "--border",
+      "--border-soft",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--danger",
+      "--ease-standard",
+      "--elev-flat",
+      "--elev-raised",
+      "--elev-ring",
+      "--fg",
+      "--fg-2",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--meta",
+      "--motion-base",
+      "--motion-fast",
+      "--muted",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-1",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-8",
+      "--success",
+      "--surface",
+      "--surface-warm",
+      "--text-2xl",
+      "--text-3xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-display",
+      "--warn"
+    ],
+    "referenced": [
+      "--accent",
+      "--bg",
+      "--border",
+      "--border-soft",
+      "--container-gutter-desktop",
+      "--container-gutter-phone",
+      "--container-gutter-tablet",
+      "--container-max",
+      "--ease-standard",
+      "--elev-raised",
+      "--fg",
+      "--fg-2",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-mono",
+      "--leading-body",
+      "--leading-tight",
+      "--meta",
+      "--motion-base",
+      "--motion-fast",
+      "--muted",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-y-desktop",
+      "--section-y-phone",
+      "--section-y-tablet",
+      "--space-1",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-8",
+      "--success",
+      "--surface",
+      "--text-3xl",
+      "--text-4xl",
+      "--text-base",
+      "--text-lg",
+      "--text-sm",
+      "--text-xl",
+      "--text-xs",
+      "--tracking-display",
+      "--warn"
+    ],
+    "unusedDeclared": [
+      "--accent-active",
+      "--accent-hover",
+      "--accent-on",
+      "--danger",
+      "--elev-flat",
+      "--elev-ring",
+      "--surface-warm",
+      "--text-2xl"
+    ],
+    "undeclaredReferenced": []
+  },
+  "selectors": [
+    ".badge",
+    ".badge-accent",
+    ".badge-dot",
+    ".badge-muted",
+    ".badge-success",
+    ".body-meta",
+    ".body-muted",
+    ".body-sm",
+    ".btn",
+    ".btn-ghost",
+    ".btn-ghost:hover",
+    ".btn-pill",
+    ".btn-pill-white",
+    ".btn-pill-white:hover",
+    ".btn-pill:hover",
+    ".btn:focus-visible",
+    ".card",
+    ".card:hover",
+    ".code-panel",
+    ".code-panel .tok-com",
+    ".code-panel .tok-fn",
+    ".code-panel .tok-key",
+    ".code-panel .tok-str",
+    ".code-panel pre",
+    ".code-panel-dot",
+    ".code-panel-head",
+    ".code-panel-title",
+    ".container",
+    ".eyebrow",
+    ".feature-card .feature-icon",
+    ".features-grid",
+    ".field",
+    ".field input",
+    ".field input::placeholder",
+    ".field input:focus-visible",
+    ".field input:hover",
+    ".field label",
+    ".field-help",
+    ".form",
+    ".form-actions",
+    ".form-row",
+    ".hero",
+    ".hero .eyebrow",
+    ".hero .lede",
+    ".hero > *",
+    ".hero h1",
+    ".hero-actions",
+    ".hero-meta",
+    ".hero::before",
+    ".icon",
+    ".lede",
+    ".row-between",
+    ".stack-3 > * + *",
+    ".stack-4 > * + *",
+    ".stack-6 > * + *",
+    "*",
+    "*::after",
+    "*::before",
+    "a",
+    "a:focus-visible",
+    "a:hover",
+    "a.link-accent",
+    "a.link-accent:hover",
+    "body",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "html",
+    "kbd",
+    "p",
+    "section",
+    "section + section"
+  ],
+  "classes": [
+    "badge",
+    "badge-dot",
+    "badge-muted",
+    "badge-success",
+    "body-meta",
+    "body-muted",
+    "body-sm",
+    "btn",
+    "btn-ghost",
+    "btn-pill",
+    "btn-pill-white",
+    "card",
+    "code-panel",
+    "code-panel-dot",
+    "code-panel-head",
+    "code-panel-title",
+    "container",
+    "eyebrow",
+    "feature-card",
+    "feature-icon",
+    "features-grid",
+    "field",
+    "field-help",
+    "form",
+    "form-actions",
+    "form-row",
+    "hero",
+    "hero-actions",
+    "hero-meta",
+    "icon",
+    "lede",
+    "link-accent",
+    "row-between",
+    "stack-3",
+    "stack-4",
+    "tok-com",
+    "tok-fn",
+    "tok-key",
+    "tok-str"
+  ],
+  "elements": [
+    "a",
+    "article",
+    "body",
+    "button",
+    "code",
+    "div",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "head",
+    "html",
+    "input",
+    "kbd",
+    "label",
+    "main",
+    "meta",
+    "p",
+    "path",
+    "pre",
+    "section",
+    "span",
+    "style",
+    "svg",
+    "title"
+  ],
+  "groups": [
+    {
+      "id": "buttons",
+      "label": "Buttons and calls to action",
+      "present": true,
+      "selectors": [
+        ".btn",
+        ".btn-ghost",
+        ".btn-ghost:hover",
+        ".btn-pill",
+        ".btn-pill-white",
+        ".btn-pill-white:hover",
+        ".btn-pill:hover",
+        ".btn:focus-visible"
+      ],
+      "classes": [
+        "btn",
+        "btn-ghost",
+        "btn-pill",
+        "btn-pill-white"
+      ],
+      "elements": [
+        "button"
+      ],
+      "tokenReferences": [
+        "--border",
+        "--ease-standard",
+        "--fg",
+        "--fg-2",
+        "--font-body",
+        "--motion-fast",
+        "--radius-pill",
+        "--radius-sm",
+        "--space-2",
+        "--space-3",
+        "--text-sm"
+      ]
+    },
+    {
+      "id": "inputs",
+      "label": "Form fields and controls",
+      "present": true,
+      "selectors": [
+        ".field",
+        ".field input",
+        ".field input::placeholder",
+        ".field input:focus-visible",
+        ".field input:hover",
+        ".field label",
+        ".field-help"
+      ],
+      "classes": [
+        "field",
+        "field-help",
+        "form",
+        "form-actions",
+        "form-row"
+      ],
+      "elements": [
+        "form",
+        "input",
+        "label"
+      ],
+      "tokenReferences": [
+        "--border",
+        "--ease-standard",
+        "--fg",
+        "--motion-fast",
+        "--muted",
+        "--radius-sm",
+        "--space-2",
+        "--surface",
+        "--text-sm",
+        "--text-xs"
+      ]
+    },
+    {
+      "id": "cards",
+      "label": "Cards and panels",
+      "present": true,
+      "selectors": [
+        ".card",
+        ".card:hover"
+      ],
+      "classes": [
+        "card"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--bg",
+        "--border"
+      ]
+    },
+    {
+      "id": "badges",
+      "label": "Badges, chips, and status labels",
+      "present": true,
+      "selectors": [
+        ".badge",
+        ".badge-accent",
+        ".badge-dot",
+        ".badge-muted",
+        ".badge-success"
+      ],
+      "classes": [
+        "badge",
+        "badge-dot",
+        "badge-muted",
+        "badge-success"
+      ],
+      "elements": [],
+      "tokenReferences": [
+        "--accent",
+        "--success"
+      ]
+    },
+    {
+      "id": "links",
+      "label": "Links and inline actions",
+      "present": true,
+      "selectors": [
+        "a",
+        "a:focus-visible",
+        "a:hover",
+        "a.link-accent",
+        "a.link-accent:hover"
+      ],
+      "classes": [
+        "link-accent"
+      ],
+      "elements": [
+        "a"
+      ],
+      "tokenReferences": [
+        "--accent",
+        "--border",
+        "--ease-standard",
+        "--fg",
+        "--focus-ring",
+        "--motion-fast"
+      ]
+    },
+    {
+      "id": "keyboard",
+      "label": "Keyboard hints",
+      "present": true,
+      "selectors": [
+        "kbd"
+      ],
+      "classes": [],
+      "elements": [
+        "kbd"
+      ],
+      "tokenReferences": []
+    },
+    {
+      "id": "icons",
+      "label": "Icon slots",
+      "present": true,
+      "selectors": [
+        ".icon"
+      ],
+      "classes": [
+        "icon"
+      ],
+      "elements": [
+        "svg"
+      ],
+      "tokenReferences": []
+    },
+    {
+      "id": "typography",
+      "label": "Typography scale and text utilities",
+      "present": true,
+      "selectors": [
+        ".body-muted",
+        ".body-sm",
+        ".eyebrow",
+        ".hero .eyebrow",
+        ".hero h1",
+        "h1",
+        "h2",
+        "h3",
+        "h4"
+      ],
+      "classes": [
+        "body-muted",
+        "body-sm",
+        "eyebrow"
+      ],
+      "elements": [
+        "h1",
+        "h2",
+        "h3",
+        "p"
+      ],
+      "tokenReferences": [
+        "--fg",
+        "--font-display",
+        "--font-mono",
+        "--leading-tight",
+        "--muted",
+        "--space-6",
+        "--text-3xl",
+        "--text-lg",
+        "--text-xs",
+        "--tracking-display"
+      ]
+    },
+    {
+      "id": "layout",
+      "label": "Layout primitives",
+      "present": true,
+      "selectors": [
+        ".container",
+        ".row-between",
+        ".stack-3 > * + *",
+        ".stack-4 > * + *",
+        ".stack-6 > * + *",
+        "section",
+        "section + section"
+      ],
+      "classes": [
+        "container",
+        "features-grid",
+        "row-between",
+        "stack-3",
+        "stack-4"
+      ],
+      "elements": [
+        "main",
+        "section"
+      ],
+      "tokenReferences": [
+        "--border",
+        "--container-gutter-desktop",
+        "--container-gutter-phone",
+        "--container-gutter-tablet",
+        "--container-max",
+        "--space-3",
+        "--space-4"
+      ]
+    }
+  ],
+  "literals": {
+    "colorExpressions": 16,
+    "pixelValues": 42,
+    "hardcodedFontFamilies": 12
+  }
+}

open-design/design-systems/resend/design-tokens.json

@@ -0,0 +1,701 @@
+{
+  "schemaVersion": 1,
+  "format": "od-design-tokens/v1",
+  "contract": "TOKEN_SCHEMA",
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "source": {
+    "tokensCss": "tokens.css",
+    "tokenContractReport": "source/token-contract.report.json"
+  },
+  "summary": {
+    "totalTokens": 56,
+    "declaredTokens": 56,
+    "sourceBackedTokens": 56,
+    "sourceBackedA1": 26,
+    "fallbackTokens": 26,
+    "aliasTokens": 1,
+    "layerCounts": {
+      "A1-identity": 8,
+      "B-slot": 4,
+      "A2": 26,
+      "A1-structure": 18
+    },
+    "score": 100,
+    "grade": "excellent",
+    "recommendRebuild": false
+  },
+  "tokens": [
+    {
+      "name": "--bg",
+      "value": "#000000",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:173"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "value": "#000000",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:174"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "var(--surface)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:175"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "value": "#f0f0f0",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:186"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "value": "#a1a4a5",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:187"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "value": "#5c5c5c",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:188"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "value": "#464a4d",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:189"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "value": "rgba(214, 235, 253, 0.19)",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:201"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "value": "rgba(217, 237, 254, 0.145)",
+      "type": "color",
+      "layer": "B-slot",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:202"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "value": "#ff801f",
+      "type": "color",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:218"
+      ],
+      "sourceName": "--accent"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#000000",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:219"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "color-mix(in oklab, var(--accent), white 10%)",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:220"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "value": "color-mix(in oklab, var(--accent), black 12%)",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:221"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "value": "#11ff99",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:228"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "value": "#ffc53d",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:229"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "value": "#ff2047",
+      "type": "color",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:230"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"ABC Favorit\", \"Inter\", -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+      "type": "fontFamily",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:241"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"Inter\", -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+      "type": "fontFamily",
+      "layer": "A1-identity",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:242"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "value": "\"Commit Mono\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace",
+      "type": "fontFamily",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:243"
+      ],
+      "sourceName": "--font-mono"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:251"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "value": "14px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:252"
+      ],
+      "sourceName": "--text-sm"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:253"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "value": "20px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:254"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:255"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "36px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:256"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "56px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:257"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "96px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:258"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.5",
+      "type": "number",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:267"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.0",
+      "type": "number",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:268"
+      ],
+      "sourceName": "--leading-tight"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "-0.05em",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:269"
+      ],
+      "sourceName": "--tracking-display"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:277"
+      ],
+      "sourceName": "--space-1"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:278"
+      ],
+      "sourceName": "--space-2"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:279"
+      ],
+      "sourceName": "--space-3"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:280"
+      ],
+      "sourceName": "--space-4"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:281"
+      ],
+      "sourceName": "--space-5"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:282"
+      ],
+      "sourceName": "--space-6"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:283"
+      ],
+      "sourceName": "--space-8"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:284"
+      ],
+      "sourceName": "--space-12"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "120px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:290"
+      ],
+      "sourceName": "--section-y-desktop"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "80px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:291"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "48px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:292"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "4px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:301"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "value": "8px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:302"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:303"
+      ],
+      "sourceName": "--radius-lg"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "type": "dimension",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:304"
+      ],
+      "sourceName": "--radius-pill"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:320"
+      ],
+      "sourceName": "--elev-flat"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:321"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:322"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 2px var(--accent)",
+      "type": "shadow",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:334"
+      ],
+      "sourceName": "--focus-ring"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:340"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "value": "200ms",
+      "type": "duration",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:341"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "type": "cubicBezier",
+      "layer": "A2",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:342"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "value": "1200px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:349"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "32px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:350"
+      ],
+      "sourceName": "--container-gutter-desktop"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "24px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:351"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "16px",
+      "type": "dimension",
+      "layer": "A1-structure",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:352"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}

open-design/design-systems/resend/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "resend",
+  "name": "Resend",
+  "category": "Productivity & SaaS",
+  "description": "Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

open-design/design-systems/resend/preview/colors.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Resend colors</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
+      .swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
+      .color { height: 88px; background: var(--value); }
+      .meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
+      strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Color roles</h1>
+
+      <section class="grid">
+        <article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
+        <article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
+        <article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
+        <article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
+        <article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
+        <article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
+        <article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
+        <article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
+        <article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
+      </section>
+
+    </main>
+  </body>
+</html>

open-design/design-systems/resend/preview/spacing.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Resend spacing</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
+      .row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
+      .bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
+      .radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
+      .radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Spacing and radius</h1>
+
+      <section class="stack">
+        <div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
+        <div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
+        <div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
+        <div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
+        <div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
+      </section>
+      <section class="radii">
+        <article style="border-radius: var(--radius-sm)">--radius-sm</article>
+        <article style="border-radius: var(--radius-md)">--radius-md</article>
+        <article style="border-radius: var(--radius-lg)">--radius-lg</article>
+        <article style="border-radius: var(--radius-pill)">--radius-pill</article>
+      </section>
+
+    </main>
+  </body>
+</html>

open-design/design-systems/resend/preview/typography.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Resend typography</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <style>
+      body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
+      main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
+      h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+
+      .type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
+      .eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
+      h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+      .lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
+      .body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
+
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Typography</h1>
+
+      <section class="type-stack">
+        <p class="eyebrow">Productivity & SaaS</p>
+        <h2>Display sample for Resend</h2>
+        <p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
+        <p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
+      </section>
+
+    </main>
+  </body>
+</html>

open-design/design-systems/resend/source/evidence.md

@@ -0,0 +1,17 @@
+# Resend Source Evidence
+
+## Source Scope
+
+This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
+It does not claim a fresh crawl of the original upstream brand repository or website.
+
+## Included Fixture Files
+
+- design-systems/resend/DESIGN.md
+- design-systems/resend/tokens.css
+- design-systems/resend/components.html
+
+## Token Contract
+
+`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
+`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.

open-design/design-systems/resend/source/token-contract.report.json

@@ -0,0 +1,641 @@
+{
+  "schemaVersion": 1,
+  "contract": "TOKEN_SCHEMA",
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "sourceScope": "open-design-bundled-fixture",
+  "summary": {
+    "totalTokens": 56,
+    "declaredTokens": 56,
+    "sourceBackedTokens": 56,
+    "sourceBackedA1": 26,
+    "fallbackTokens": 26,
+    "aliasTokens": 1,
+    "layerCounts": {
+      "A1-identity": 8,
+      "B-slot": 4,
+      "A2": 26,
+      "A1-structure": 18
+    },
+    "score": 100,
+    "grade": "excellent",
+    "recommendRebuild": false
+  },
+  "tokens": [
+    {
+      "name": "--bg",
+      "layer": "A1-identity",
+      "value": "#000000",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:173"
+      ],
+      "sourceName": "--bg"
+    },
+    {
+      "name": "--surface",
+      "layer": "A1-identity",
+      "value": "#000000",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:174"
+      ],
+      "sourceName": "--surface"
+    },
+    {
+      "name": "--surface-warm",
+      "layer": "B-slot",
+      "value": "var(--surface)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:175"
+      ],
+      "sourceName": "--surface-warm"
+    },
+    {
+      "name": "--fg",
+      "layer": "A1-identity",
+      "value": "#f0f0f0",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:186"
+      ],
+      "sourceName": "--fg"
+    },
+    {
+      "name": "--fg-2",
+      "layer": "B-slot",
+      "value": "#a1a4a5",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:187"
+      ],
+      "sourceName": "--fg-2"
+    },
+    {
+      "name": "--muted",
+      "layer": "A1-identity",
+      "value": "#5c5c5c",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:188"
+      ],
+      "sourceName": "--muted"
+    },
+    {
+      "name": "--meta",
+      "layer": "B-slot",
+      "value": "#464a4d",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:189"
+      ],
+      "sourceName": "--meta"
+    },
+    {
+      "name": "--border",
+      "layer": "A1-identity",
+      "value": "rgba(214, 235, 253, 0.19)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:201"
+      ],
+      "sourceName": "--border"
+    },
+    {
+      "name": "--border-soft",
+      "layer": "B-slot",
+      "value": "rgba(217, 237, 254, 0.145)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:202"
+      ],
+      "sourceName": "--border-soft"
+    },
+    {
+      "name": "--accent",
+      "layer": "A1-identity",
+      "value": "#ff801f",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:218"
+      ],
+      "sourceName": "--accent"
+    },
+    {
+      "name": "--accent-on",
+      "layer": "A2",
+      "value": "#000000",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:219"
+      ],
+      "sourceName": "--accent-on"
+    },
+    {
+      "name": "--accent-hover",
+      "layer": "A2",
+      "value": "color-mix(in oklab, var(--accent), white 10%)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:220"
+      ],
+      "sourceName": "--accent-hover"
+    },
+    {
+      "name": "--accent-active",
+      "layer": "A2",
+      "value": "color-mix(in oklab, var(--accent), black 12%)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:221"
+      ],
+      "sourceName": "--accent-active"
+    },
+    {
+      "name": "--success",
+      "layer": "A2",
+      "value": "#11ff99",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:228"
+      ],
+      "sourceName": "--success"
+    },
+    {
+      "name": "--warn",
+      "layer": "A2",
+      "value": "#ffc53d",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:229"
+      ],
+      "sourceName": "--warn"
+    },
+    {
+      "name": "--danger",
+      "layer": "A2",
+      "value": "#ff2047",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:230"
+      ],
+      "sourceName": "--danger"
+    },
+    {
+      "name": "--font-display",
+      "layer": "A1-identity",
+      "value": "\"ABC Favorit\", \"Inter\", -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:241"
+      ],
+      "sourceName": "--font-display"
+    },
+    {
+      "name": "--font-body",
+      "layer": "A1-identity",
+      "value": "\"Inter\", -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:242"
+      ],
+      "sourceName": "--font-body"
+    },
+    {
+      "name": "--font-mono",
+      "layer": "A2",
+      "value": "\"Commit Mono\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:243"
+      ],
+      "sourceName": "--font-mono"
+    },
+    {
+      "name": "--text-xs",
+      "layer": "A1-structure",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:251"
+      ],
+      "sourceName": "--text-xs"
+    },
+    {
+      "name": "--text-sm",
+      "layer": "A1-structure",
+      "value": "14px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:252"
+      ],
+      "sourceName": "--text-sm"
+    },
+    {
+      "name": "--text-base",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:253"
+      ],
+      "sourceName": "--text-base"
+    },
+    {
+      "name": "--text-lg",
+      "layer": "A1-structure",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:254"
+      ],
+      "sourceName": "--text-lg"
+    },
+    {
+      "name": "--text-xl",
+      "layer": "A1-structure",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:255"
+      ],
+      "sourceName": "--text-xl"
+    },
+    {
+      "name": "--text-2xl",
+      "layer": "A1-structure",
+      "value": "36px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:256"
+      ],
+      "sourceName": "--text-2xl"
+    },
+    {
+      "name": "--text-3xl",
+      "layer": "A1-structure",
+      "value": "56px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:257"
+      ],
+      "sourceName": "--text-3xl"
+    },
+    {
+      "name": "--text-4xl",
+      "layer": "A1-structure",
+      "value": "96px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:258"
+      ],
+      "sourceName": "--text-4xl"
+    },
+    {
+      "name": "--leading-body",
+      "layer": "A1-structure",
+      "value": "1.5",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:267"
+      ],
+      "sourceName": "--leading-body"
+    },
+    {
+      "name": "--leading-tight",
+      "layer": "A1-structure",
+      "value": "1.0",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:268"
+      ],
+      "sourceName": "--leading-tight"
+    },
+    {
+      "name": "--tracking-display",
+      "layer": "A1-structure",
+      "value": "-0.05em",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:269"
+      ],
+      "sourceName": "--tracking-display"
+    },
+    {
+      "name": "--space-1",
+      "layer": "A2",
+      "value": "4px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:277"
+      ],
+      "sourceName": "--space-1"
+    },
+    {
+      "name": "--space-2",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:278"
+      ],
+      "sourceName": "--space-2"
+    },
+    {
+      "name": "--space-3",
+      "layer": "A2",
+      "value": "12px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:279"
+      ],
+      "sourceName": "--space-3"
+    },
+    {
+      "name": "--space-4",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:280"
+      ],
+      "sourceName": "--space-4"
+    },
+    {
+      "name": "--space-5",
+      "layer": "A2",
+      "value": "20px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:281"
+      ],
+      "sourceName": "--space-5"
+    },
+    {
+      "name": "--space-6",
+      "layer": "A2",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:282"
+      ],
+      "sourceName": "--space-6"
+    },
+    {
+      "name": "--space-8",
+      "layer": "A2",
+      "value": "32px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:283"
+      ],
+      "sourceName": "--space-8"
+    },
+    {
+      "name": "--space-12",
+      "layer": "A2",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:284"
+      ],
+      "sourceName": "--space-12"
+    },
+    {
+      "name": "--section-y-desktop",
+      "layer": "A1-structure",
+      "value": "120px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:290"
+      ],
+      "sourceName": "--section-y-desktop"
+    },
+    {
+      "name": "--section-y-tablet",
+      "layer": "A1-structure",
+      "value": "80px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:291"
+      ],
+      "sourceName": "--section-y-tablet"
+    },
+    {
+      "name": "--section-y-phone",
+      "layer": "A1-structure",
+      "value": "48px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:292"
+      ],
+      "sourceName": "--section-y-phone"
+    },
+    {
+      "name": "--radius-sm",
+      "layer": "A2",
+      "value": "4px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:301"
+      ],
+      "sourceName": "--radius-sm"
+    },
+    {
+      "name": "--radius-md",
+      "layer": "A2",
+      "value": "8px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:302"
+      ],
+      "sourceName": "--radius-md"
+    },
+    {
+      "name": "--radius-lg",
+      "layer": "A2",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:303"
+      ],
+      "sourceName": "--radius-lg"
+    },
+    {
+      "name": "--radius-pill",
+      "layer": "A2",
+      "value": "9999px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:304"
+      ],
+      "sourceName": "--radius-pill"
+    },
+    {
+      "name": "--elev-flat",
+      "layer": "A2",
+      "value": "none",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:320"
+      ],
+      "sourceName": "--elev-flat"
+    },
+    {
+      "name": "--elev-ring",
+      "layer": "A2",
+      "value": "0 0 0 1px var(--border)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:321"
+      ],
+      "sourceName": "--elev-ring"
+    },
+    {
+      "name": "--elev-raised",
+      "layer": "A2",
+      "value": "0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:322"
+      ],
+      "sourceName": "--elev-raised"
+    },
+    {
+      "name": "--focus-ring",
+      "layer": "A2",
+      "value": "0 0 0 2px var(--accent)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:334"
+      ],
+      "sourceName": "--focus-ring"
+    },
+    {
+      "name": "--motion-fast",
+      "layer": "A2",
+      "value": "150ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:340"
+      ],
+      "sourceName": "--motion-fast"
+    },
+    {
+      "name": "--motion-base",
+      "layer": "A2",
+      "value": "200ms",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:341"
+      ],
+      "sourceName": "--motion-base"
+    },
+    {
+      "name": "--ease-standard",
+      "layer": "A2",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:342"
+      ],
+      "sourceName": "--ease-standard"
+    },
+    {
+      "name": "--container-max",
+      "layer": "A1-structure",
+      "value": "1200px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:349"
+      ],
+      "sourceName": "--container-max"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "layer": "A1-structure",
+      "value": "32px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:350"
+      ],
+      "sourceName": "--container-gutter-desktop"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "layer": "A1-structure",
+      "value": "24px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:351"
+      ],
+      "sourceName": "--container-gutter-tablet"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "layer": "A1-structure",
+      "value": "16px",
+      "confidence": "high",
+      "reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
+      "sources": [
+        "tokens.css:352"
+      ],
+      "sourceName": "--container-gutter-phone"
+    }
+  ]
+}

open-design/design-systems/resend/source/tokens.source.json

@@ -0,0 +1,349 @@
+{
+  "schemaVersion": 1,
+  "sourceScope": "open-design-bundled-fixture",
+  "brandId": "resend",
+  "files": [
+    "DESIGN.md",
+    "tokens.css",
+    "components.html"
+  ],
+  "generatedAt": "2026-06-06T00:00:00.000Z",
+  "tokens": [
+    {
+      "name": "--bg",
+      "value": "#000000",
+      "layer": "A1-identity",
+      "source": "tokens.css:173"
+    },
+    {
+      "name": "--surface",
+      "value": "#000000",
+      "layer": "A1-identity",
+      "source": "tokens.css:174"
+    },
+    {
+      "name": "--surface-warm",
+      "value": "var(--surface)",
+      "layer": "B-slot",
+      "source": "tokens.css:175"
+    },
+    {
+      "name": "--fg",
+      "value": "#f0f0f0",
+      "layer": "A1-identity",
+      "source": "tokens.css:186"
+    },
+    {
+      "name": "--fg-2",
+      "value": "#a1a4a5",
+      "layer": "B-slot",
+      "source": "tokens.css:187"
+    },
+    {
+      "name": "--muted",
+      "value": "#5c5c5c",
+      "layer": "A1-identity",
+      "source": "tokens.css:188"
+    },
+    {
+      "name": "--meta",
+      "value": "#464a4d",
+      "layer": "B-slot",
+      "source": "tokens.css:189"
+    },
+    {
+      "name": "--border",
+      "value": "rgba(214, 235, 253, 0.19)",
+      "layer": "A1-identity",
+      "source": "tokens.css:201"
+    },
+    {
+      "name": "--border-soft",
+      "value": "rgba(217, 237, 254, 0.145)",
+      "layer": "B-slot",
+      "source": "tokens.css:202"
+    },
+    {
+      "name": "--accent",
+      "value": "#ff801f",
+      "layer": "A1-identity",
+      "source": "tokens.css:218"
+    },
+    {
+      "name": "--accent-on",
+      "value": "#000000",
+      "layer": "A2",
+      "source": "tokens.css:219"
+    },
+    {
+      "name": "--accent-hover",
+      "value": "color-mix(in oklab, var(--accent), white 10%)",
+      "layer": "A2",
+      "source": "tokens.css:220"
+    },
+    {
+      "name": "--accent-active",
+      "value": "color-mix(in oklab, var(--accent), black 12%)",
+      "layer": "A2",
+      "source": "tokens.css:221"
+    },
+    {
+      "name": "--success",
+      "value": "#11ff99",
+      "layer": "A2",
+      "source": "tokens.css:228"
+    },
+    {
+      "name": "--warn",
+      "value": "#ffc53d",
+      "layer": "A2",
+      "source": "tokens.css:229"
+    },
+    {
+      "name": "--danger",
+      "value": "#ff2047",
+      "layer": "A2",
+      "source": "tokens.css:230"
+    },
+    {
+      "name": "--font-display",
+      "value": "\"ABC Favorit\", \"Inter\", -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:241"
+    },
+    {
+      "name": "--font-body",
+      "value": "\"Inter\", -apple-system, system-ui, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+      "layer": "A1-identity",
+      "source": "tokens.css:242"
+    },
+    {
+      "name": "--font-mono",
+      "value": "\"Commit Mono\", \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, Monaco, Consolas, monospace",
+      "layer": "A2",
+      "source": "tokens.css:243"
+    },
+    {
+      "name": "--text-xs",
+      "value": "12px",
+      "layer": "A1-structure",
+      "source": "tokens.css:251"
+    },
+    {
+      "name": "--text-sm",
+      "value": "14px",
+      "layer": "A1-structure",
+      "source": "tokens.css:252"
+    },
+    {
+      "name": "--text-base",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:253"
+    },
+    {
+      "name": "--text-lg",
+      "value": "20px",
+      "layer": "A1-structure",
+      "source": "tokens.css:254"
+    },
+    {
+      "name": "--text-xl",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:255"
+    },
+    {
+      "name": "--text-2xl",
+      "value": "36px",
+      "layer": "A1-structure",
+      "source": "tokens.css:256"
+    },
+    {
+      "name": "--text-3xl",
+      "value": "56px",
+      "layer": "A1-structure",
+      "source": "tokens.css:257"
+    },
+    {
+      "name": "--text-4xl",
+      "value": "96px",
+      "layer": "A1-structure",
+      "source": "tokens.css:258"
+    },
+    {
+      "name": "--leading-body",
+      "value": "1.5",
+      "layer": "A1-structure",
+      "source": "tokens.css:267"
+    },
+    {
+      "name": "--leading-tight",
+      "value": "1.0",
+      "layer": "A1-structure",
+      "source": "tokens.css:268"
+    },
+    {
+      "name": "--tracking-display",
+      "value": "-0.05em",
+      "layer": "A1-structure",
+      "source": "tokens.css:269"
+    },
+    {
+      "name": "--space-1",
+      "value": "4px",
+      "layer": "A2",
+      "source": "tokens.css:277"
+    },
+    {
+      "name": "--space-2",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:278"
+    },
+    {
+      "name": "--space-3",
+      "value": "12px",
+      "layer": "A2",
+      "source": "tokens.css:279"
+    },
+    {
+      "name": "--space-4",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:280"
+    },
+    {
+      "name": "--space-5",
+      "value": "20px",
+      "layer": "A2",
+      "source": "tokens.css:281"
+    },
+    {
+      "name": "--space-6",
+      "value": "24px",
+      "layer": "A2",
+      "source": "tokens.css:282"
+    },
+    {
+      "name": "--space-8",
+      "value": "32px",
+      "layer": "A2",
+      "source": "tokens.css:283"
+    },
+    {
+      "name": "--space-12",
+      "value": "48px",
+      "layer": "A2",
+      "source": "tokens.css:284"
+    },
+    {
+      "name": "--section-y-desktop",
+      "value": "120px",
+      "layer": "A1-structure",
+      "source": "tokens.css:290"
+    },
+    {
+      "name": "--section-y-tablet",
+      "value": "80px",
+      "layer": "A1-structure",
+      "source": "tokens.css:291"
+    },
+    {
+      "name": "--section-y-phone",
+      "value": "48px",
+      "layer": "A1-structure",
+      "source": "tokens.css:292"
+    },
+    {
+      "name": "--radius-sm",
+      "value": "4px",
+      "layer": "A2",
+      "source": "tokens.css:301"
+    },
+    {
+      "name": "--radius-md",
+      "value": "8px",
+      "layer": "A2",
+      "source": "tokens.css:302"
+    },
+    {
+      "name": "--radius-lg",
+      "value": "16px",
+      "layer": "A2",
+      "source": "tokens.css:303"
+    },
+    {
+      "name": "--radius-pill",
+      "value": "9999px",
+      "layer": "A2",
+      "source": "tokens.css:304"
+    },
+    {
+      "name": "--elev-flat",
+      "value": "none",
+      "layer": "A2",
+      "source": "tokens.css:320"
+    },
+    {
+      "name": "--elev-ring",
+      "value": "0 0 0 1px var(--border)",
+      "layer": "A2",
+      "source": "tokens.css:321"
+    },
+    {
+      "name": "--elev-raised",
+      "value": "0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4)",
+      "layer": "A2",
+      "source": "tokens.css:322"
+    },
+    {
+      "name": "--focus-ring",
+      "value": "0 0 0 2px var(--accent)",
+      "layer": "A2",
+      "source": "tokens.css:334"
+    },
+    {
+      "name": "--motion-fast",
+      "value": "150ms",
+      "layer": "A2",
+      "source": "tokens.css:340"
+    },
+    {
+      "name": "--motion-base",
+      "value": "200ms",
+      "layer": "A2",
+      "source": "tokens.css:341"
+    },
+    {
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.2, 0, 0, 1)",
+      "layer": "A2",
+      "source": "tokens.css:342"
+    },
+    {
+      "name": "--container-max",
+      "value": "1200px",
+      "layer": "A1-structure",
+      "source": "tokens.css:349"
+    },
+    {
+      "name": "--container-gutter-desktop",
+      "value": "32px",
+      "layer": "A1-structure",
+      "source": "tokens.css:350"
+    },
+    {
+      "name": "--container-gutter-tablet",
+      "value": "24px",
+      "layer": "A1-structure",
+      "source": "tokens.css:351"
+    },
+    {
+      "name": "--container-gutter-phone",
+      "value": "16px",
+      "layer": "A1-structure",
+      "source": "tokens.css:352"
+    }
+  ]
+}

open-design/design-systems/resend/system/artifacts/deck.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - Pitch deck</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Deck module</p>
+        <h1>Resend Executive deck</h1>
+        <p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Pitch deck</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Resend" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/artifacts/email.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - Email</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Email module</p>
+        <h1>Resend Email module</h1>
+        <p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Email</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Resend" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/artifacts/form.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - Form page</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Form module</p>
+        <h1>Resend Capture form</h1>
+        <p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Form page</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Resend" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/artifacts/landing.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - Landing page</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Landing module</p>
+        <h1>Resend Launch narrative</h1>
+        <p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Landing page</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Resend" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/artifacts/newsletter.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - Newsletter</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Newsletter module</p>
+        <h1>Resend Editorial issue</h1>
+        <p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Newsletter</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Resend" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/artifacts/poster.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - Poster</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Poster module</p>
+        <h1>Resend Campaign poster</h1>
+        <p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Continue</a>
+          <a class="button secondary" href="#">View details</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Preview</p>
+        <h3>Poster</h3>
+        <p class="lead" style="font-size:16px">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="card-grid" style="grid-template-columns:1fr 1fr">
+          <div class="field"><label>Primary input<input value="Resend" /></label></div>
+          <div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/index.html

@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - system assets</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <p class="eyebrow">Productivity &amp; SaaS</p>
+    <h1>Resend system assets</h1>
+    <p class="lead">Generated preview modules for bundled official presets.</p>
+    <section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
+<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
+<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
+<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
+<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
+<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
+<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
+<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/kit.dark.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - dark component kit</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #0f1115;
+  --od-surface: #171a21;
+  --od-text: #f8fafc;
+  --od-muted: #a7adba;
+  --od-border: #2a2f3a;
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Productivity &amp; SaaS system</p>
+        <h1>Resend component kit</h1>
+        <p class="lead">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Primary</a>
+          <a class="button secondary" href="#">Default</a>
+          <a class="button secondary" href="#">Dashed</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Reference module</p>
+        <h3>Token-driven surface</h3>
+        <div class="metric-grid">
+          <div class="metric"><strong>12</strong><span>Components</span></div>
+          <div class="metric"><strong>4</strong><span>States</span></div>
+          <div class="metric"><strong>1</strong><span>Token contract</span></div>
+        </div>
+        <div class="chip-row">
+          <span class="chip">Hover</span>
+          <span class="chip">Focus</span>
+          <span class="chip">Active</span>
+          <span class="chip">Disabled</span>
+        </div>
+      </article>
+    </section>
+    <section class="card-grid" aria-label="Component examples">
+      <article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
+      <article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
+      <article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/kit.html

@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Resend - component kit</title>
+  <style>
+:root {
+    --accent: #ff801f;
+    --accent-active: color-mix(in oklab, var(--accent), black 12%);
+    --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+    --accent-on: #000000;
+    --bg: #000000;
+    --border: rgba(214, 235, 253, 0.19);
+    --border-soft: rgba(217, 237, 254, 0.145);
+    --container-gutter-desktop: 32px;
+    --container-gutter-phone: 16px;
+    --container-gutter-tablet: 24px;
+    --container-max: 1200px;
+    --danger: #ff2047;
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --elev-flat: none;
+    --elev-raised: 0 0 0 1px rgba(176, 199, 217, 0.145), 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+    --elev-ring: 0 0 0 1px var(--border);
+    --fg: #f0f0f0;
+    --fg-2: #a1a4a5;
+    --focus-ring: 0 0 0 2px var(--accent);
+    --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    --leading-body: 1.5;
+    --leading-tight: 1.0;
+    --meta: #464a4d;
+    --motion-base: 200ms;
+    --motion-fast: 150ms;
+    --muted: #5c5c5c;
+    --radius-lg: 16px;
+    --radius-md: 8px;
+    --radius-pill: 9999px;
+    --radius-sm: 4px;
+    --section-y-desktop: 120px;
+    --section-y-phone: 48px;
+    --section-y-tablet: 80px;
+    --space-1: 4px;
+    --space-12: 48px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-8: 32px;
+    --success: #11ff99;
+    --surface: #000000;
+    --surface-warm: var(--surface);
+    --text-2xl: 36px;
+    --text-3xl: 56px;
+    --text-4xl: 96px;
+    --text-base: 16px;
+    --text-lg: 20px;
+    --text-sm: 14px;
+    --text-xl: 24px;
+    --text-xs: 12px;
+    --tracking-display: -0.05em;
+    --warn: #ffc53d;
+}
+:root {
+  --od-page-bg: #000000;
+  --od-surface: #000000;
+  --od-text: #f0f0f0;
+  --od-muted: #5c5c5c;
+  --od-border: rgba(214, 235, 253, 0.19);
+  --od-accent: #ff801f;
+  --od-radius: 8px;
+  --od-font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --od-font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--od-page-bg);
+  color: var(--od-text);
+  font-family: var(--od-font-body);
+  -webkit-font-smoothing: antialiased;
+}
+a { color: inherit; }
+.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
+.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
+.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
+h1, h2, h3, p { margin: 0; }
+h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
+h1 { margin-top: 12px; font-size: 64px; }
+h2 { font-size: 40px; }
+h3 { font-size: 22px; }
+.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
+.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
+.button.secondary { background: var(--od-surface); }
+.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
+.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
+.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
+.metric, .card { padding: 18px; }
+.metric strong { display: block; font-size: 30px; line-height: 1; }
+.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
+.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
+.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
+input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
+label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
+@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
+</style>
+</head>
+<body>
+  <main class="page">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Productivity &amp; SaaS system</p>
+        <h1>Resend component kit</h1>
+        <p class="lead">Bundled OpenDesign package for Resend, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
+        <div class="actions">
+          <a class="button primary" href="#">Primary</a>
+          <a class="button secondary" href="#">Default</a>
+          <a class="button secondary" href="#">Dashed</a>
+        </div>
+      </div>
+      <article class="panel">
+        <p class="eyebrow">Reference module</p>
+        <h3>Token-driven surface</h3>
+        <div class="metric-grid">
+          <div class="metric"><strong>12</strong><span>Components</span></div>
+          <div class="metric"><strong>4</strong><span>States</span></div>
+          <div class="metric"><strong>1</strong><span>Token contract</span></div>
+        </div>
+        <div class="chip-row">
+          <span class="chip">Hover</span>
+          <span class="chip">Focus</span>
+          <span class="chip">Active</span>
+          <span class="chip">Disabled</span>
+        </div>
+      </article>
+    </section>
+    <section class="card-grid" aria-label="Component examples">
+      <article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
+      <article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
+      <article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
+    </section>
+  </main>
+</body>
+</html>

open-design/design-systems/resend/system/tokens.default.json

@@ -0,0 +1,8 @@
+{
+  "colorPrimary": "#ff801f",
+  "colorPrimaryBg": "var(--surface)",
+  "colorPrimaryHover": "color-mix(in oklab, var(--accent), white 10%)",
+  "colorPrimaryActive": "color-mix(in oklab, var(--accent), black 12%)",
+  "fontSize": 16,
+  "borderRadius": 8
+}

open-design/design-systems/resend/tailwind-v4.css

@@ -0,0 +1,63 @@
+/* Derived from tokens.css. Keep tokens.css as the source of truth. */
+@import "tailwindcss";
+@import "./tokens.css";
+
+@theme {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-warm: var(--surface-warm);
+  --color-fg: var(--fg);
+  --color-fg-2: var(--fg-2);
+  --color-muted: var(--muted);
+  --color-meta: var(--meta);
+  --color-border: var(--border);
+  --color-border-soft: var(--border-soft);
+  --color-accent: var(--accent);
+  --color-accent-on: var(--accent-on);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-success: var(--success);
+  --color-warn: var(--warn);
+  --color-danger: var(--danger);
+  --font-display: var(--font-display);
+  --font-body: var(--font-body);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --leading-body: var(--leading-body);
+  --leading-tight: var(--leading-tight);
+  --tracking-display: var(--tracking-display);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-8: var(--space-8);
+  --spacing-12: var(--space-12);
+  --spacing-section-desktop: var(--section-y-desktop);
+  --spacing-section-tablet: var(--section-y-tablet);
+  --spacing-section-phone: var(--section-y-phone);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-pill: var(--radius-pill);
+  --shadow-flat: var(--elev-flat);
+  --shadow-ring: var(--elev-ring);
+  --shadow-raised: var(--elev-raised);
+  --shadow-focus-ring: var(--focus-ring);
+  --duration-fast: var(--motion-fast);
+  --duration-base: var(--motion-base);
+  --ease-standard: var(--ease-standard);
+  --container-max: var(--container-max);
+  --spacing-container-desktop: var(--container-gutter-desktop);
+  --spacing-container-tablet: var(--container-gutter-tablet);
+  --spacing-container-phone: var(--container-gutter-phone);
+}

open-design/design-systems/resend/tokens.css

@@ -0,0 +1,353 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/resend/tokens.css
+ *
+ * Structured token bindings for "Resend" — the developer-first email
+ * API whose marketing surface treats a pure-black canvas like a
+ * gallery wall and lights every container with a single, icy blue-
+ * tinted hairline.
+ *
+ * Brand identity in three sentences:
+ *   1. Void-black (#000000) canvas with near-white (#f0f0f0) ink —
+ *      theatrical darkness; the page is the stage and content
+ *      performs on it without competing chrome.
+ *   2. Frost borders (rgba(214, 235, 253, 0.19)) replace gray borders
+ *      everywhere — every divider, button, card, and tab is a thin
+ *      icy line on the void; depth is by border luminance, not by
+ *      blur shadows that cannot cast against pure black.
+ *   3. ABC Favorit (geometric sans) for display headings with
+ *      aggressive negative tracking, Inter for body and UI, Commit
+ *      Mono for code — one accent at a time (here: Resend Orange
+ *      #ff801f) so the chromatic moment lands hard against the gray.
+ *
+ * Brand-specific schema decisions (each one bends a schema convention
+ * to match Resend's voice rather than the cross-brand default):
+ *
+ *   1. `--bg` and `--surface` both bind to `#000000`. DESIGN.md §7 is
+ *      explicit: "Don't lighten the background above #000000 — the
+ *      pure black void is non-negotiable." Cards on Resend do not
+ *      lift via fill; they read by their frost border alone. Setting
+ *      `--surface` to the same void as `--bg` honors that rule and
+ *      forces every card-like component to express elevation through
+ *      `--border` / `--elev-ring`, not through tinted backgrounds.
+ *      `--surface-warm` aliases to `--surface` because the brand has
+ *      no warm tier — there is no second background color anywhere.
+ *
+ *   2. `--border` is `rgba(214, 235, 253, 0.19)` — the literal
+ *      "frost border" alpha named in DESIGN.md §1 as "the signature"
+ *      of the entire system. Binding the slot to the alpha (not a
+ *      solid hex) lets `--elev-ring` (`0 0 0 1px var(--border)`)
+ *      reproduce the icy line by default, and lets every component
+ *      reach the same value via `border: 1px solid var(--border)`.
+ *      `--border-soft` drops to `rgba(217, 237, 254, 0.145)` for
+ *      inner row separators that should not compete with the
+ *      container's outer frost edge.
+ *
+ *   3. `--fg` is `#f0f0f0`, not `#ffffff`. DESIGN.md §2 names this
+ *      the "Near White" — a deliberately softened text tier that
+ *      lets pure white (`#ffffff`) stay reserved for the maximum-
+ *      emphasis moments DESIGN.md describes as "link highlights"
+ *      and the white-pill CTA. The four-level foreground ramp
+ *      (`#f0f0f0 → #a1a4a5 → #5c5c5c → #464a4d`) maps directly onto
+ *      DESIGN.md §2's documented neutral scale (Near White, Silver,
+ *      Mid Gray, Dark Gray) so `--fg-2` and `--meta` are
+ *      independently bound rather than aliased.
+ *
+ *   4. `--accent` is Resend Orange (`#ff801f`, "Orange 10" in
+ *      DESIGN.md §2). Resend's product surface uses a multi-color
+ *      accent system (orange/green/blue/yellow/red), but the shared
+ *      schema slot must pick one — and Orange 10 is the only entry
+ *      DESIGN.md prefixes with "primary orange accent". The blue
+ *      and green variants live as semantic / inline values in
+ *      components.html; promoting any of them to a second accent
+ *      slot would require a C-extension, which the brand contract
+ *      defers until ≥2 brands need the same name. `--accent-on` is
+ *      `#000000` because saturated orange against black reads best
+ *      with black labels (DESIGN.md §4 confirms the white-pill
+ *      pattern is for `#ffffff` solid backgrounds, not for the
+ *      orange accent fill).
+ *
+ *   5. `--accent-hover` brightens toward white (10%) and
+ *      `--accent-active` darkens toward black (12%) — the inverse
+ *      of the schema's default mid-luminance pattern. On Resend's
+ *      void canvas, a "pressed" state reads as a small recession
+ *      into the dark, while a "lifted" hover reads as a luminance
+ *      step up. This matches the Linear / dark-system convention
+ *      and avoids the schema default's all-darken pattern that
+ *      would make the orange disappear into the void on hover.
+ *
+ *   6. Semantic colors come straight from DESIGN.md §2's multi-
+ *      color accent scale — `--success: #11ff99` (Green 4),
+ *      `--warn: #ffc53d` (Yellow 9), `--danger: #ff2047` (Red 5).
+ *      These are the saturated source values; components that want
+ *      the documented "12–42% opacity" tints reach them via
+ *      `color-mix(in oklab, var(--success), transparent 80%)` in
+ *      situ, keeping the alpha-blend decision at the component
+ *      layer rather than in the token slot.
+ *
+ *   7. Type scale is documented in DESIGN.md §3: 96px display,
+ *      56px section, 24px feature title, 20px sub-heading, 18px
+ *      body-large, 16px body, 14px caption, 12px small. The schema
+ *      has 8 slots; `--text-2xl` is bound to `36px` as the
+ *      intermediate that bridges 24px (feature title) to 56px
+ *      (section heading) — DESIGN.md does not enumerate this stop,
+ *      but a 24 → 56 jump without a mid-tier would force every H2
+ *      to either undershoot or overshoot. `--leading-tight: 1.0`
+ *      matches the documented Display Hero rhythm; `--leading-body:
+ *      1.5` matches the documented Body / Body Large / Feature
+ *      Title leading.
+ *
+ *   8. `--tracking-display` is `-0.05em`, derived from DESIGN.md
+ *      §3 Section Heading (`-2.8px at 56px = -0.05em`). ABC Favorit
+ *      compresses harder than Domaine Display (`-0.01em` at 96px),
+ *      so binding the slot to the ABC Favorit characteristic value
+ *      gives every display-tier element the brand's "engineered
+ *      masthead" feel. The hero in components.html can opt back
+ *      into the gentler Domaine tracking inline if needed.
+ *
+ *   9. `--font-display` lists ABC Favorit first, with Inter as the
+ *      structural fallback. Inter is documented in DESIGN.md §3 as
+ *      the body / UI font, but it shares the geometric voice well
+ *      enough to carry display weight when ABC Favorit is not
+ *      loaded — far better than falling through to a generic system
+ *      sans. Domaine Display (the editorial serif hero font) is
+ *      deliberately not in the stack: it is a paid Klim Type
+ *      Foundry face whose absence would surface as a jarring serif
+ *      drop. Heroes that want Domaine layer it in via
+ *      `font-family: "Domaine Display", var(--font-display)` at the
+ *      component level.
+ *
+ *  10. Section rhythm is generous: 120px desktop, 80px tablet, 48px
+ *      phone. DESIGN.md §5 names "Cinematic black space" with "80–
+ *      120px+ vertical spacing between sections" as a defining
+ *      property — "the black background IS the whitespace". 120px
+ *      desktop sits at the top of that documented range.
+ *
+ *  11. `--radius-sm` is `4px` (DESIGN.md "Sharp": buttons-ghost,
+ *      inputs); `--radius-md` is `8px` (tabs / content blocks);
+ *      `--radius-lg` is `16px` (feature cards / images / main
+ *      buttons); `--radius-pill` is `9999px` (primary CTAs / tags
+ *      / badges). The 24px "Section" radius from DESIGN.md is
+ *      component-specific (large panels) and reached inline rather
+ *      than via the shared schema.
+ *
+ *  12. `--elev-raised` layers the documented `rgba(176, 199, 217,
+ *      0.145) 0 0 0 1px` ring shadow with the subtle drop from
+ *      DESIGN.md §6 Level 2. On pure black, opaque blur shadows
+ *      vanish — the ring carries the edge, and the soft drop adds
+ *      just enough atmospheric tint to read as "lifted" against
+ *      the void. Never strip the ring when overriding this token.
+ *
+ *  13. `--focus-ring` is a sharp 2px ring at `var(--accent)`, not
+ *      the schema's 3px alpha glow. DESIGN.md §6 Level 3 documents
+ *      a heavy 8px black focus ring that works in product context
+ *      (against non-black surroundings); on this brand fixture the
+ *      black canvas would swallow that ring, so we substitute the
+ *      orange accent at 2px — sharp, engineered, legible against
+ *      both the void and any card surface.
+ *
+ *  14. `--container-max` caps at `1200px` with generous 32px
+ *      desktop gutters — Resend's marketing pages center contained
+ *      content in vast dark space, treating the gutter as part of
+ *      the gallery margin rather than as edge-bleed.
+ *
+ * Source contracts:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *   - A2 fallback parity:   design-systems/_schema/defaults.css
+ *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
+ *
+ * Keep this file additive: never invent token names not also
+ * documented in DESIGN.md or the schema. ABC Favorit, Domaine
+ * Display, and Commit Mono are paid faces — the stacks list
+ * defensible OS fallbacks so artifacts render legibly even when
+ * the brand faces are not loaded.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
+   * The void is the canvas. DESIGN.md §7: "Don't lighten the
+   * background above #000000 — the pure black void is non-
+   * negotiable." `--surface` matches `--bg` because cards on Resend
+   * read by their frost border alone, not by a tinted fill.
+   * `--surface-warm` aliases to surface — the brand has no second
+   * background color anywhere. */
+  --bg: #000000;
+  --surface: #000000;
+  --surface-warm: var(--surface);          /* alias — Resend has no warm tier */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * Near White → Silver → Mid Gray → Dark Gray, the documented
+   * neutral scale from DESIGN.md §2. `#f0f0f0` instead of `#ffffff`
+   * matters — pure white is reserved for the white-pill CTA and link
+   * highlights; the softened near-white keeps body type calm against
+   * the void. All four tiers are independently bound (not aliased)
+   * because DESIGN.md names four distinct neutral roles: primary
+   * text, secondary / link-muted, hover / caption, tertiary /
+   * quaternary timestamp. */
+  --fg: #f0f0f0;                           /* Near White — primary text, button labels */
+  --fg-2: #a1a4a5;                         /* Silver — secondary text, muted links */
+  --muted: #5c5c5c;                        /* Mid Gray — captions, hover, subtle emphasis */
+  --meta: #464a4d;                         /* Dark Gray — tertiary text, timestamps */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Frost-as-border is THE signature: `rgba(214, 235, 253, 0.19)`
+   * at 1px replaces every gray border in the system. Binding
+   * `--border` to the alpha (not a solid hex) lets `--elev-ring`
+   * reproduce the icy line by default, and lets
+   * `border: 1px solid var(--border)` paint the same value when a
+   * real CSS border is structurally required (e.g. the bottom edge
+   * of the sticky nav per DESIGN.md §4). `--border-soft` drops to
+   * `0.145` alpha for inner row separators that must not compete
+   * with the container's outer frost edge. */
+  --border: rgba(214, 235, 253, 0.19);     /* signature frost border alpha */
+  --border-soft: rgba(217, 237, 254, 0.145); /* inner row separator — lighter frost */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * Resend Orange (Orange 10 from DESIGN.md §2). Hard cap of ≤2
+   * visible uses per screen — DESIGN.md §7 forbids cross-mixing
+   * accent colors within a single component. The multi-color
+   * scale (green/blue/yellow/red) lives at the semantic / inline
+   * layer; only the orange slot rides on `--accent`.
+   *
+   * `--accent-on` is BLACK, not white — saturated #ff801f against
+   * black reads cleanest with black labels (the white-pill CTA in
+   * DESIGN.md §4 uses #ffffff fill with #000000 text, not the
+   * orange accent). Hover brightens 10% toward white, active
+   * darkens 12% toward black — the inverse of the schema's all-
+   * darken default, matching the dark-theme convention where
+   * "pressed" reads as recession into the void. */
+  --accent: #ff801f;                       /* Resend Orange — primary chromatic accent */
+  --accent-on: #000000;                    /* black label on saturated orange fill */
+  --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+  --accent-active: color-mix(in oklab, var(--accent), black 12%);
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * Saturated source values from DESIGN.md §2's multi-color accent
+   * scale. Components reach the documented 12–42% opacity tints
+   * via `color-mix(in oklab, var(--success), transparent 80%)` in
+   * situ, keeping the alpha-blend decision at the component layer. */
+  --success: #11ff99;                      /* Green 4 — emerald success indicator */
+  --warn: #ffc53d;                         /* Yellow 9 — warm gold warning */
+  --danger: #ff2047;                       /* Red 5 — error / destructive */
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Three-font editorial hierarchy from DESIGN.md §3. ABC Favorit
+   * carries display; Inter carries body and UI; Commit Mono
+   * carries code and technical labels. Domaine Display (the
+   * editorial serif hero face) is intentionally not in the
+   * `--font-display` stack — it is a paid Klim Type Foundry face
+   * whose absence would surface as a jarring serif drop. Heroes
+   * that want Domaine layer it in via `font-family: "Domaine
+   * Display", var(--font-display)` at the component level. */
+  --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
+   * 12 / 14 / 16 / 18 / 20 / 24 / 56 / 96 are all documented; the
+   * 36px `--text-2xl` is the synthesized intermediate that bridges
+   * 24px feature-title to 56px section-heading. Without it, every
+   * H2 would have to undershoot at 24 or overshoot at 56 and the
+   * type rhythm would jump. */
+  --text-xs: 12px;                         /* Small — tags, meta, fine print */
+  --text-sm: 14px;                         /* Caption, button, nav link */
+  --text-base: 16px;                       /* Body — standard reading */
+  --text-lg: 20px;                         /* Sub-heading — ABC Favorit */
+  --text-xl: 24px;                         /* Feature Title — Inter weight 500 */
+  --text-2xl: 36px;                        /* Synthesized H2 — bridges 24 → 56 */
+  --text-3xl: 56px;                        /* Section Heading — ABC Favorit */
+  --text-4xl: 96px;                        /* Display Hero — Domaine / ABC Favorit */
+
+  /* Leading + tracking.
+   * --leading-body 1.5: DESIGN.md body / feature-title / body-large.
+   * --leading-tight 1.0: DESIGN.md Display Hero (96px).
+   * --tracking-display -0.05em: ABC Favorit Section Heading
+   *   (-2.8px / 56px). Harder compression than Domaine's -0.01em;
+   *   binding the slot to the ABC Favorit value gives display tiers
+   *   the brand's "engineered masthead" feel. */
+  --leading-body: 1.5;
+  --leading-tight: 1.0;
+  --tracking-display: -0.05em;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * Standard 4px-grid base scale. DESIGN.md §5 also documents 5px,
+   * 6px, 7px, 10px, 30px, 40px micro-tiers — those are too fine to
+   * belong in the shared schema and are inlined per-component when
+   * needed (button padding `5px 12px`, etc.). The 4/8/12/16/20/
+   * 24/32/48 tier covers the structural rhythm. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  /* Section rhythm — DESIGN.md §5: "Cinematic black space" with
+   * 80–120px+ vertical padding between sections. 120px desktop sits
+   * at the top of the documented range, dropping to 80px tablet
+   * (still generous) and 48px phone (the documented mobile floor). */
+  --section-y-desktop: 120px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * DESIGN.md §5 radius scale: 4 / 6 / 8 / 10 / 12 / 16 / 24 / 9999.
+   * We bind the four schema tiers to: 4 (sharp — ghost button,
+   * inputs), 8 (standard — tabs, content), 16 (large — feature
+   * cards, images, main buttons), 9999 (pill — primary CTAs, tags,
+   * badges). The 24px "Section" radius is component-specific (large
+   * panels) and reached inline. */
+  --radius-sm: 4px;                        /* Sharp — ghost button, input */
+  --radius-md: 8px;                        /* Standard — tab, content block */
+  --radius-lg: 16px;                       /* Large — feature card, image, main button */
+  --radius-pill: 9999px;                   /* Pill — primary CTA, tag, badge */
+
+  /* ─── Elevation (3 levels) ───────────────────────────────────────
+   * Resend barely uses shadows — DESIGN.md §6: "On a pure black
+   * background, traditional shadows are invisible — you can't cast
+   * a shadow into the void. Instead, Resend creates depth through
+   * its signature frost borders."
+   *
+   *   --elev-flat    no shadow (page background, text blocks)
+   *   --elev-ring    the signature frost hairline (most surfaces)
+   *   --elev-raised  ring + subtle drop for true "lifted" feel
+   *
+   * `--elev-raised` layers the documented `rgba(176, 199, 217, 0.145)
+   * 0 0 0 1px` ring with the §6 Level 2 subtle drop. Never strip
+   * the ring when overriding — it is the edge mechanism that lets
+   * a card read against the void at all. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    0 0 0 1px rgba(176, 199, 217, 0.145),
+    0 1px 3px rgba(0, 0, 0, 0.4),
+    0 1px 2px -1px rgba(0, 0, 0, 0.4);
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * Sharp 2px ring at `var(--accent)`, NOT the schema's 3px alpha
+   * glow. DESIGN.md §6 documents an 8px black ring that works in
+   * product context (against non-black surroundings); on this
+   * brand fixture the black canvas would swallow that ring, so we
+   * substitute the orange accent at 2px — sharp, engineered,
+   * legible against both the void and any card surface. */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * Two durations + one easing curve. Resend's micro-states are
+   * quick and unobtrusive — pill buttons crossfade to white glass,
+   * frost borders intensify on focus, no choreographed entrances. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1200px max content width — DESIGN.md §5 "Centered content with
+   * generous max-width". Gutters stay wide on desktop (32px) so
+   * the gallery margin around the void canvas reads as intentional
+   * framing; mobile narrows to 16px to preserve readable measure. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 32px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}