@aexol/spectral 0.7.0 → 0.7.3

package/dist/designer/data/systems/wired/tokens.css

@@ -0,0 +1,64 @@
+/* design-systems/wired/tokens.css
+ *
+ * Structured token bindings for WIRED.
+ * authoritative technology journalism with monochrome discipline and sharp red alerts.
+ */
+
+:root {
+  --bg: #ffffff;
+  --surface: #f2f2f2;
+  --surface-warm: #fff0f0;
+  --fg: #000000;
+  --fg-2: #333333;
+  --muted: #666666;
+  --meta: #e10600;
+  --border: #d0d0d0;
+  --border-soft: #e8e8e8;
+  --accent: #e10600;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #0f8a3b;
+  --warn: #f5a400;
+  --danger: #c40000;
+  --font-display: "Druk Wide", "Arial Black", Impact, sans-serif;
+  --font-body: "Exchange", Georgia, serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 17px;
+  --text-lg: 20px;
+  --text-xl: 28px;
+  --text-2xl: 44px;
+  --text-3xl: 68px;
+  --text-4xl: 96px;
+  --leading-body: 1.55;
+  --leading-tight: 0.92;
+  --tracking-display: -0.02em;
+  --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: 88px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 44px;
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 16px 40px rgba(0, 0, 0, 0.14);
+  --focus-ring: 0 0 0 4px rgba(225, 6, 0, 0.24);
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1180px;
+  --container-gutter-desktop: 34px;
+  --container-gutter-tablet: 26px;
+  --container-gutter-phone: 18px;
+}

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

