@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/arc/DESIGN.md

@@ -0,0 +1,152 @@
+# Design System Inspired by Arc Browser
+
+> Category: Productivity & SaaS
+> "The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.
+
+## 1. Visual Theme & Atmosphere
+
+Arc Browser dissolves the boundary between the chrome and the page. Where Chrome and Safari treat the browser frame as a container, Arc treats it as scenery — the toolbar fades into the system wallpaper, the sidebar carries gradient warmth from the user's chosen "theme color", and translucency is everywhere. The visual signature is **frosted glass plus a single saturated gradient** — most often a peach-to-coral or violet-to-fuchsia bloom — that sets the emotional temperature of the entire window.
+
+Typography uses **Inter** for chrome and a custom display serif (`Argent CF` or similar) for marketing — when Arc speaks publicly it speaks editorially, in a serif voice unusual for tech. The product itself is sans-only, with tight tracking and generous line-height.
+
+Shapes are squircle-soft: 12–16px radii on cards, 8px on tabs, 9999px pills for tags. Borders are rare — Arc prefers tinted background washes (`rgba(255, 255, 255, 0.5)` over the gradient) to delineate panes.
+
+**Key Characteristics:**
+- Translucent frosted-glass surfaces over a saturated gradient background
+- Theme-color gradients (peach-coral, violet-fuchsia, mint-cyan) as the primary mood
+- Inter for product chrome, Argent CF (serif) for marketing display
+- Squircle-soft 12–16px radii everywhere
+- Sidebar-first layout: tabs, spaces, and bookmarks live on the left, not the top
+- Color picker is a brand surface — themes are user-driven, not fixed
+- Subtle shadows (`0 8px 32px rgba(0,0,0,0.08)`) over the gradient backdrop
+
+## 2. Color Palette & Roles
+
+### Primary Theme Gradients (User-selectable; default is "Sunset")
+- **Sunset Start** (`#ff7e5f`): Peach gradient origin.
+- **Sunset End** (`#feb47b`): Soft coral gradient terminus.
+- **Twilight Start** (`#7f5af0`): Violet gradient origin.
+- **Twilight End** (`#e84393`): Fuchsia gradient terminus.
+- **Aurora Start** (`#16f2b3`): Mint gradient origin.
+- **Aurora End** (`#0db4f7`): Cyan gradient terminus.
+
+### Surface (Frosted)
+- **Glass Light** (`rgba(255, 255, 255, 0.7)`): Standard frosted pane over gradient.
+- **Glass Medium** (`rgba(255, 255, 255, 0.5)`): Hover state, tab pill background.
+- **Glass Heavy** (`rgba(255, 255, 255, 0.85)`): Active pane, command bar.
+- **Glass Dark** (`rgba(20, 20, 25, 0.6)`): Dark-mode frosted surface.
+
+### Ink & Text
+- **Ink Primary** (`#1a1a1f`): Primary text on light frosted surface.
+- **Ink Secondary** (`#54545a`): Secondary text, tab title at rest.
+- **Ink Muted** (`#8c8c93`): Tertiary, captions, URL bar.
+- **Ink Inverse** (`#fafafa`): Text on dark frosted surface.
+
+### Border & Divider
+- **Border Glass** (`rgba(255, 255, 255, 0.4)`): Frosted-edge border.
+- **Border Hairline** (`rgba(0, 0, 0, 0.06)`): Hairline divider on light surface.
+- **Border Active** (`rgba(0, 0, 0, 0.18)`): Active tab outline.
+
+### Brand Accent
+- **Arc Coral** (`#ff5f5f`): Default brand color — used in marketing, `arc.net`.
+- **Arc Lavender** (`#b794f4`): Secondary brand accent.
+
+### Semantic
+- **Success** (`#48bb78`): Toast confirmation.
+- **Warning** (`#f6ad55`): Permission prompt.
+- **Error** (`#f56565`): Form validation.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Marketing**: `Argent CF`, with fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Inter`, with fallback: `system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
+- **Code / Mono**: `Berkeley Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Marketing Hero | Argent CF | 72px (4.5rem) | 400 | 1.05 | -0.03em | Editorial display, marketing only |
+| Section Heading | Argent CF | 40px (2.5rem) | 400 | 1.15 | -0.02em | Marketing section titles |
+| Page H1 | Inter | 32px (2rem) | 700 | 1.2 | -0.02em | Settings, command bar header |
+| Page H2 | Inter | 22px (1.375rem) | 600 | 1.25 | -0.01em | Sub-section |
+| Tab Title | Inter | 13px (0.8125rem) | 500 | 1.3 | -0.005em | Sidebar tab label |
+| Body | Inter | 15px (0.9375rem) | 400 | 1.55 | normal | Settings prose, tooltips |
+| Caption | Inter | 12px (0.75rem) | 500 | 1.4 | 0.01em | URL bar protocol, metadata |
+| Code | Berkeley Mono | 13px (0.8125rem) | 400 | 1.5 | normal | URL bar, devtools |
+
+### Principles
+- **Serif moments are rare**: Argent CF appears only in marketing. The product is sans-only.
+- **Title size is small**: tabs render at 13px so a long sidebar of 30+ tabs stays scannable.
+- **Tracking tightens with size**: -0.03em at 72px, returning to normal by 15px.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Filled)**
+- Background: linear-gradient on theme color (e.g., `linear-gradient(135deg, #ff7e5f, #feb47b)`)
+- Text: `#ffffff`
+- Padding: 10px 20px
+- Radius: 12px
+- Shadow: `0 4px 16px rgba(255, 127, 95, 0.3)`
+- Hover: shadow grows to `0 8px 24px rgba(255, 127, 95, 0.4)`
+
+**Glass (Secondary)**
+- Background: `rgba(255, 255, 255, 0.7)`
+- Backdrop: `blur(20px)`
+- Text: `#1a1a1f`
+- Border: 1px solid `rgba(255, 255, 255, 0.4)`
+- Padding: 10px 20px
+- Radius: 12px
+
+**Subtle**
+- Background: transparent
+- Text: theme color
+- Hover: background `rgba(255, 127, 95, 0.1)`
+
+### Tabs (Sidebar)
+- Background at rest: transparent
+- Background on hover: `rgba(255, 255, 255, 0.5)`
+- Background active: `rgba(255, 255, 255, 0.85)` + soft shadow
+- Padding: 8px 12px
+- Radius: 8px
+- Favicon: 16px square at left, 8px gap to title.
+
+### Cards / Panes
+- Background: `rgba(255, 255, 255, 0.7)`
+- Backdrop: `blur(24px)` saturate 180%
+- Border: 1px solid `rgba(255, 255, 255, 0.4)`
+- Radius: 16px
+- Shadow: `0 8px 32px rgba(0, 0, 0, 0.08)`
+- Padding: 24px
+
+### Inputs (Command Bar)
+- Background: `rgba(255, 255, 255, 0.85)`
+- Backdrop: `blur(40px)`
+- Text: `#1a1a1f`
+- Border: 1px solid `rgba(255, 255, 255, 0.4)`
+- Radius: 14px
+- Padding: 14px 18px
+- Focus: shadow `0 0 0 4px rgba(255, 127, 95, 0.2)`
+
+### Pills (Spaces / Bookmarks Folder)
+- Background: theme color at 16% alpha
+- Text: theme color (full)
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 600
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
+- **Sidebar**: 240px wide; collapsible to 56px.
+- **Window radius**: 12px on the OS window itself (macOS-only flourish).
+- **Padding inside panes**: 24px.
+
+## 6. Motion
+
+- **Duration**: 200ms for hover; 320ms for tab create/close; 480ms for "Little Arc" window expand.
+- **Easing**: `cubic-bezier(0.32, 0.72, 0, 1)` for window expand (Apple's spring-style).
+- **Tab swap**: 1px translate + opacity blend, no scale change.

package/dist/designer/data/systems/arc/components.html

@@ -0,0 +1,432 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Arc — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/arc. Frosted glass over a peach-coral
+        Sunset gradient, squircle-soft radii, editorial Argent CF serif for the hero,
+        Inter for product chrome."
+    />
+
+    <style>
+      :root {
+        --bg: #fdf3ec;
+        --surface: #ffffff;
+        --surface-warm: #fff4ea;
+
+        --fg: #1a1a1f;
+        --fg-2: #54545a;
+        --muted: #8c8c93;
+        --meta: var(--muted);
+
+        --border: #ece5db;
+        --border-soft: #f6f0e8;
+
+        --accent: #ff5f5f;
+        --accent-on: #ffffff;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+        --success: #48bb78;
+        --warn: #f6ad55;
+        --danger: #f56565;
+
+        --font-display: "Argent CF", "Source Serif Pro", Georgia, serif;
+        --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+        --font-mono: "Berkeley Mono", ui-monospace, Menlo, Consolas, monospace;
+
+        --text-xs: 12px;
+        --text-sm: 13px;
+        --text-base: 15px;
+        --text-lg: 18px;
+        --text-xl: 22px;
+        --text-2xl: 32px;
+        --text-3xl: 40px;
+        --text-4xl: 72px;
+
+        --leading-body: 1.55;
+        --leading-tight: 1.05;
+        --tracking-display: -0.03em;
+
+        --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: 96px;
+        --section-y-tablet: 64px;
+        --section-y-phone: 48px;
+
+        --radius-sm: 8px;
+        --radius-md: 12px;
+        --radius-lg: 16px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 0 8px 32px rgba(0, 0, 0, 0.08);
+
+        --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%);
+
+        --motion-fast: 200ms;
+        --motion-base: 320ms;
+        --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
+
+        --container-max: 1200px;
+        --container-gutter-desktop: 32px;
+        --container-gutter-tablet: 24px;
+        --container-gutter-phone: 16px;
+      }
+
+      /* ─── Reset ─────────────────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        background-image:
+          radial-gradient(circle at 0% 0%, rgba(255, 126, 95, 0.22), transparent 55%),
+          radial-gradient(circle at 100% 5%, rgba(255, 95, 95, 0.16), transparent 50%),
+          radial-gradient(circle at 50% 100%, rgba(254, 180, 123, 0.20), transparent 60%);
+        background-attachment: fixed;
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ─── Layout ─────────────────────────────────────────────── */
+      .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border-soft); }
+      @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 — editorial serif hero, sans-only product ─ */
+      h1, h2, h3 { margin: 0; line-height: var(--leading-tight); }
+      h1 {
+        font-family: var(--font-display);   /* Argent CF — marketing only */
+        font-weight: 400;                    /* Editorial serif: weight stays calm */
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-family: var(--font-display);   /* Section titles also Argent CF */
+        font-weight: 400;
+        font-size: var(--text-3xl);
+        letter-spacing: -0.02em;
+      }
+      h3 {
+        font-family: var(--font-body);      /* Inter for in-product hierarchy */
+        font-weight: 600;
+        font-size: var(--text-xl);
+        letter-spacing: -0.01em;
+      }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        color: var(--fg-2);
+        line-height: var(--leading-body);
+      }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      .body-fg2 { color: var(--fg-2); }
+      .eyebrow {
+        font-family: var(--font-body);
+        font-size: var(--text-xs);
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-weight: 500;
+      }
+      .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 — Sunset gradient on primary, glass on secondary ─ */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 20px;
+        border-radius: var(--radius-md);   /* 12px — squircle-soft */
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        border: none;
+        text-decoration: none;
+        transition:
+          box-shadow var(--motion-fast) var(--ease-standard),
+          transform var(--motion-fast) var(--ease-standard),
+          background-color var(--motion-fast) var(--ease-standard);
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn:active { transform: translateY(0); }
+
+      /* Primary: the Sunset gradient — peach (#ff7e5f) to soft coral (#feb47b) */
+      .btn-primary {
+        background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
+        color: #ffffff;
+        box-shadow: 0 4px 16px rgba(255, 127, 95, 0.30);
+      }
+      .btn-primary:hover {
+        box-shadow: 0 8px 24px rgba(255, 127, 95, 0.40);
+        transform: translateY(-1px);
+      }
+
+      /* Secondary: frosted glass — translucent white over the gradient backdrop */
+      .btn-secondary {
+        background: rgba(255, 255, 255, 0.72);
+        -webkit-backdrop-filter: blur(20px) saturate(180%);
+        backdrop-filter: blur(20px) saturate(180%);
+        color: var(--fg);
+        box-shadow: var(--elev-ring);
+      }
+      .btn-secondary:hover {
+        background: rgba(255, 255, 255, 0.88);
+      }
+
+      /* Subtle: theme-tinted ghost (DESIGN.md §4) */
+      .btn-subtle {
+        background: transparent;
+        color: var(--accent);
+        padding-inline: var(--space-3);
+      }
+      .btn-subtle:hover { background: color-mix(in oklab, var(--accent), transparent 90%); }
+
+      /* ─── Inputs — command-bar feel ──────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); }
+      .field input {
+        padding: 14px 18px;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.85);
+        -webkit-backdrop-filter: blur(40px);
+        backdrop-filter: blur(40px);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        outline: none;
+        transition:
+          border-color var(--motion-fast) var(--ease-standard),
+          box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input:focus-visible {
+        border-color: color-mix(in oklab, var(--accent), white 30%);
+        box-shadow: var(--focus-ring);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field-help { font-size: var(--text-xs); color: var(--muted); }
+
+      /* ─── Cards — frosted panes, long-throw soft shadow ─────── */
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border-soft);
+        border-radius: var(--radius-lg);   /* 16px — squircle-soft pane */
+        padding: var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        box-shadow: var(--elev-raised);
+        transition:
+          transform var(--motion-base) var(--ease-standard),
+          box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
+      }
+
+      /* ─── Pills — theme color at 16% alpha ──────────────────── */
+      .pill {
+        display: inline-flex; align-items: center; gap: var(--space-2);
+        padding: 4px 10px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        line-height: 1.4;
+        background: color-mix(in oklab, var(--accent), transparent 84%);
+        color: var(--accent);
+      }
+      .pill-success {
+        background: color-mix(in oklab, var(--success), transparent 86%);
+        color: var(--success);
+      }
+      .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+      /* ─── Hero meta panel — warm-inset frosted aside ─────────── */
+      .hero-meta {
+        display: flex; flex-direction: column; gap: var(--space-4);
+        padding: var(--space-6);
+        border: 1px solid var(--border-soft);
+        border-radius: var(--radius-lg);
+        background: rgba(255, 255, 255, 0.70);
+        -webkit-backdrop-filter: blur(24px) saturate(180%);
+        backdrop-filter: blur(24px) saturate(180%);
+        box-shadow: var(--elev-raised);
+      }
+      .hero-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+
+      /* ─── Links & kbd ─────────────────────────────────────────── */
+      a { color: var(--accent); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
+      a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
+      kbd {
+        font-family: var(--font-mono); font-size: var(--text-xs);
+        padding: 2px 6px; border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--surface-warm);
+        color: var(--fg-2);
+      }
+
+      /* ─── Layout helpers ────────────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.5fr 1fr;
+        gap: var(--space-12);
+        align-items: end;
+      }
+      @media (max-width: 1023px) {
+        .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); align-items: stretch; }
+      }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
+      @media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
+      .form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 440px; }
+      .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); flex-wrap: wrap; }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · arc</p>
+            <h1>Let the internet flow through you.</h1>
+            <p class="lead" style="max-width: 48ch">
+              A calmer browser for a loud web. Sidebar-first, gradient-warm, frosted at every
+              edge — Arc treats the chrome as scenery, so the page feels like home, not a tab.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">
+                Try Arc
+                <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-secondary">Read the brief</a>
+              <a href="#form" class="btn btn-subtle">Reserve an invite →</a>
+            </div>
+          </div>
+          <aside class="hero-meta" aria-label="System status">
+            <div class="hero-meta-row">
+              <span class="body-sm body-fg2">Today's space</span>
+              <span class="pill">
+                <span class="pill-dot" aria-hidden="true"></span>
+                Sunset
+              </span>
+            </div>
+            <div class="hero-meta-row">
+              <span class="body-sm body-fg2">Tabs open</span>
+              <span class="body-sm" style="font-variant-numeric: tabular-nums">37 across 3 spaces</span>
+            </div>
+            <div class="hero-meta-row">
+              <span class="body-sm body-fg2">Status</span>
+              <span class="pill pill-success">
+                <span class="pill-dot" aria-hidden="true"></span>
+                Synced
+              </span>
+            </div>
+            <p class="body-sm body-muted">
+              Press <kbd>⌘</kbd> <kbd>T</kbd> for the command bar — or just start typing where you are.
+            </p>
+          </aside>
+        </div>
+      </section>
+
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2 style="max-width: 22ch">Warmth, on purpose. Geometry, with kindness.</h2>
+        </div>
+        <div class="features-grid" style="margin-block-start: var(--space-8)">
+          <article class="card">
+            <span class="pill" aria-hidden="true">Atmosphere</span>
+            <h3>Frosted glass over a Sunset gradient</h3>
+            <p class="body-muted body-sm">
+              The canvas is peach cream, never pure white. Cards float as translucent
+              white panes — a single soft shadow does the lifting.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
+          </article>
+          <article class="card">
+            <span class="pill" aria-hidden="true">Geometry</span>
+            <h3>Squircle-soft, every edge</h3>
+            <p class="body-muted body-sm">
+              8px on tabs, 12px on buttons, 16px on cards, 9999px on space pills.
+              No sharp corners anywhere — the browser gets out of your way.
+            </p>
+            <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
+          </article>
+          <article class="card">
+            <span class="pill" aria-hidden="true">Voice</span>
+            <h3>Editorial when it matters</h3>
+            <p class="body-muted body-sm">
+              Argent CF serif speaks publicly; Inter handles the chrome. A 72px hero
+              with -0.03em tracking is the only place the marketing gets loud.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect type →</a>
+          </article>
+        </div>
+      </section>
+
+      <section data-od-id="form" id="form">
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Reserve an invite.</h2>
+            <p class="body-muted" style="max-width: 48ch">
+              The command bar treatment — frosted background, 12px squircle, 4px coral
+              halo on focus — extends straight into the form layer. One language, one mood.
+            </p>
+          </div>
+          <form class="form" onsubmit="event.preventDefault();">
+            <div class="field">
+              <label for="email">Where should we send your invite?</label>
+              <input id="email" type="email" placeholder="you@thebrowser.company" autocomplete="email" required />
+              <p class="field-help">We'll only send your invite, not a newsletter — promise.</p>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">Get my invite</button>
+              <button type="button" class="btn btn-secondary">Watch the demo</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>