@@ -0,0 +1,176 @@
+# Design System Inspired by Wise
+
+> Category: Fintech & Crypto
+> Money transfer. Bright green accent, friendly and clear.
+
+## 1. Visual Theme & Atmosphere
+
+Wise's website is a bold, confident fintech platform that communicates "money without borders" through massive typography and a distinctive lime-green accent. The design operates on a warm off-white canvas with near-black text (`#0e0f0c`) and a signature Wise Green (`#9fe870`) — a fresh, lime-bright color that feels alive and optimistic, unlike the corporate blues of traditional banking.
+
+The typography uses Wise Sans — a proprietary font used at extreme weight 900 (black) for display headings with a remarkably tight line-height of 0.85 and OpenType `"calt"` (contextual alternates). At 126px, the text is so dense it feels like a protest sign — bold, urgent, and impossible to ignore. Inter serves as the body font with weight 600 as the default for emphasis, creating a consistently confident voice.
+
+What distinguishes Wise is its green-on-white-on-black material palette. Lime Green (`#9fe870`) appears on buttons with dark green text (`#163300`), creating a nature-inspired CTA that feels fresh. Hover states use `scale(1.05)` expansion rather than color changes — buttons physically grow on interaction. The border-radius system uses 9999px for buttons (pill), 30px–40px for cards, and the shadow system is minimal — just `rgba(14,15,12,0.12) 0px 0px 0px 1px` ring shadows.
+
+**Key Characteristics:**
+- Wise Sans at weight 900, 0.85 line-height — billboard-scale bold headlines
+- Lime Green (`#9fe870`) accent with dark green text (`#163300`) — nature-inspired fintech
+- Inter body at weight 600 as default — confident, not light
+- Near-black (`#0e0f0c`) primary with warm green undertone
+- Scale(1.05) hover animations — buttons physically grow
+- OpenType `"calt"` on all text
+- Pill buttons (9999px) and large rounded cards (30px–40px)
+- Semantic color system with comprehensive state management
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Near Black** (`#0e0f0c`): Primary text, background for dark sections
+- **Wise Green** (`#9fe870`): Primary CTA button, brand accent
+- **Dark Green** (`#163300`): Button text on green, deep green accent
+- **Light Mint** (`#e2f6d5`): Soft green surface, badge backgrounds
+- **Pastel Green** (`#cdffad`): `--color-interactive-contrast-hover`, hover accent
+
+### Semantic
+- **Positive Green** (`#054d28`): `--color-sentiment-positive-primary`, success
+- **Danger Red** (`#d03238`): `--color-interactive-negative-hover`, error/destructive
+- **Warning Yellow** (`#ffd11a`): `--color-sentiment-warning-hover`, warnings
+- **Background Cyan** (`rgba(56,200,255,0.10)`): `--color-background-accent`, info tint
+- **Bright Orange** (`#ffc091`): `--color-bright-orange`, warm accent
+
+### Neutral
+- **Warm Dark** (`#454745`): Secondary text, borders
+- **Gray** (`#868685`): Muted text, tertiary
+- **Light Surface** (`#e8ebe6`): Subtle green-tinted light surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Wise Sans`, fallback: `Inter` — OpenType `"calt"` on all text
+- **Body / UI**: `Inter`, fallbacks: `Helvetica, Arial`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | Wise Sans | 126px (7.88rem) | 900 | 0.85 (ultra-tight) | normal | `"calt"` |
+| Display Hero | Wise Sans | 96px (6.00rem) | 900 | 0.85 | normal | `"calt"` |
+| Section Heading | Wise Sans | 64px (4.00rem) | 900 | 0.85 | normal | `"calt"` |
+| Sub-heading | Wise Sans | 40px (2.50rem) | 900 | 0.85 | normal | `"calt"` |
+| Alt Heading | Inter | 78px (4.88rem) | 600 | 1.10 (tight) | -2.34px | `"calt"` |
+| Card Title | Inter | 26px (1.62rem) | 600 | 1.23 (tight) | -0.39px | `"calt"` |
+| Feature Title | Inter | 22px (1.38rem) | 600 | 1.25 (tight) | -0.396px | `"calt"` |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44 | 0.18px | `"calt"` |
+| Body Semibold | Inter | 18px (1.13rem) | 600 | 1.44 | -0.108px | `"calt"` |
+| Button | Inter | 18px–22px | 600 | 1.00–1.44 | -0.108px | `"calt"` |
+| Caption | Inter | 14px (0.88rem) | 400–600 | 1.50–1.86 | -0.084px to -0.108px | `"calt"` |
+| Small | Inter | 12px (0.75rem) | 400–600 | 1.00–2.17 | -0.084px to -0.108px | `"calt"` |
+
+### Principles
+- **Weight 900 as identity**: Wise Sans Black (900) is used exclusively for display — the heaviest weight in any analyzed system. It creates text that feels stamped, pressed, physical.
+- **0.85 line-height**: The tightest display line-height analyzed. Letters overlap vertically, creating dense, billboard-like text blocks.
+- **"calt" everywhere**: Contextual alternates enabled on ALL text — both Wise Sans and Inter.
+- **Weight 600 as body default**: Inter Semibold is the standard reading weight — confident, not light.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Green Pill**
+- Background: `#9fe870` (Wise Green)
+- Text: `#163300` (Dark Green)
+- Padding: 5px 16px
+- Radius: 9999px
+- Hover: scale(1.05) — button physically grows
+- Active: scale(0.95) — button compresses
+- Focus: inset ring + outline
+
+**Secondary Subtle Pill**
+- Background: `rgba(22, 51, 0, 0.08)` (dark green at 8% opacity)
+- Text: `#0e0f0c`
+- Padding: 8px 12px 8px 16px
+- Radius: 9999px
+- Same scale hover/active behavior
+
+### Cards & Containers
+- Radius: 16px (small), 30px (medium), 40px (large cards/tables)
+- Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870` (green accent)
+- Shadow: `rgba(14,15,12,0.12) 0px 0px 0px 1px` (ring shadow)
+
+### Navigation
+- Green-tinted navigation hover: `rgba(211,242,192,0.4)`
+- Clean header with Wise wordmark
+- Pill CTAs right-aligned
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 11px, 12px, 16px, 18px, 19px, 20px, 22px, 24px
+
+### Border Radius Scale
+- Minimal (2px): Links, inputs
+- Standard (10px): Comboboxes, inputs
+- Card (16px): Small cards, buttons, radio
+- Medium (20px): Links, medium cards
+- Large (30px): Feature cards
+- Section (40px): Tables, large cards
+- Mega (1000px): Presentation elements
+- Pill (9999px): All buttons, images
+- Circle (50%): Icons, badges
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default |
+| Ring (Level 1) | `rgba(14,15,12,0.12) 0px 0px 0px 1px` | Card borders |
+| Inset (Level 2) | `rgb(134,134,133) 0px 0px 0px 1px inset` | Input focus |
+
+**Shadow Philosophy**: Wise uses minimal shadows — ring shadows only. Depth comes from the bold green accent against the neutral canvas.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Wise Sans weight 900 for display — the extreme boldness IS the brand
+- Apply line-height 0.85 on Wise Sans display — ultra-tight is intentional
+- Use Lime Green (#9fe870) for primary CTAs with Dark Green (#163300) text
+- Apply scale(1.05) hover and scale(0.95) active on buttons
+- Enable "calt" on all text
+- Use Inter weight 600 as the body default
+
+### Don't
+- Don't use light font weights for Wise Sans — only 900
+- Don't relax the 0.85 line-height on display — the density is the identity
+- Don't use the Wise Green as background for large surfaces — it's for buttons and accents
+- Don't skip the scale animation on buttons
+- Don't use traditional shadows — ring shadows only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <576px | Single column |
+| Tablet | 576–992px | 2-column |
+| Desktop | 992–1440px | Full layout |
+| Large | >1440px | Expanded |
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Text: Near Black (`#0e0f0c`)
+- Background: White (`#ffffff` / off-white)
+- Accent: Wise Green (`#9fe870`)
+- Button text: Dark Green (`#163300`)
+- Secondary: Gray (`#868685`)
+
+### Example Component Prompts
+- "Create hero: white background. Headline at 96px Wise Sans weight 900, line-height 0.85, 'calt' enabled, #0e0f0c text. Green pill CTA (#9fe870, 9999px radius, 5px 16px padding, #163300 text). Hover: scale(1.05)."
+- "Build a card: 30px radius, 1px solid rgba(14,15,12,0.12). Title at 22px Inter weight 600, body at 18px weight 400."
+
+### Iteration Guide
+1. Wise Sans 900 at 0.85 line-height — the extreme weight IS the brand
+2. Lime Green for buttons only — dark green text on green background
+3. Scale animations (1.05 hover, 0.95 active) on all interactive elements
+4. "calt" on everything — contextual alternates are mandatory
+5. Inter 600 for body — confident reading weight

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

@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Wise — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/wise. Spring-green CTAs on warm-neutral
+        canvas, billboard Wise Sans at 0.85 line-height, pill buttons, ring-only shadows."
+    />
+
+    <style>
+      :root {
+        --bg: #ffffff;
+        --surface: #e8ebe6;
+        --surface-warm: var(--surface);
+
+        --fg: #0e0f0c;
+        --fg-2: var(--fg);
+        --muted: #868685;
+        --meta: var(--muted);
+
+        --border: rgba(14, 15, 12, 0.12);
+        --border-soft: var(--border);
+
+        --accent: #9fe870;
+        --accent-on: #163300;
+        --accent-hover: #cdffad;
+        --accent-active: color-mix(in oklab, var(--accent), black 12%);
+
+        --success: #054d28;
+        --warn: #ffd11a;
+        --danger: #d03238;
+
+        --font-display: "Wise Sans", Inter, ui-sans-serif, system-ui, sans-serif;
+        --font-body: Inter, Helvetica, Arial, ui-sans-serif, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+        --text-xs: 12px;
+        --text-sm: 14px;
+        --text-base: 18px;
+        --text-lg: 22px;
+        --text-xl: 26px;
+        --text-2xl: 40px;
+        --text-3xl: 64px;
+        --text-4xl: 96px;
+
+        --leading-body: 1.44;
+        --leading-tight: 0.85;
+        --tracking-display: normal;
+
+        --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: 80px;
+        --section-y-tablet: 48px;
+        --section-y-phone: 32px;
+
+        --radius-sm: 16px;
+        --radius-md: 30px;
+        --radius-lg: 40px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 0 0 0 1px var(--border), 0 2px 8px rgba(14, 15, 12, 0.04);
+
+        --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 60%);
+
+        --motion-fast: 150ms;
+        --motion-base: 200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max: 1280px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet: 16px;
+        --container-gutter-phone: 12px;
+      }
+
+      /* ─── Reset ─────────────────────────────────────────────── */
+      *, *::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: 600;                       /* Inter 600 as body default — DESIGN.md §3 */
+        font-feature-settings: "calt" 1;        /* "calt" on everything */
+        -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); }
+      @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 — Wise Sans 900 at 0.85, "calt" everywhere ─ */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 900;                       /* Wise Sans Black — the brand identity */
+        line-height: var(--leading-tight);
+        letter-spacing: var(--tracking-display);
+        font-feature-settings: "calt" 1;
+        margin: 0;
+        color: var(--fg);
+      }
+      h1 { font-size: var(--text-4xl); }
+      h2 { font-size: var(--text-3xl); }
+      h3 { font-size: var(--text-xl); letter-spacing: -0.015em; line-height: 1.23; }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        color: var(--fg);
+        line-height: var(--leading-body);
+        font-weight: 600;
+      }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      .eyebrow {
+        font-size: var(--text-sm);
+        color: var(--muted);
+        font-weight: 600;
+        letter-spacing: -0.006em;
+      }
+      .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 — pill, green-on-green, scale(1.05) hover ─── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 12px 22px;
+        border-radius: var(--radius-pill);      /* 9999px — all buttons are pills */
+        font-family: var(--font-body);
+        font-size: var(--text-lg);
+        font-weight: 600;                       /* Inter 600 — confident, not light */
+        line-height: 1;
+        cursor: pointer;
+        border: none;
+        font-feature-settings: "calt" 1;
+        letter-spacing: -0.006em;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    transform var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:hover { transform: scale(1.05); }    /* DESIGN.md §4 — buttons physically grow */
+      .btn:active { transform: scale(0.95); }   /* DESIGN.md §4 — compresses on press */
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      /* Primary: Wise Green pill with Dark Green text — the signature CTA */
+      .btn-primary {
+        background: var(--accent);
+        color: var(--accent-on);
+      }
+      .btn-primary:hover { background: var(--accent-hover); }
+      .btn-primary:active { background: var(--accent-active); }
+      /* Secondary: subtle dark-green tint pill */
+      .btn-secondary {
+        background: rgba(22, 51, 0, 0.08);      /* DESIGN.md §4 — dark green at 8% */
+        color: var(--fg);
+      }
+      .btn-secondary:hover { background: rgba(22, 51, 0, 0.14); }
+
+      /* ─── Inputs — pill borders, ring focus ──────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 600; }
+      .field input {
+        padding: 14px 18px;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        font-weight: 600;
+        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: var(--accent-on);
+        box-shadow: var(--focus-ring);
+      }
+      .field input::placeholder { color: var(--muted); font-weight: 400; }
+      .field-help { font-size: var(--text-xs); color: var(--muted); }
+
+      /* ─── Cards — 30px radius, ring elevation only ──────────── */
+      .card {
+        background: var(--bg);
+        border-radius: var(--radius-md);        /* 30px — Wise's medium feature radius */
+        padding: var(--space-8);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        box-shadow: var(--elev-ring);           /* Ring shadow only — DESIGN.md §6 */
+      }
+      .card-accent {
+        background: var(--surface);
+        border-radius: var(--radius-md);
+        padding: var(--space-8);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+      }
+
+      /* ─── Badges ────────────────────────────────────────────── */
+      .badge {
+        display: inline-flex; align-items: center; gap: var(--space-2);
+        padding: 4px var(--space-3);
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
+      }
+      .badge-success {
+        color: var(--success);
+        background: #e2f6d5;                    /* Light Mint surface — DESIGN.md §2 */
+      }
+      .badge-muted { color: var(--muted); background: var(--surface); }
+      .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+
+      /* ─── Links ─────────────────────────────────────────────── */
+      a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
+      a:hover { color: var(--accent-on); text-decoration-color: var(--accent); }
+      kbd {
+        font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400;
+        padding: 2px 6px; border-radius: var(--radius-sm);
+        border: 1px solid var(--border); background: var(--surface); color: var(--muted);
+      }
+
+      /* ─── Layout helpers ────────────────────────────────────── */
+      .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: end; }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
+      .hero-meta {
+        display: flex; flex-direction: column; gap: var(--space-3);
+        padding: var(--space-6); border: 1px solid var(--border);
+        border-radius: var(--radius-md); background: var(--surface);
+      }
+      .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: 460px; }
+      .form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); }
+      .icon { width: 18px; height: 18px; flex-shrink: 0; }
+      .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+
+      /* Hero headline gets the most extreme Wise treatment */
+      .hero-headline { max-width: 14ch; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-6">
+            <p class="eyebrow">Reference fixture · wise</p>
+            <h1 class="hero-headline">The international account for everyone.</h1>
+            <p class="lead" style="max-width: 50ch">
+              Hold 40+ currencies, send money across borders at the real exchange
+              rate, and get paid like a local — no hidden fees, no fine print.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">
+                Open an account
+                <svg class="icon" viewBox="0 0 24 24" fill="none"
+                  stroke="currentColor" stroke-width="2"
+                  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 spec</a>
+            </div>
+          </div>
+          <aside class="hero-meta" aria-label="Transfer status">
+            <div class="row-between">
+              <span class="body-sm">Transfer status</span>
+              <span class="badge badge-success">
+                <span class="badge-dot" aria-hidden="true"></span>
+                On its way
+              </span>
+            </div>
+            <p class="body-sm body-muted">Last reviewed <time datetime="2026-05-15">2026-05-15</time> · v1.0</p>
+            <p class="body-sm body-muted">Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.</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: 18ch">Money without borders, by design.</h2>
+        </div>
+        <div class="features-grid" style="margin-block-start: var(--space-8)">
+          <article class="card">
+            <h3>Green-on-green CTAs</h3>
+            <p class="body-muted">
+              --accent (#9fe870) paired with --accent-on (#163300) — dark green text
+              on lime green is the Wise signature, not white. Pill radius 9999px.
+            </p>
+            <a href="./tokens.css">Inspect tokens →</a>
+          </article>
+          <article class="card-accent">
+            <h3>Billboard Wise Sans 900</h3>
+            <p class="body-muted">
+              Display headlines run at weight 900 with line-height 0.85 — letters
+              overlap vertically, creating dense text blocks that read like signage.
+            </p>
+            <a href="./DESIGN.md">Read the rule →</a>
+          </article>
+          <article class="card">
+            <h3>Ring-only elevation</h3>
+            <p class="body-muted">
+              --elev-ring (0 0 0 1px rgba(14,15,12,0.12)) is the only depth treatment.
+              No drop shadows; the green accent provides all the visual lift needed.
+            </p>
+            <a href="./tokens.css">Inspect elevation →</a>
+          </article>
+        </div>
+      </section>
+
+      <section data-od-id="form">
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Sign up in seconds.</h2>
+            <p class="body-muted" style="max-width: 46ch">
+              Inputs sit on the white canvas with hairline ring borders. Focus pulls a
+              green-tinted ring (--focus-ring) and snaps the border to dark green —
+              the same brand family, never a competing color.
+            </p>
+          </div>
+          <form class="form" onsubmit="event.preventDefault();">
+            <div class="field">
+              <label for="email">Email address</label>
+              <input id="email" type="email" placeholder="you@example.com" autocomplete="email" required />
+              <p class="field-help">We'll send your account confirmation here.</p>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">Get started</button>
+              <button type="button" class="btn btn-secondary">Learn more</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>