diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 6735bbb..246207d 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -105,6 +105,12 @@ jobs:
       - name: Check the example manifest
         run: npm run examples:check
 
+      # Fails when a generated copy of the palette (the landing page's and the
+      # docs' tokens, the social cards, the Flutter demos, the logos) no longer
+      # matches palette.json; `npm run palette:generate` rewrites them.
+      - name: Check the palette
+        run: npm run palette:check
+
       - name: Generate the example sources
         run: npm run examples:generate
 
@@ -128,6 +134,14 @@ jobs:
         run: dart pub get
         working-directory: landing
 
+      # The components declare part files holding their class-name scopes, and
+      # main.server.dart imports the options jaspr_builder writes from the
+      # `@css` getters. Both are gitignored, so both have to exist before
+      # analysis.
+      - name: Generate the landing page's part files
+        run: dart run build_runner build --delete-conflicting-outputs
+        working-directory: landing
+
       - name: Analyze the landing page
         run: dart analyze --fatal-infos
         working-directory: landing
diff --git a/docs_app/.prettierignore b/docs_app/.prettierignore
index c895d6c..bc90e49 100644
--- a/docs_app/.prettierignore
+++ b/docs_app/.prettierignore
@@ -14,6 +14,9 @@ flutter/
 # Build output and codegen.
 public/flutter-examples/
 lib/flutter-examples/manifest.generated.ts
+# The palette, written by `npm run palette:generate` from palette.json.
+app/af-tokens.css
+lib/palette.generated.ts
 # The landing page, built by Jaspr in ../landing and copied here.
 public/index.html
 public/landing.*
diff --git a/docs_app/README.md b/docs_app/README.md
index 28eb6d5..c63087e 100644
--- a/docs_app/README.md
+++ b/docs_app/README.md
@@ -7,10 +7,9 @@ AI-Provenance:
 # advanced-forms-docs
 
 The documentation site for `advanced_forms`, under `/docs`: built with [Fumadocs](https://fumadocs.dev) on Next.js,
-styled after the LeanCode design system used on [ciach.leancode.co](https://ciach.leancode.co), and running its own code
-examples in Flutter, in the browser. The landing page at `/` is a separate static site written in
-[Jaspr](https://jaspr.site), in the repo-root `landing/` folder; this app serves its build output from `public/`, so the
-two ship as one deployment on one domain.
+styled after the LeanCode design system, and running its own code examples in Flutter, in the browser. The landing page
+at `/` is a separate static site written in [Jaspr](https://jaspr.site), in the repo-root `landing/` folder; this app
+serves its build output from `public/`, so the two ship as one deployment on one domain.
 
 MDX for the docs lives in the repo-root `docs/` folder; the landing page's live demos live in `content/landing/`. From
 this directory:
@@ -25,17 +24,18 @@ changes; `npm run dev` without it serves the docs and 404s on `/`.
 
 ## Layout
 
-| Path                                 | What lives there                                                                                                       |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| `../docs/*.mdx`, `../docs/meta.json` | The documentation pages and their order. Section separators are `---Name---` entries in `meta.json`.                   |
-| `content/landing/*.mdx`              | The landing page's live demos: the Dart the Jaspr site shows and compiles, written like any docs example.              |
-| `../landing/`                        | The landing page, a Jaspr static site. `scripts/landing.mjs` builds it and copies the result into `public/`.           |
-| `app/docs/`                          | The notebook layout and the page renderer for `/docs/*`.                                                               |
-| `app/global.css`                     | The design system: tokens (`--af-*`), the Fumadocs variables they map onto, the example frame.                         |
-| `lib/shared.ts`                      | Routes, external URLs, site copy.                                                                                      |
-| `lib/layout.shared.tsx`              | The header: logo (`components/nav-title.tsx`, a plain link to the landing page), links, GitHub.                        |
-| `components/mdx.tsx`                 | The components MDX can use: Fumadocs' set, plus `Tabs`, `Steps`, `Accordions`, `TypeTable` and `AdvancedFormsExample`. |
-| `app/og/`                            | Branded Open Graph images, one per docs page.                                                                          |
+| Path                                  | What lives there                                                                                                                |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `../docs/*.mdx`, `../docs/meta.json`  | The documentation pages and their order. Section separators are `---Name---` entries in `meta.json`.                            |
+| `content/landing/*.mdx`               | The landing page's live demos: the Dart the Jaspr site shows and compiles, written like any docs example.                       |
+| `../landing/`                         | The landing page, a Jaspr static site. `scripts/landing.mjs` builds it and copies the result into `public/`.                    |
+| `app/docs/`                           | The notebook layout and the page renderer for `/docs/*`.                                                                        |
+| `palette.json`, `scripts/palette.mjs` | The palette — the LeanCode swatches and the light and dark `--af-*` tokens — and the generator that writes every copy of it.    |
+| `app/global.css`                      | The stylesheet: the Fumadocs variables mapped onto the `--af-*` tokens (generated into `app/af-tokens.css`), the example frame. |
+| `lib/shared.ts`                       | Routes, external URLs, site copy.                                                                                               |
+| `lib/layout.shared.tsx`               | The header: logo (`components/nav-title.tsx`, a plain link to the landing page), links, GitHub.                                 |
+| `components/mdx.tsx`                  | The components MDX can use: Fumadocs' set, plus `Tabs`, `Steps`, `Accordions`, `TypeTable` and `AdvancedFormsExample`.          |
+| `app/og/`                             | Branded Open Graph images, one per docs page.                                                                                   |
 
 ## Live Flutter examples
 
@@ -134,14 +134,19 @@ debug asset server sends no CORS headers, unlike the release one.
 
 ## Design
 
-The stylesheet is hand-written on top of the Fumadocs preset. Tokens are CSS custom properties prefixed `--af-` at the
-top of `app/global.css` — the ciach palette: `#050505` ground, `#101013` surfaces, `#edff2f` accent, Space Grotesk and
-JetBrains Mono — and the `--color-fd-*` variables Fumadocs paints with are re-pointed at them. Dark is the design and
-the default; light is a paper variant where the accent is a fill with dark ink on it, the way leancode.co does it.
-
-Code blocks and live examples share one window frame: a title bar with three dots (the first one lime), a mono title,
-and the content below. The landing page in `../landing/web/landing.css` uses the same tokens and the same frame, so the
-homepage and the docs read as one site — change a colour in one place and mirror it in the other.
+The colors are the LeanCode design system — black ground, warm surfaces, one CTA yellow `#f0ff00` — and live in one
+place, `palette.json`: the swatches as the design system names them, and the light and dark themes as `--af-*` tokens
+built from them. `npm run palette:generate` writes every copy a consumer needs (`app/af-tokens.css` for this stylesheet,
+`lib/palette.generated.ts` for the social cards and the logo, `flutter/lib/support/palette.generated.dart` for the live
+demos, `../landing/lib/palette.generated.dart` for the landing page, which writes its own `--af-*` variables from it)
+and recolors the shapes marked `data-palette` in the logo and icon SVGs; `npm run palette:check` fails CI when they
+drift. The stylesheet is hand-written on top of the Fumadocs preset, with the `--color-fd-*` variables Fumadocs paints
+with pointed at the tokens. Space Grotesk and JetBrains Mono. Dark is the design and the default; light is a paper
+variant where the accent is a fill with black ink on it, the way leancode.co does it.
+
+Code blocks and live examples share one window frame: a title bar with three dots (the first one yellow), a mono title,
+and the content below. The landing page (`../landing/lib/styles.dart` writes the tokens from the generated palette, the
+components style the frame) uses the same tokens and the same frame, so the homepage and the docs read as one site.
 
 ## Deployment
 
diff --git a/docs_app/app/af-tokens.css b/docs_app/app/af-tokens.css
new file mode 100644
index 0000000..12761db
--- /dev/null
+++ b/docs_app/app/af-tokens.css
@@ -0,0 +1,82 @@
+/* Generated by docs_app/scripts/palette.mjs from docs_app/palette.json — do not edit. Run `npm run palette:generate` in docs_app after changing the palette. */
+
+:root {
+  /* Page background. */
+  --af-bg: #ffffff;
+
+  /* Section background: footer, code panels. */
+  --af-bg-2: #f7f7f5;
+
+  /* Cards and frames. */
+  --af-surface: #ffffff;
+
+  /* Bars and chips on a surface. */
+  --af-surface-2: #f2f2ef;
+
+  /* The hairline. */
+  --af-border: #e5e5e5;
+
+  /* The stronger hairline, for controls. */
+  --af-border-2: #cfcfcb;
+
+  /* Headings and primary text. */
+  --af-text: #000000;
+
+  /* Body copy. */
+  --af-text-2: #3f3f3c;
+
+  /* Captions and metadata. */
+  --af-muted: #6f6f6f;
+
+  /* The CTA yellow, as a fill. */
+  --af-accent: #f0ff00;
+
+  /* Text on the accent. */
+  --af-accent-ink: #000000;
+
+  /* The accent as text. */
+  --af-accent-text: #606a00;
+
+  /* The primary button's hover fill. */
+  --af-accent-hover: #f5ff4d;
+
+  /* The accent as a wash behind icons, pills and glows. */
+  --af-accent-soft: rgba(240, 255, 0, 0.45);
+
+  /* The docs' primary action fill. */
+  --af-primary: #000000;
+
+  /* Text on the primary fill. */
+  --af-primary-ink: #f0ff00;
+
+  /* The scrim behind dialogs. */
+  --af-overlay: rgba(0, 0, 0, 0.3);
+
+  /* Error signal. */
+  --af-danger: #be2119;
+
+  /* Success signal. */
+  --af-ok: #527b28;
+}
+
+.dark {
+  --af-bg: #000000;
+  --af-bg-2: #0a0a08;
+  --af-surface: #151513;
+  --af-surface-2: #1d1d1a;
+  --af-border: rgba(255, 255, 255, 0.12);
+  --af-border-2: rgba(255, 255, 255, 0.2);
+  --af-text: #ffffff;
+  --af-text-2: #d8d8d4;
+  --af-muted: #a3a3a0;
+  --af-accent: #f0ff00;
+  --af-accent-ink: #000000;
+  --af-accent-text: #f0ff00;
+  --af-accent-hover: #f5ff4d;
+  --af-accent-soft: rgba(240, 255, 0, 0.06);
+  --af-primary: #f0ff00;
+  --af-primary-ink: #000000;
+  --af-overlay: rgba(0, 0, 0, 0.6);
+  --af-danger: #e64239;
+  --af-ok: #80c340;
+}
diff --git a/docs_app/app/global.css b/docs_app/app/global.css
index e958534..63ab357 100644
--- a/docs_app/app/global.css
+++ b/docs_app/app/global.css
@@ -3,35 +3,20 @@
  *   model: Claude Fable 5.1
  *   harness: Claude Code
  *
- * The LeanCode design system as used on ciach.leancode.co — near-black
- * surfaces, one lime accent, Space Grotesk and JetBrains Mono — mapped onto
- * the variables Fumadocs paints with. Dark is the design; light is a paper
- * variant that keeps the same accent as a fill (black ink on lime), the way
- * leancode.co does it.
+ * The LeanCode design system — black surfaces, one CTA yellow, Space Grotesk
+ * and JetBrains Mono — mapped onto the variables Fumadocs paints with. Dark is
+ * the design; light is a paper variant that keeps the same accent as a fill
+ * (black ink on yellow), the way leancode.co does it. The colors themselves
+ * are the `--af-*` variables of af-tokens.css, generated from ../palette.json
+ * and shared with the landing page; this file holds everything else.
  */
 @import "tailwindcss";
 @import "fumadocs-ui/css/preset.css";
+@import "./af-tokens.css";
 
 /* ---------- Tokens ---------- */
 
 :root {
-  --af-bg: #f6f6f2;
-  --af-bg-2: #ffffff;
-  --af-surface: #ffffff;
-  --af-surface-2: #efefe9;
-  --af-border: #e2e2dc;
-  --af-border-2: #cfcfc7;
-  --af-text: #0b0b0d;
-  --af-text-2: #4b4b52;
-  --af-muted: #7d7d84;
-  --af-accent: #edff2f;
-  --af-accent-2: #c9dc00;
-  --af-accent-ink: #0b0c00;
-  /* Accent used *as text* on a light ground has to be darker to read. */
-  --af-accent-text: #5f6e00;
-  --af-accent-soft: rgba(237, 255, 47, 0.45);
-  --af-danger: #d93636;
-  --af-ok: #1f9d55;
   --af-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.25);
   --af-radius: 14px;
   --af-radius-sm: 8px;
@@ -40,78 +25,43 @@
 }
 
 .dark {
-  --af-bg: #050505;
-  --af-bg-2: #0b0b0d;
-  --af-surface: #101013;
-  --af-surface-2: #16161b;
-  --af-border: #23232b;
-  --af-border-2: #33333e;
-  --af-text: #f4f4f1;
-  --af-text-2: #b7b7b3;
-  --af-muted: #7d7d84;
-  --af-accent: #edff2f;
-  --af-accent-2: #c9dc00;
-  --af-accent-ink: #0b0c00;
-  --af-accent-text: #edff2f;
-  --af-accent-soft: rgba(237, 255, 47, 0.12);
-  --af-danger: #ff5d5d;
-  --af-ok: #58e08a;
   --af-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.9);
 }
 
-/* Fumadocs paints with these. Light values in @theme so Tailwind emits the
-   utilities; the dark block re-points the same variables. */
-@theme {
-  --color-fd-background: #f6f6f2;
-  --color-fd-foreground: #0b0b0d;
-  --color-fd-muted: #efefe9;
-  --color-fd-muted-foreground: #55555c;
-  --color-fd-popover: #ffffff;
-  --color-fd-popover-foreground: #0b0b0d;
-  --color-fd-card: #ffffff;
-  --color-fd-card-foreground: #0b0b0d;
-  --color-fd-border: #e2e2dc;
-  --color-fd-primary: #0b0b0d;
-  --color-fd-primary-foreground: #edff2f;
-  --color-fd-secondary: #efefe9;
-  --color-fd-secondary-foreground: #0b0b0d;
-  --color-fd-accent: rgba(11, 11, 13, 0.06);
-  --color-fd-accent-foreground: #0b0b0d;
-  --color-fd-ring: #0b0b0d;
-  --color-fd-overlay: rgba(0, 0, 0, 0.3);
-}
-
-.dark {
-  --color-fd-background: #050505;
-  --color-fd-foreground: #f4f4f1;
-  --color-fd-muted: #16161b;
-  --color-fd-muted-foreground: #a8a8a4;
-  --color-fd-popover: #101013;
-  --color-fd-popover-foreground: #f4f4f1;
-  --color-fd-card: #101013;
-  --color-fd-card-foreground: #f4f4f1;
-  --color-fd-border: #23232b;
-  --color-fd-primary: #edff2f;
-  --color-fd-primary-foreground: #0b0c00;
-  --color-fd-secondary: #16161b;
-  --color-fd-secondary-foreground: #f4f4f1;
-  --color-fd-accent: rgba(255, 255, 255, 0.06);
-  --color-fd-accent-foreground: #f4f4f1;
-  --color-fd-ring: #edff2f;
-  --color-fd-overlay: rgba(0, 0, 0, 0.6);
-}
-
-@theme static {
+/* Fumadocs paints with these. Inline, so the utilities point at the `--af-*`
+   variables and follow the theme with them; no dark block needed. */
+@theme inline {
+  --color-fd-background: var(--af-bg);
+  --color-fd-foreground: var(--af-text);
+  --color-fd-muted: var(--af-surface-2);
+  --color-fd-muted-foreground: var(--af-muted);
+  --color-fd-popover: var(--af-surface);
+  --color-fd-popover-foreground: var(--af-text);
+  --color-fd-card: var(--af-surface);
+  --color-fd-card-foreground: var(--af-text);
+  --color-fd-border: var(--af-border);
+  --color-fd-primary: var(--af-primary);
+  --color-fd-primary-foreground: var(--af-primary-ink);
+  --color-fd-secondary: var(--af-surface-2);
+  --color-fd-secondary-foreground: var(--af-text);
+  --color-fd-accent: color-mix(in srgb, var(--af-text) 6%, transparent);
+  --color-fd-accent-foreground: var(--af-text);
+  --color-fd-ring: var(--af-primary);
+  --color-fd-overlay: var(--af-overlay);
+}
+
+@theme inline static {
+  /* Info and warning are the code palette's blue and amber, not brand colors. */
   --color-fd-info: #82aaff;
   --color-fd-warning: #ffcb6b;
-  --color-fd-error: #ff5d5d;
-  --color-fd-success: #58e08a;
-  --color-fd-idea: #edff2f;
+  --color-fd-error: var(--af-danger);
+  --color-fd-success: var(--af-ok);
+  --color-fd-idea: var(--af-accent);
   /* Diff markers in code blocks; the preset's Shiki styles apply these. */
-  --color-fd-diff-remove: rgba(255, 93, 93, 0.12);
-  --color-fd-diff-remove-symbol: #ff5d5d;
-  --color-fd-diff-add: rgba(88, 224, 138, 0.12);
-  --color-fd-diff-add-symbol: #58e08a;
+  --color-fd-diff-remove: color-mix(in srgb, var(--af-danger) 12%, transparent);
+  --color-fd-diff-remove-symbol: var(--af-danger);
+  --color-fd-diff-add: color-mix(in srgb, var(--af-ok) 12%, transparent);
+  --color-fd-diff-add-symbol: var(--af-ok);
 }
 
 @theme inline {
@@ -247,7 +197,7 @@ kbd {
   content: none;
 }
 
-/* ---------- Code blocks: the ciach window frame ---------- */
+/* ---------- Code blocks: the window frame ---------- */
 
 .prose figure.shiki,
 .af-landing figure.shiki {
diff --git a/docs_app/app/icon.svg b/docs_app/app/icon.svg
index ba21bea..8c45ed3 100644
--- a/docs_app/app/icon.svg
+++ b/docs_app/app/icon.svg
@@ -2,6 +2,6 @@
   <rect x="107.2" y="50.3" width="372" height="372" rx="72" fill="black"/>
   <rect x="266.423" y="183.133" width="147.277" height="42.2665" rx="21.1333" transform="rotate(120 266.423 183.133)" fill="white"/>
   <rect width="142.634" height="42.2727" rx="21.1364" transform="matrix(0.5 0.866025 0.866025 -0.5 209.527 183.354)" fill="white"/>
-  <rect x="282.922" y="171.48" width="147.351" height="31.4026" rx="15.7013" fill="#F9FF07"/>
-  <rect x="317.948" y="221" width="112.325" height="31.4026" rx="15.7013" fill="#F9FF07"/>
+  <rect x="282.922" y="171.48" width="147.351" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
+  <rect x="317.948" y="221" width="112.325" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
 </svg>
diff --git a/docs_app/app/og/[...slug]/route.tsx b/docs_app/app/og/[...slug]/route.tsx
index eb1fec4..24b9be7 100644
--- a/docs_app/app/og/[...slug]/route.tsx
+++ b/docs_app/app/og/[...slug]/route.tsx
@@ -7,16 +7,12 @@ import { getPageImageUrl, source } from "@/lib/source"
 import { notFound } from "next/navigation"
 import { ImageResponse } from "next/og"
 import { LogoMark } from "@/components/logo"
+import { dark, withAlpha } from "@/lib/palette"
 import { appName } from "@/lib/shared"
 
 export const revalidate = false
 
-const ink = "#050505"
-const surface = "#101013"
-const border = "#23232b"
-const text = "#f4f4f1"
-const muted = "#b7b7b3"
-const accent = "#edff2f"
+const { bg: ink, surface, border, text, muted, accent } = dark
 
 export async function GET(_req: Request, { params }: RouteContext<"/og/[...slug]">) {
   const { slug } = await params
@@ -32,7 +28,7 @@ export async function GET(_req: Request, { params }: RouteContext<"/og/[...slug]
         flexDirection: "column",
         justifyContent: "space-between",
         padding: 64,
-        background: `radial-gradient(60% 50% at 85% 10%, rgba(237, 255, 47, 0.18), transparent 65%), ${ink}`,
+        background: `radial-gradient(60% 50% at 85% 10%, ${withAlpha(accent, 0.18)}, transparent 65%), ${ink}`,
         color: text,
         fontFamily: "sans-serif",
       }}>
diff --git a/docs_app/app/og/landing.png/route.tsx b/docs_app/app/og/landing.png/route.tsx
index ff178dd..5094dd2 100644
--- a/docs_app/app/og/landing.png/route.tsx
+++ b/docs_app/app/og/landing.png/route.tsx
@@ -5,6 +5,7 @@
  */
 import { ImageResponse } from "next/og"
 import { LogoMark } from "@/components/logo"
+import { dark, withAlpha } from "@/lib/palette"
 import { appName, description } from "@/lib/shared"
 
 /**
@@ -14,12 +15,7 @@ import { appName, description } from "@/lib/shared"
  */
 export const dynamic = "force-static"
 
-const ink = "#050505"
-const surface = "#101013"
-const border = "#23232b"
-const text = "#f4f4f1"
-const muted = "#b7b7b3"
-const accent = "#edff2f"
+const { bg: ink, surface, border, text, muted, accent } = dark
 
 export function GET() {
   return new ImageResponse(
@@ -31,7 +27,7 @@ export function GET() {
         flexDirection: "column",
         justifyContent: "space-between",
         padding: 64,
-        background: `radial-gradient(60% 50% at 85% 10%, rgba(237, 255, 47, 0.18), transparent 65%), ${ink}`,
+        background: `radial-gradient(60% 50% at 85% 10%, ${withAlpha(accent, 0.18)}, transparent 65%), ${ink}`,
         color: text,
         fontFamily: "sans-serif",
       }}>
diff --git a/docs_app/components/logo.tsx b/docs_app/components/logo.tsx
index a7ad58a..0968d0f 100644
--- a/docs_app/components/logo.tsx
+++ b/docs_app/components/logo.tsx
@@ -5,6 +5,7 @@
  */
 import logoDark from "@/public/logo-dark.svg"
 import logoLight from "@/public/logo-light.svg"
+import { swatches } from "@/lib/palette"
 import { appName } from "@/lib/shared"
 import { cn } from "@/lib/cn"
 
@@ -48,8 +49,8 @@ export function LogoMark({ size = 56 }: { size?: number }) {
         transform="matrix(0.5 0.866025 0.866025 -0.5 209.527 183.354)"
         fill="white"
       />
-      <rect x="282.922" y="171.48" width="147.351" height="31.4026" rx="15.7013" fill="#F9FF07" />
-      <rect x="317.948" y="221" width="112.325" height="31.4026" rx="15.7013" fill="#F9FF07" />
+      <rect x="282.922" y="171.48" width="147.351" height="31.4026" rx="15.7013" fill={swatches.ctaYellow} />
+      <rect x="317.948" y="221" width="112.325" height="31.4026" rx="15.7013" fill={swatches.ctaYellow} />
     </svg>
   )
 }
diff --git a/docs_app/eslint.config.mjs b/docs_app/eslint.config.mjs
index f9c05de..72cce56 100644
--- a/docs_app/eslint.config.mjs
+++ b/docs_app/eslint.config.mjs
@@ -23,6 +23,7 @@ const config = [
       "flutter/**",
       "public/flutter-examples/**",
       "lib/flutter-examples/manifest.generated.ts",
+      "lib/palette.generated.ts",
       // The landing page, built by Jaspr in ../landing and copied here.
       "public/index.html",
       "public/landing.*",
diff --git a/docs_app/flutter/lib/support/island_frame.dart b/docs_app/flutter/lib/support/island_frame.dart
index c367fb4..2b1f8cb 100644
--- a/docs_app/flutter/lib/support/island_frame.dart
+++ b/docs_app/flutter/lib/support/island_frame.dart
@@ -5,6 +5,7 @@
  *   edited-by: Claude Fable 5.1 (Claude Code)
  */
 import 'package:advanced_forms_docs_islands/support/example_log.dart';
+import 'package:advanced_forms_docs_islands/support/palette.generated.dart';
 import 'package:flutter/material.dart';
 
 /// The part of an island that has nothing to do with the browser.
@@ -88,32 +89,36 @@ class _IslandFrameState extends State<IslandFrame> {
 
 /// The LeanCode design system, as a Material theme.
 ///
-/// The same tokens the docs page paints with: near-black surfaces, one lime
-/// accent, rounded filled inputs. In the light variant the accent becomes a
-/// fill with dark ink on it — a lime *text* would not be legible on paper.
+/// The same `--af-*` tokens the docs page paints with, from
+/// `palette.generated.dart`: black surfaces, one CTA yellow, rounded filled
+/// inputs. In the light variant the accent becomes a fill with black ink on
+/// it — a yellow *text* would not be legible on paper.
 ThemeData islandTheme(Brightness brightness) {
   final dark = brightness == Brightness.dark;
-
-  const accent = Color(0xFFEDFF2F);
-  const accentInk = Color(0xFF0B0C00);
-  final ink = dark ? const Color(0xFFF4F4F1) : const Color(0xFF0B0B0D);
-  final ink2 = dark ? const Color(0xFFB7B7B3) : const Color(0xFF4B4B52);
-  const muted = Color(0xFF7D7D84);
-  final surface = dark ? const Color(0xFF101013) : Colors.white;
-  final surface2 = dark ? const Color(0xFF16161B) : const Color(0xFFEFEFE9);
-  final border = dark ? const Color(0xFF33333E) : const Color(0xFFCFCFC7);
-  final borderSoft = dark ? const Color(0xFF23232B) : const Color(0xFFE2E2DC);
-  final danger = dark ? const Color(0xFFFF5D5D) : const Color(0xFFD93636);
-  final ok = dark ? const Color(0xFF58E08A) : const Color(0xFF1F9D55);
-
-  final primary = dark ? accent : const Color(0xFF0B0B0D);
-  final onPrimary = dark ? accentInk : accent;
+  final AfTheme(
+    :accent,
+    :accentInk,
+    :accentSoft,
+    text: ink,
+    text2: ink2,
+    :muted,
+    :surface,
+    :surface2,
+    border2: border,
+    border: borderSoft,
+    :danger,
+    :ok,
+    :primary,
+    primaryInk: onPrimary,
+  ) = dark
+      ? afDark
+      : afLight;
 
   final scheme = ColorScheme(
     brightness: brightness,
     primary: primary,
     onPrimary: onPrimary,
-    primaryContainer: accent.withValues(alpha: dark ? 0.16 : 0.45),
+    primaryContainer: accentSoft,
     onPrimaryContainer: ink,
     secondary: accent,
     onSecondary: accentInk,
@@ -137,7 +142,7 @@ ThemeData islandTheme(Brightness brightness) {
     scrim: Colors.black,
     inverseSurface: ink,
     onInverseSurface: surface,
-    inversePrimary: dark ? const Color(0xFF0B0B0D) : accent,
+    inversePrimary: (dark ? afLight : afDark).primary,
   );
 
   final rounded = RoundedRectangleBorder(
@@ -161,10 +166,10 @@ ThemeData islandTheme(Brightness brightness) {
       fillColor: surface2,
       isDense: true,
       contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 14),
-      hintStyle: const TextStyle(color: muted),
+      hintStyle: TextStyle(color: muted),
       labelStyle: TextStyle(color: ink2),
       floatingLabelStyle: TextStyle(color: primary),
-      helperStyle: const TextStyle(color: muted),
+      helperStyle: TextStyle(color: muted),
       errorStyle: TextStyle(color: danger),
       prefixIconColor: muted,
       suffixIconColor: muted,
diff --git a/docs_app/flutter/lib/support/palette.generated.dart b/docs_app/flutter/lib/support/palette.generated.dart
new file mode 100644
index 0000000..7f47af6
--- /dev/null
+++ b/docs_app/flutter/lib/support/palette.generated.dart
@@ -0,0 +1,210 @@
+// Generated by docs_app/scripts/palette.mjs from docs_app/palette.json — do
+// not edit. Run `npm run palette:generate` in docs_app after changing the
+// palette.
+
+import 'dart:ui' show Color;
+
+/// The LeanCode swatches, as `palette.json` names them, each a packed
+/// `0xRRGGBB`.
+enum Palette {
+  /// Primary surface. LeanCode is black-first; yellow is the exception.
+  black(0x000000),
+
+  /// Text and headings on black; the light document surface.
+  white(0xffffff),
+
+  /// Call to action and emphasis only. Text on it is always black.
+  ctaYellow(0xf0ff00),
+
+  /// Body copy on dark surfaces.
+  bodyGray(0xd8d8d4),
+
+  /// Secondary text, captions, metadata on dark.
+  mutedGray(0xa3a3a0),
+
+  /// Secondary text, captions, metadata on light: the design system's #757575,
+  /// a step darker so it also reads AA on paper.
+  mutedOnLight(0x6f6f6f),
+
+  /// Cards and panels on black, warm-tinted.
+  surface(0x151513),
+
+  /// A second surface step on black.
+  surface2(0x1d1d1a),
+
+  /// The 1px hairline on white.
+  lineOnLight(0xe5e5e5),
+
+  /// Error signal, sparingly.
+  error(0xe64239),
+
+  /// Success signal, sparingly.
+  success(0x80c340),
+
+  /// Site tint: a section background a step above black.
+  nearBlack(0x0a0a08),
+
+  /// Site tint: a section background a step below white.
+  paper(0xf7f7f5),
+
+  /// Site tint: a second surface step on white.
+  paper2(0xf2f2ef),
+
+  /// Site tint: body copy on light surfaces.
+  bodyOnLight(0x3f3f3c),
+
+  /// Site tint: the stronger hairline on white, for controls.
+  lineStrongOnLight(0xcfcfcb),
+
+  /// Site tint: the CTA yellow lifted, for the primary button's hover.
+  ctaYellowLight(0xf5ff4d),
+
+  /// Site tint: the CTA yellow as text on white, which yellow itself never is.
+  ctaYellowOnLight(0x606a00),
+
+  /// Site tint: the error signal as text on white.
+  errorOnLight(0xbe2119),
+
+  /// Site tint: the success signal as text on white.
+  successOnLight(0x527b28);
+
+  const Palette(this.rgb);
+
+  final int rgb;
+
+  Color get color => Color(0xff000000 | rgb);
+
+  /// `#rrggbb`.
+  String get hex => '#${rgb.toRadixString(16).padLeft(6, '0')}';
+
+  Color alpha(double alpha) => color.withValues(alpha: alpha);
+}
+
+/// The site's `--af-*` tokens for one theme, as the docs and the landing
+/// page paint them.
+class AfTheme {
+  const AfTheme({
+    required this.bg,
+    required this.bg2,
+    required this.surface,
+    required this.surface2,
+    required this.border,
+    required this.border2,
+    required this.text,
+    required this.text2,
+    required this.muted,
+    required this.accent,
+    required this.accentInk,
+    required this.accentText,
+    required this.accentHover,
+    required this.accentSoft,
+    required this.primary,
+    required this.primaryInk,
+    required this.overlay,
+    required this.danger,
+    required this.ok,
+  });
+
+  /// Page background.
+  final Color bg;
+
+  /// Section background: footer, code panels.
+  final Color bg2;
+
+  /// Cards and frames.
+  final Color surface;
+
+  /// Bars and chips on a surface.
+  final Color surface2;
+
+  /// The hairline.
+  final Color border;
+
+  /// The stronger hairline, for controls.
+  final Color border2;
+
+  /// Headings and primary text.
+  final Color text;
+
+  /// Body copy.
+  final Color text2;
+
+  /// Captions and metadata.
+  final Color muted;
+
+  /// The CTA yellow, as a fill.
+  final Color accent;
+
+  /// Text on the accent.
+  final Color accentInk;
+
+  /// The accent as text.
+  final Color accentText;
+
+  /// The primary button's hover fill.
+  final Color accentHover;
+
+  /// The accent as a wash behind icons, pills and glows.
+  final Color accentSoft;
+
+  /// The docs' primary action fill.
+  final Color primary;
+
+  /// Text on the primary fill.
+  final Color primaryInk;
+
+  /// The scrim behind dialogs.
+  final Color overlay;
+
+  /// Error signal.
+  final Color danger;
+
+  /// Success signal.
+  final Color ok;
+}
+
+/// The light theme.
+final afLight = AfTheme(
+  bg: Palette.white.color,
+  bg2: Palette.paper.color,
+  surface: Palette.white.color,
+  surface2: Palette.paper2.color,
+  border: Palette.lineOnLight.color,
+  border2: Palette.lineStrongOnLight.color,
+  text: Palette.black.color,
+  text2: Palette.bodyOnLight.color,
+  muted: Palette.mutedOnLight.color,
+  accent: Palette.ctaYellow.color,
+  accentInk: Palette.black.color,
+  accentText: Palette.ctaYellowOnLight.color,
+  accentHover: Palette.ctaYellowLight.color,
+  accentSoft: Palette.ctaYellow.alpha(0.45),
+  primary: Palette.black.color,
+  primaryInk: Palette.ctaYellow.color,
+  overlay: Palette.black.alpha(0.3),
+  danger: Palette.errorOnLight.color,
+  ok: Palette.successOnLight.color,
+);
+
+/// The dark theme.
+final afDark = AfTheme(
+  bg: Palette.black.color,
+  bg2: Palette.nearBlack.color,
+  surface: Palette.surface.color,
+  surface2: Palette.surface2.color,
+  border: Palette.white.alpha(0.12),
+  border2: Palette.white.alpha(0.2),
+  text: Palette.white.color,
+  text2: Palette.bodyGray.color,
+  muted: Palette.mutedGray.color,
+  accent: Palette.ctaYellow.color,
+  accentInk: Palette.black.color,
+  accentText: Palette.ctaYellow.color,
+  accentHover: Palette.ctaYellowLight.color,
+  accentSoft: Palette.ctaYellow.alpha(0.06),
+  primary: Palette.ctaYellow.color,
+  primaryInk: Palette.black.color,
+  overlay: Palette.black.alpha(0.6),
+  danger: Palette.error.color,
+  ok: Palette.success.color,
+);
diff --git a/docs_app/lib/palette.generated.ts b/docs_app/lib/palette.generated.ts
new file mode 100644
index 0000000..0d11156
--- /dev/null
+++ b/docs_app/lib/palette.generated.ts
@@ -0,0 +1,135 @@
+// Generated by scripts/palette.mjs from palette.json — do not edit. Run `npm run palette:generate` in docs_app after changing the palette.
+
+/** The LeanCode swatches, as `#rrggbb`. */
+export const swatches = {
+  /** Primary surface. LeanCode is black-first; yellow is the exception. */
+  black: "#000000",
+  /** Text and headings on black; the light document surface. */
+  white: "#ffffff",
+  /** Call to action and emphasis only. Text on it is always black. */
+  ctaYellow: "#f0ff00",
+  /** Body copy on dark surfaces. */
+  bodyGray: "#d8d8d4",
+  /** Secondary text, captions, metadata on dark. */
+  mutedGray: "#a3a3a0",
+  /** Secondary text, captions, metadata on light: the design system's #757575, a step darker so it also reads AA on paper. */
+  mutedOnLight: "#6f6f6f",
+  /** Cards and panels on black, warm-tinted. */
+  surface: "#151513",
+  /** A second surface step on black. */
+  surface2: "#1d1d1a",
+  /** The 1px hairline on white. */
+  lineOnLight: "#e5e5e5",
+  /** Error signal, sparingly. */
+  error: "#e64239",
+  /** Success signal, sparingly. */
+  success: "#80c340",
+  /** Site tint: a section background a step above black. */
+  nearBlack: "#0a0a08",
+  /** Site tint: a section background a step below white. */
+  paper: "#f7f7f5",
+  /** Site tint: a second surface step on white. */
+  paper2: "#f2f2ef",
+  /** Site tint: body copy on light surfaces. */
+  bodyOnLight: "#3f3f3c",
+  /** Site tint: the stronger hairline on white, for controls. */
+  lineStrongOnLight: "#cfcfcb",
+  /** Site tint: the CTA yellow lifted, for the primary button's hover. */
+  ctaYellowLight: "#f5ff4d",
+  /** Site tint: the CTA yellow as text on white, which yellow itself never is. */
+  ctaYellowOnLight: "#606a00",
+  /** Site tint: the error signal as text on white. */
+  errorOnLight: "#be2119",
+  /** Site tint: the success signal as text on white. */
+  successOnLight: "#527b28",
+} as const
+
+/** `#rrggbb` at an alpha, as `rgba()` — the one color form every renderer of ours understands. */
+export function withAlpha(hex: string, alpha: number): string {
+  const [r, g, b] = [1, 3, 5].map(i => Number.parseInt(hex.slice(i, i + 2), 16))
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+/** The site's `--af-*` tokens per theme, built from the swatches. */
+export const themes = {
+  light: {
+    /** Page background. */
+    bg: swatches.white,
+    /** Section background: footer, code panels. */
+    bg2: swatches.paper,
+    /** Cards and frames. */
+    surface: swatches.white,
+    /** Bars and chips on a surface. */
+    surface2: swatches.paper2,
+    /** The hairline. */
+    border: swatches.lineOnLight,
+    /** The stronger hairline, for controls. */
+    border2: swatches.lineStrongOnLight,
+    /** Headings and primary text. */
+    text: swatches.black,
+    /** Body copy. */
+    text2: swatches.bodyOnLight,
+    /** Captions and metadata. */
+    muted: swatches.mutedOnLight,
+    /** The CTA yellow, as a fill. */
+    accent: swatches.ctaYellow,
+    /** Text on the accent. */
+    accentInk: swatches.black,
+    /** The accent as text. */
+    accentText: swatches.ctaYellowOnLight,
+    /** The primary button's hover fill. */
+    accentHover: swatches.ctaYellowLight,
+    /** The accent as a wash behind icons, pills and glows. */
+    accentSoft: withAlpha(swatches.ctaYellow, 0.45),
+    /** The docs' primary action fill. */
+    primary: swatches.black,
+    /** Text on the primary fill. */
+    primaryInk: swatches.ctaYellow,
+    /** The scrim behind dialogs. */
+    overlay: withAlpha(swatches.black, 0.3),
+    /** Error signal. */
+    danger: swatches.errorOnLight,
+    /** Success signal. */
+    ok: swatches.successOnLight,
+  },
+  dark: {
+    /** Page background. */
+    bg: swatches.black,
+    /** Section background: footer, code panels. */
+    bg2: swatches.nearBlack,
+    /** Cards and frames. */
+    surface: swatches.surface,
+    /** Bars and chips on a surface. */
+    surface2: swatches.surface2,
+    /** The hairline. */
+    border: withAlpha(swatches.white, 0.12),
+    /** The stronger hairline, for controls. */
+    border2: withAlpha(swatches.white, 0.2),
+    /** Headings and primary text. */
+    text: swatches.white,
+    /** Body copy. */
+    text2: swatches.bodyGray,
+    /** Captions and metadata. */
+    muted: swatches.mutedGray,
+    /** The CTA yellow, as a fill. */
+    accent: swatches.ctaYellow,
+    /** Text on the accent. */
+    accentInk: swatches.black,
+    /** The accent as text. */
+    accentText: swatches.ctaYellow,
+    /** The primary button's hover fill. */
+    accentHover: swatches.ctaYellowLight,
+    /** The accent as a wash behind icons, pills and glows. */
+    accentSoft: withAlpha(swatches.ctaYellow, 0.06),
+    /** The docs' primary action fill. */
+    primary: swatches.ctaYellow,
+    /** Text on the primary fill. */
+    primaryInk: swatches.black,
+    /** The scrim behind dialogs. */
+    overlay: withAlpha(swatches.black, 0.6),
+    /** Error signal. */
+    danger: swatches.error,
+    /** Success signal. */
+    ok: swatches.success,
+  },
+} as const
diff --git a/docs_app/lib/palette.ts b/docs_app/lib/palette.ts
new file mode 100644
index 0000000..3d1c2f6
--- /dev/null
+++ b/docs_app/lib/palette.ts
@@ -0,0 +1,11 @@
+/*
+ * AI-Provenance:
+ *   model: Claude Fable 5.1
+ *   harness: Claude Code
+ */
+import { themes } from "@/lib/palette.generated"
+
+export { swatches, themes, withAlpha } from "@/lib/palette.generated"
+
+/** The dark theme: what the social cards are drawn in, whatever the reader's theme. */
+export const dark = themes.dark
diff --git a/docs_app/package.json b/docs_app/package.json
index 1301013..a8f28bc 100644
--- a/docs_app/package.json
+++ b/docs_app/package.json
@@ -18,7 +18,9 @@
     "examples:format:check": "node scripts/format-snippets.mjs --check",
     "examples:build": "node scripts/flutter-examples.mjs build",
     "examples:serve": "cd flutter && flutter run -d web-server --web-port 5333",
-    "landing:build": "node scripts/landing.mjs"
+    "landing:build": "node scripts/landing.mjs",
+    "palette:generate": "node scripts/palette.mjs generate",
+    "palette:check": "node scripts/palette.mjs check"
   },
   "dependencies": {
     "cnfast": "^0.1.0",
diff --git a/docs_app/palette.json b/docs_app/palette.json
new file mode 100644
index 0000000..c798401
--- /dev/null
+++ b/docs_app/palette.json
@@ -0,0 +1,96 @@
+{
+  "swatches": {
+    "black": { "hex": "#000000", "note": "Primary surface. LeanCode is black-first; yellow is the exception." },
+    "white": { "hex": "#ffffff", "note": "Text and headings on black; the light document surface." },
+    "ctaYellow": { "hex": "#f0ff00", "note": "Call to action and emphasis only. Text on it is always black." },
+    "bodyGray": { "hex": "#d8d8d4", "note": "Body copy on dark surfaces." },
+    "mutedGray": { "hex": "#a3a3a0", "note": "Secondary text, captions, metadata on dark." },
+    "mutedOnLight": {
+      "hex": "#6f6f6f",
+      "note": "Secondary text, captions, metadata on light: the design system's #757575, a step darker so it also reads AA on paper."
+    },
+    "surface": { "hex": "#151513", "note": "Cards and panels on black, warm-tinted." },
+    "surface2": { "hex": "#1d1d1a", "note": "A second surface step on black." },
+    "lineOnLight": { "hex": "#e5e5e5", "note": "The 1px hairline on white." },
+    "error": { "hex": "#e64239", "note": "Error signal, sparingly." },
+    "success": { "hex": "#80c340", "note": "Success signal, sparingly." },
+
+    "nearBlack": { "hex": "#0a0a08", "note": "Site tint: a section background a step above black." },
+    "paper": { "hex": "#f7f7f5", "note": "Site tint: a section background a step below white." },
+    "paper2": { "hex": "#f2f2ef", "note": "Site tint: a second surface step on white." },
+    "bodyOnLight": { "hex": "#3f3f3c", "note": "Site tint: body copy on light surfaces." },
+    "lineStrongOnLight": { "hex": "#cfcfcb", "note": "Site tint: the stronger hairline on white, for controls." },
+    "ctaYellowLight": { "hex": "#f5ff4d", "note": "Site tint: the CTA yellow lifted, for the primary button's hover." },
+    "ctaYellowOnLight": {
+      "hex": "#606a00",
+      "note": "Site tint: the CTA yellow as text on white, which yellow itself never is."
+    },
+    "errorOnLight": { "hex": "#be2119", "note": "Site tint: the error signal as text on white." },
+    "successOnLight": { "hex": "#527b28", "note": "Site tint: the success signal as text on white." }
+  },
+  "tokens": {
+    "bg": "Page background.",
+    "bg2": "Section background: footer, code panels.",
+    "surface": "Cards and frames.",
+    "surface2": "Bars and chips on a surface.",
+    "border": "The hairline.",
+    "border2": "The stronger hairline, for controls.",
+    "text": "Headings and primary text.",
+    "text2": "Body copy.",
+    "muted": "Captions and metadata.",
+    "accent": "The CTA yellow, as a fill.",
+    "accentInk": "Text on the accent.",
+    "accentText": "The accent as text.",
+    "accentHover": "The primary button's hover fill.",
+    "accentSoft": "The accent as a wash behind icons, pills and glows.",
+    "primary": "The docs' primary action fill.",
+    "primaryInk": "Text on the primary fill.",
+    "overlay": "The scrim behind dialogs.",
+    "danger": "Error signal.",
+    "ok": "Success signal."
+  },
+  "themes": {
+    "light": {
+      "bg": "white",
+      "bg2": "paper",
+      "surface": "white",
+      "surface2": "paper2",
+      "border": "lineOnLight",
+      "border2": "lineStrongOnLight",
+      "text": "black",
+      "text2": "bodyOnLight",
+      "muted": "mutedOnLight",
+      "accent": "ctaYellow",
+      "accentInk": "black",
+      "accentText": "ctaYellowOnLight",
+      "accentHover": "ctaYellowLight",
+      "accentSoft": { "of": "ctaYellow", "alpha": 0.45 },
+      "primary": "black",
+      "primaryInk": "ctaYellow",
+      "overlay": { "of": "black", "alpha": 0.3 },
+      "danger": "errorOnLight",
+      "ok": "successOnLight"
+    },
+    "dark": {
+      "bg": "black",
+      "bg2": "nearBlack",
+      "surface": "surface",
+      "surface2": "surface2",
+      "border": { "of": "white", "alpha": 0.12 },
+      "border2": { "of": "white", "alpha": 0.2 },
+      "text": "white",
+      "text2": "bodyGray",
+      "muted": "mutedGray",
+      "accent": "ctaYellow",
+      "accentInk": "black",
+      "accentText": "ctaYellow",
+      "accentHover": "ctaYellowLight",
+      "accentSoft": { "of": "ctaYellow", "alpha": 0.06 },
+      "primary": "ctaYellow",
+      "primaryInk": "black",
+      "overlay": { "of": "black", "alpha": 0.6 },
+      "danger": "error",
+      "ok": "success"
+    }
+  }
+}
diff --git a/docs_app/public/logo-dark.svg b/docs_app/public/logo-dark.svg
index ab96eb7..b532098 100644
--- a/docs_app/public/logo-dark.svg
+++ b/docs_app/public/logo-dark.svg
@@ -3,6 +3,6 @@
 <rect x="266.423" y="164.133" width="147.277" height="42.2665" rx="21.1333" transform="rotate(120 266.423 164.133)" fill="white"/>
 <rect width="142.634" height="42.2727" rx="21.1364" transform="matrix(0.5 0.866025 0.866025 -0.5 209.527 164.354)" fill="white"/>
 <path d="M627 175L681.2 35H703.2L757 175H734L702 90.6C701.6 89.6667 700.8 87.4 699.6 83.8C698.533 80.2 697.267 76.2 695.8 71.8C694.333 67.4 693 63.4 691.8 59.8C690.6 56.0667 689.8 53.6667 689.4 52.6L694 52.4C693.2 54.6667 692.2 57.5333 691 61C689.933 64.4667 688.733 68.1333 687.4 72C686.2 75.8667 685 79.5333 683.8 83C682.6 86.3333 681.6 89.1333 680.8 91.4L649 175H627ZM651 140.2L659 119.4H722.6L731.8 140.2H651ZM765.799 175V91H798.679C804.679 91 810.079 92 814.879 94C819.759 96 823.919 98.88 827.359 102.64C830.799 106.4 833.439 110.84 835.279 115.96C837.119 121.08 838.039 126.76 838.039 133C838.039 139.24 837.119 144.96 835.279 150.16C833.439 155.28 830.799 159.72 827.359 163.48C823.999 167.16 819.879 170 814.999 172C810.119 174 804.679 175 798.679 175H765.799ZM778.759 163.84L778.399 162.52H798.079C802.319 162.52 806.079 161.84 809.359 160.48C812.719 159.12 815.519 157.2 817.759 154.72C820.079 152.16 821.839 149.04 823.039 145.36C824.239 141.68 824.839 137.56 824.839 133C824.839 128.44 824.239 124.36 823.039 120.76C821.839 117.08 820.079 113.96 817.759 111.4C815.439 108.84 812.639 106.88 809.359 105.52C806.079 104.16 802.319 103.48 798.079 103.48H778.039L778.759 102.4V163.84ZM871.852 175L838.252 91H853.012L873.052 142C874.012 144.48 874.852 146.72 875.572 148.72C876.372 150.72 877.052 152.56 877.612 154.24C878.172 155.84 878.692 157.36 879.172 158.8C879.652 160.24 880.132 161.68 880.612 163.12L877.492 163.24C878.052 161.32 878.652 159.32 879.292 157.24C879.932 155.16 880.652 152.88 881.452 150.4C882.332 147.92 883.372 145.12 884.572 142L903.172 91H918.292L884.452 175H871.852ZM910.33 175L942.85 91H956.05L988.33 175H974.53L955.33 124.36C955.09 123.8 954.61 122.44 953.89 120.28C953.25 118.12 952.49 115.72 951.61 113.08C950.73 110.44 949.93 108.04 949.21 105.88C948.49 103.64 948.01 102.2 947.77 101.56L950.53 101.44C950.05 102.8 949.45 104.52 948.73 106.6C948.09 108.68 947.37 110.88 946.57 113.2C945.85 115.52 945.13 117.72 944.41 119.8C943.69 121.8 943.09 123.48 942.61 124.84L923.53 175H910.33ZM924.73 154.12L929.53 141.64H967.69L973.21 154.12H924.73ZM998.313 175V91H1009.95L1061.31 159.76L1059.39 160.84C1059.07 158.84 1058.79 156.68 1058.55 154.36C1058.31 151.96 1058.07 149.44 1057.83 146.8C1057.67 144.08 1057.51 141.24 1057.35 138.28C1057.27 135.24 1057.19 132.08 1057.11 128.8C1057.03 125.52 1056.99 122.12 1056.99 118.6V91H1069.95V175H1058.07L1007.55 108.76L1008.87 107.08C1009.27 111.96 1009.59 116.12 1009.83 119.56C1010.15 122.92 1010.39 125.8 1010.55 128.2C1010.79 130.52 1010.95 132.44 1011.03 133.96C1011.11 135.4 1011.15 136.6 1011.15 137.56C1011.23 138.52 1011.27 139.36 1011.27 140.08V175H998.313ZM1122.75 176.2C1116.91 176.2 1111.55 175.16 1106.67 173.08C1101.79 171 1097.55 168.04 1093.95 164.2C1090.35 160.28 1087.55 155.68 1085.55 150.4C1083.63 145.12 1082.67 139.32 1082.67 133C1082.67 127 1083.71 121.44 1085.79 116.32C1087.95 111.12 1090.91 106.56 1094.67 102.64C1098.43 98.72 1102.79 95.68 1107.75 93.52C1112.71 91.36 1118.07 90.28 1123.83 90.28C1127.91 90.28 1131.87 90.92 1135.71 92.2C1139.63 93.4 1143.15 95.12 1146.27 97.36C1149.47 99.52 1152.07 102 1154.07 104.8L1145.43 113.8C1143.11 111.48 1140.75 109.56 1138.35 108.04C1136.03 106.44 1133.63 105.24 1131.15 104.44C1128.75 103.64 1126.31 103.24 1123.83 103.24C1119.91 103.24 1116.23 104 1112.79 105.52C1109.43 106.96 1106.47 109 1103.91 111.64C1101.43 114.28 1099.47 117.44 1098.03 121.12C1096.59 124.72 1095.87 128.68 1095.87 133C1095.87 137.56 1096.55 141.72 1097.91 145.48C1099.35 149.16 1101.35 152.32 1103.91 154.96C1106.47 157.6 1109.51 159.64 1113.03 161.08C1116.63 162.44 1120.59 163.12 1124.91 163.12C1127.55 163.12 1130.15 162.76 1132.71 162.04C1135.27 161.32 1137.67 160.28 1139.91 158.92C1142.15 157.56 1144.19 155.96 1146.03 154.12L1152.51 164.68C1150.67 166.84 1148.15 168.8 1144.95 170.56C1141.83 172.32 1138.31 173.72 1134.39 174.76C1130.55 175.72 1126.67 176.2 1122.75 176.2ZM1165.31 175V91H1218.23V103.48H1178.27V162.52H1218.23V175H1165.31ZM1171.19 138.16V125.68H1211.63V138.16H1171.19ZM1234.23 175V91H1267.11C1273.11 91 1278.51 92 1283.31 94C1288.19 96 1292.35 98.88 1295.79 102.64C1299.23 106.4 1301.87 110.84 1303.71 115.96C1305.55 121.08 1306.47 126.76 1306.47 133C1306.47 139.24 1305.55 144.96 1303.71 150.16C1301.87 155.28 1299.23 159.72 1295.79 163.48C1292.43 167.16 1288.31 170 1283.43 172C1278.55 174 1273.11 175 1267.11 175H1234.23ZM1247.19 163.84L1246.83 162.52H1266.51C1270.75 162.52 1274.51 161.84 1277.79 160.48C1281.15 159.12 1283.95 157.2 1286.19 154.72C1288.51 152.16 1290.27 149.04 1291.47 145.36C1292.67 141.68 1293.27 137.56 1293.27 133C1293.27 128.44 1292.67 124.36 1291.47 120.76C1290.27 117.08 1288.51 113.96 1286.19 111.4C1283.87 108.84 1281.07 106.88 1277.79 105.52C1274.51 104.16 1270.75 103.48 1266.51 103.48H1246.47L1247.19 102.4V163.84ZM641.6 375V235H663.2V375H641.6ZM651.2 315.4V294.6H723.4V315.4H651.2ZM651.2 255.8V235H732.4V255.8H651.2ZM781.233 376.2C775.313 376.2 769.833 375.12 764.793 372.96C759.833 370.8 755.473 367.8 751.713 363.96C748.033 360.04 745.153 355.48 743.073 350.28C741.073 345 740.073 339.24 740.073 333C740.073 326.76 741.073 321.04 743.073 315.84C745.153 310.56 748.033 306 751.713 302.16C755.473 298.24 759.833 295.2 764.793 293.04C769.833 290.88 775.313 289.8 781.233 289.8C787.153 289.8 792.593 290.88 797.553 293.04C802.593 295.2 806.953 298.24 810.633 302.16C814.393 306.08 817.273 310.68 819.273 315.96C821.353 321.16 822.393 326.84 822.393 333C822.393 339.16 821.353 344.88 819.273 350.16C817.273 355.36 814.393 359.92 810.633 363.84C806.953 367.76 802.593 370.8 797.553 372.96C792.593 375.12 787.153 376.2 781.233 376.2ZM781.233 363.6C785.313 363.6 789.033 362.84 792.393 361.32C795.833 359.8 798.793 357.68 801.273 354.96C803.753 352.16 805.673 348.92 807.033 345.24C808.473 341.48 809.193 337.4 809.193 333C809.193 328.6 808.473 324.56 807.033 320.88C805.673 317.12 803.753 313.88 801.273 311.16C798.793 308.36 795.833 306.2 792.393 304.68C789.033 303.16 785.313 302.4 781.233 302.4C777.153 302.4 773.393 303.16 769.953 304.68C766.593 306.2 763.633 308.32 761.073 311.04C758.593 313.76 756.673 317 755.313 320.76C753.953 324.44 753.273 328.52 753.273 333C753.273 337.4 753.953 341.48 755.313 345.24C756.673 349 758.593 352.24 761.073 354.96C763.633 357.68 766.593 359.8 769.953 361.32C773.393 362.84 777.153 363.6 781.233 363.6ZM835.14 375V291H870.9C875.7 291 880.1 292.2 884.1 294.6C888.18 296.92 891.42 300.12 893.82 304.2C896.22 308.2 897.42 312.72 897.42 317.76C897.42 322.32 896.22 326.56 893.82 330.48C891.42 334.4 888.22 337.56 884.22 339.96C880.22 342.28 875.78 343.44 870.9 343.44H848.1V375H835.14ZM885.06 375L863.7 337.08L877.02 334.08L900.78 375.12L885.06 375ZM848.1 330.96H872.1C874.42 330.96 876.5 330.4 878.34 329.28C880.18 328.08 881.62 326.48 882.66 324.48C883.7 322.4 884.22 320.12 884.22 317.64C884.22 314.84 883.54 312.4 882.18 310.32C880.9 308.16 879.06 306.48 876.66 305.28C874.34 304.08 871.7 303.48 868.74 303.48H848.1V330.96ZM913.777 375V291H926.497L957.097 340.8L950.977 340.68L981.937 291H993.937V375H980.977V340.56C980.977 333.36 981.137 326.88 981.457 321.12C981.857 315.36 982.497 309.64 983.377 303.96L985.057 308.4L957.577 350.88H949.657L923.017 308.88L924.337 303.96C925.217 309.32 925.817 314.84 926.137 320.52C926.537 326.12 926.737 332.8 926.737 340.56V375H913.777ZM1038.61 376.2C1034.05 376.2 1029.81 375.6 1025.89 374.4C1022.05 373.2 1018.53 371.4 1015.33 369C1012.21 366.52 1009.41 363.48 1006.93 359.88L1015.81 349.68C1019.73 355.28 1023.49 359.16 1027.09 361.32C1030.69 363.48 1034.97 364.56 1039.93 364.56C1042.97 364.56 1045.73 364.08 1048.21 363.12C1050.69 362.16 1052.65 360.84 1054.09 359.16C1055.53 357.48 1056.25 355.56 1056.25 353.4C1056.25 351.96 1056.01 350.6 1055.53 349.32C1055.05 348.04 1054.29 346.88 1053.25 345.84C1052.29 344.8 1051.01 343.84 1049.41 342.96C1047.89 342.08 1046.09 341.32 1044.01 340.68C1041.93 339.96 1039.53 339.36 1036.81 338.88C1032.49 338 1028.73 336.84 1025.53 335.4C1022.33 333.96 1019.65 332.16 1017.49 330C1015.33 327.84 1013.73 325.4 1012.69 322.68C1011.65 319.88 1011.13 316.76 1011.13 313.32C1011.13 309.96 1011.85 306.84 1013.29 303.96C1014.81 301.08 1016.85 298.6 1019.41 296.52C1022.05 294.36 1025.13 292.72 1028.65 291.6C1032.17 290.4 1035.97 289.8 1040.05 289.8C1044.37 289.8 1048.33 290.36 1051.93 291.48C1055.53 292.6 1058.73 294.28 1061.53 296.52C1064.33 298.68 1066.65 301.36 1068.49 304.56L1059.37 313.56C1057.77 310.92 1055.97 308.72 1053.97 306.96C1051.97 305.12 1049.77 303.76 1047.37 302.88C1044.97 301.92 1042.41 301.44 1039.69 301.44C1036.57 301.44 1033.85 301.92 1031.53 302.88C1029.21 303.84 1027.37 305.2 1026.01 306.96C1024.73 308.64 1024.09 310.64 1024.09 312.96C1024.09 314.64 1024.41 316.2 1025.05 317.64C1025.69 319 1026.65 320.24 1027.93 321.36C1029.29 322.4 1031.09 323.36 1033.33 324.24C1035.57 325.04 1038.25 325.76 1041.37 326.4C1045.77 327.36 1049.69 328.6 1053.13 330.12C1056.57 331.56 1059.49 333.28 1061.89 335.28C1064.29 337.28 1066.09 339.52 1067.29 342C1068.57 344.48 1069.21 347.16 1069.21 350.04C1069.21 355.4 1067.97 360.04 1065.49 363.96C1063.01 367.88 1059.49 370.92 1054.93 373.08C1050.37 375.16 1044.93 376.2 1038.61 376.2Z" fill="white"/>
-<rect x="282.922" y="152.48" width="147.351" height="31.4026" rx="15.7013" fill="#F9FF07"/>
-<rect x="317.948" y="202" width="112.325" height="31.4026" rx="15.7013" fill="#F9FF07"/>
+<rect x="282.922" y="152.48" width="147.351" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
+<rect x="317.948" y="202" width="112.325" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
 </svg>
diff --git a/docs_app/public/logo-light.svg b/docs_app/public/logo-light.svg
index f02ae69..65b21b6 100644
--- a/docs_app/public/logo-light.svg
+++ b/docs_app/public/logo-light.svg
@@ -3,6 +3,6 @@
 <rect x="266.423" y="164.133" width="147.277" height="42.2665" rx="21.1333" transform="rotate(120 266.423 164.133)" fill="white"/>
 <rect width="142.634" height="42.2727" rx="21.1364" transform="matrix(0.5 0.866025 0.866025 -0.5 209.527 164.354)" fill="white"/>
 <path d="M627 175L681.2 35H703.2L757 175H734L702 90.6C701.6 89.6667 700.8 87.4 699.6 83.8C698.533 80.2 697.267 76.2 695.8 71.8C694.333 67.4 693 63.4 691.8 59.8C690.6 56.0667 689.8 53.6667 689.4 52.6L694 52.4C693.2 54.6667 692.2 57.5333 691 61C689.933 64.4667 688.733 68.1333 687.4 72C686.2 75.8667 685 79.5333 683.8 83C682.6 86.3333 681.6 89.1333 680.8 91.4L649 175H627ZM651 140.2L659 119.4H722.6L731.8 140.2H651ZM765.799 175V91H798.679C804.679 91 810.079 92 814.879 94C819.759 96 823.919 98.88 827.359 102.64C830.799 106.4 833.439 110.84 835.279 115.96C837.119 121.08 838.039 126.76 838.039 133C838.039 139.24 837.119 144.96 835.279 150.16C833.439 155.28 830.799 159.72 827.359 163.48C823.999 167.16 819.879 170 814.999 172C810.119 174 804.679 175 798.679 175H765.799ZM778.759 163.84L778.399 162.52H798.079C802.319 162.52 806.079 161.84 809.359 160.48C812.719 159.12 815.519 157.2 817.759 154.72C820.079 152.16 821.839 149.04 823.039 145.36C824.239 141.68 824.839 137.56 824.839 133C824.839 128.44 824.239 124.36 823.039 120.76C821.839 117.08 820.079 113.96 817.759 111.4C815.439 108.84 812.639 106.88 809.359 105.52C806.079 104.16 802.319 103.48 798.079 103.48H778.039L778.759 102.4V163.84ZM871.852 175L838.252 91H853.012L873.052 142C874.012 144.48 874.852 146.72 875.572 148.72C876.372 150.72 877.052 152.56 877.612 154.24C878.172 155.84 878.692 157.36 879.172 158.8C879.652 160.24 880.132 161.68 880.612 163.12L877.492 163.24C878.052 161.32 878.652 159.32 879.292 157.24C879.932 155.16 880.652 152.88 881.452 150.4C882.332 147.92 883.372 145.12 884.572 142L903.172 91H918.292L884.452 175H871.852ZM910.33 175L942.85 91H956.05L988.33 175H974.53L955.33 124.36C955.09 123.8 954.61 122.44 953.89 120.28C953.25 118.12 952.49 115.72 951.61 113.08C950.73 110.44 949.93 108.04 949.21 105.88C948.49 103.64 948.01 102.2 947.77 101.56L950.53 101.44C950.05 102.8 949.45 104.52 948.73 106.6C948.09 108.68 947.37 110.88 946.57 113.2C945.85 115.52 945.13 117.72 944.41 119.8C943.69 121.8 943.09 123.48 942.61 124.84L923.53 175H910.33ZM924.73 154.12L929.53 141.64H967.69L973.21 154.12H924.73ZM998.313 175V91H1009.95L1061.31 159.76L1059.39 160.84C1059.07 158.84 1058.79 156.68 1058.55 154.36C1058.31 151.96 1058.07 149.44 1057.83 146.8C1057.67 144.08 1057.51 141.24 1057.35 138.28C1057.27 135.24 1057.19 132.08 1057.11 128.8C1057.03 125.52 1056.99 122.12 1056.99 118.6V91H1069.95V175H1058.07L1007.55 108.76L1008.87 107.08C1009.27 111.96 1009.59 116.12 1009.83 119.56C1010.15 122.92 1010.39 125.8 1010.55 128.2C1010.79 130.52 1010.95 132.44 1011.03 133.96C1011.11 135.4 1011.15 136.6 1011.15 137.56C1011.23 138.52 1011.27 139.36 1011.27 140.08V175H998.313ZM1122.75 176.2C1116.91 176.2 1111.55 175.16 1106.67 173.08C1101.79 171 1097.55 168.04 1093.95 164.2C1090.35 160.28 1087.55 155.68 1085.55 150.4C1083.63 145.12 1082.67 139.32 1082.67 133C1082.67 127 1083.71 121.44 1085.79 116.32C1087.95 111.12 1090.91 106.56 1094.67 102.64C1098.43 98.72 1102.79 95.68 1107.75 93.52C1112.71 91.36 1118.07 90.28 1123.83 90.28C1127.91 90.28 1131.87 90.92 1135.71 92.2C1139.63 93.4 1143.15 95.12 1146.27 97.36C1149.47 99.52 1152.07 102 1154.07 104.8L1145.43 113.8C1143.11 111.48 1140.75 109.56 1138.35 108.04C1136.03 106.44 1133.63 105.24 1131.15 104.44C1128.75 103.64 1126.31 103.24 1123.83 103.24C1119.91 103.24 1116.23 104 1112.79 105.52C1109.43 106.96 1106.47 109 1103.91 111.64C1101.43 114.28 1099.47 117.44 1098.03 121.12C1096.59 124.72 1095.87 128.68 1095.87 133C1095.87 137.56 1096.55 141.72 1097.91 145.48C1099.35 149.16 1101.35 152.32 1103.91 154.96C1106.47 157.6 1109.51 159.64 1113.03 161.08C1116.63 162.44 1120.59 163.12 1124.91 163.12C1127.55 163.12 1130.15 162.76 1132.71 162.04C1135.27 161.32 1137.67 160.28 1139.91 158.92C1142.15 157.56 1144.19 155.96 1146.03 154.12L1152.51 164.68C1150.67 166.84 1148.15 168.8 1144.95 170.56C1141.83 172.32 1138.31 173.72 1134.39 174.76C1130.55 175.72 1126.67 176.2 1122.75 176.2ZM1165.31 175V91H1218.23V103.48H1178.27V162.52H1218.23V175H1165.31ZM1171.19 138.16V125.68H1211.63V138.16H1171.19ZM1234.23 175V91H1267.11C1273.11 91 1278.51 92 1283.31 94C1288.19 96 1292.35 98.88 1295.79 102.64C1299.23 106.4 1301.87 110.84 1303.71 115.96C1305.55 121.08 1306.47 126.76 1306.47 133C1306.47 139.24 1305.55 144.96 1303.71 150.16C1301.87 155.28 1299.23 159.72 1295.79 163.48C1292.43 167.16 1288.31 170 1283.43 172C1278.55 174 1273.11 175 1267.11 175H1234.23ZM1247.19 163.84L1246.83 162.52H1266.51C1270.75 162.52 1274.51 161.84 1277.79 160.48C1281.15 159.12 1283.95 157.2 1286.19 154.72C1288.51 152.16 1290.27 149.04 1291.47 145.36C1292.67 141.68 1293.27 137.56 1293.27 133C1293.27 128.44 1292.67 124.36 1291.47 120.76C1290.27 117.08 1288.51 113.96 1286.19 111.4C1283.87 108.84 1281.07 106.88 1277.79 105.52C1274.51 104.16 1270.75 103.48 1266.51 103.48H1246.47L1247.19 102.4V163.84ZM641.6 375V235H663.2V375H641.6ZM651.2 315.4V294.6H723.4V315.4H651.2ZM651.2 255.8V235H732.4V255.8H651.2ZM781.233 376.2C775.313 376.2 769.833 375.12 764.793 372.96C759.833 370.8 755.473 367.8 751.713 363.96C748.033 360.04 745.153 355.48 743.073 350.28C741.073 345 740.073 339.24 740.073 333C740.073 326.76 741.073 321.04 743.073 315.84C745.153 310.56 748.033 306 751.713 302.16C755.473 298.24 759.833 295.2 764.793 293.04C769.833 290.88 775.313 289.8 781.233 289.8C787.153 289.8 792.593 290.88 797.553 293.04C802.593 295.2 806.953 298.24 810.633 302.16C814.393 306.08 817.273 310.68 819.273 315.96C821.353 321.16 822.393 326.84 822.393 333C822.393 339.16 821.353 344.88 819.273 350.16C817.273 355.36 814.393 359.92 810.633 363.84C806.953 367.76 802.593 370.8 797.553 372.96C792.593 375.12 787.153 376.2 781.233 376.2ZM781.233 363.6C785.313 363.6 789.033 362.84 792.393 361.32C795.833 359.8 798.793 357.68 801.273 354.96C803.753 352.16 805.673 348.92 807.033 345.24C808.473 341.48 809.193 337.4 809.193 333C809.193 328.6 808.473 324.56 807.033 320.88C805.673 317.12 803.753 313.88 801.273 311.16C798.793 308.36 795.833 306.2 792.393 304.68C789.033 303.16 785.313 302.4 781.233 302.4C777.153 302.4 773.393 303.16 769.953 304.68C766.593 306.2 763.633 308.32 761.073 311.04C758.593 313.76 756.673 317 755.313 320.76C753.953 324.44 753.273 328.52 753.273 333C753.273 337.4 753.953 341.48 755.313 345.24C756.673 349 758.593 352.24 761.073 354.96C763.633 357.68 766.593 359.8 769.953 361.32C773.393 362.84 777.153 363.6 781.233 363.6ZM835.14 375V291H870.9C875.7 291 880.1 292.2 884.1 294.6C888.18 296.92 891.42 300.12 893.82 304.2C896.22 308.2 897.42 312.72 897.42 317.76C897.42 322.32 896.22 326.56 893.82 330.48C891.42 334.4 888.22 337.56 884.22 339.96C880.22 342.28 875.78 343.44 870.9 343.44H848.1V375H835.14ZM885.06 375L863.7 337.08L877.02 334.08L900.78 375.12L885.06 375ZM848.1 330.96H872.1C874.42 330.96 876.5 330.4 878.34 329.28C880.18 328.08 881.62 326.48 882.66 324.48C883.7 322.4 884.22 320.12 884.22 317.64C884.22 314.84 883.54 312.4 882.18 310.32C880.9 308.16 879.06 306.48 876.66 305.28C874.34 304.08 871.7 303.48 868.74 303.48H848.1V330.96ZM913.777 375V291H926.497L957.097 340.8L950.977 340.68L981.937 291H993.937V375H980.977V340.56C980.977 333.36 981.137 326.88 981.457 321.12C981.857 315.36 982.497 309.64 983.377 303.96L985.057 308.4L957.577 350.88H949.657L923.017 308.88L924.337 303.96C925.217 309.32 925.817 314.84 926.137 320.52C926.537 326.12 926.737 332.8 926.737 340.56V375H913.777ZM1038.61 376.2C1034.05 376.2 1029.81 375.6 1025.89 374.4C1022.05 373.2 1018.53 371.4 1015.33 369C1012.21 366.52 1009.41 363.48 1006.93 359.88L1015.81 349.68C1019.73 355.28 1023.49 359.16 1027.09 361.32C1030.69 363.48 1034.97 364.56 1039.93 364.56C1042.97 364.56 1045.73 364.08 1048.21 363.12C1050.69 362.16 1052.65 360.84 1054.09 359.16C1055.53 357.48 1056.25 355.56 1056.25 353.4C1056.25 351.96 1056.01 350.6 1055.53 349.32C1055.05 348.04 1054.29 346.88 1053.25 345.84C1052.29 344.8 1051.01 343.84 1049.41 342.96C1047.89 342.08 1046.09 341.32 1044.01 340.68C1041.93 339.96 1039.53 339.36 1036.81 338.88C1032.49 338 1028.73 336.84 1025.53 335.4C1022.33 333.96 1019.65 332.16 1017.49 330C1015.33 327.84 1013.73 325.4 1012.69 322.68C1011.65 319.88 1011.13 316.76 1011.13 313.32C1011.13 309.96 1011.85 306.84 1013.29 303.96C1014.81 301.08 1016.85 298.6 1019.41 296.52C1022.05 294.36 1025.13 292.72 1028.65 291.6C1032.17 290.4 1035.97 289.8 1040.05 289.8C1044.37 289.8 1048.33 290.36 1051.93 291.48C1055.53 292.6 1058.73 294.28 1061.53 296.52C1064.33 298.68 1066.65 301.36 1068.49 304.56L1059.37 313.56C1057.77 310.92 1055.97 308.72 1053.97 306.96C1051.97 305.12 1049.77 303.76 1047.37 302.88C1044.97 301.92 1042.41 301.44 1039.69 301.44C1036.57 301.44 1033.85 301.92 1031.53 302.88C1029.21 303.84 1027.37 305.2 1026.01 306.96C1024.73 308.64 1024.09 310.64 1024.09 312.96C1024.09 314.64 1024.41 316.2 1025.05 317.64C1025.69 319 1026.65 320.24 1027.93 321.36C1029.29 322.4 1031.09 323.36 1033.33 324.24C1035.57 325.04 1038.25 325.76 1041.37 326.4C1045.77 327.36 1049.69 328.6 1053.13 330.12C1056.57 331.56 1059.49 333.28 1061.89 335.28C1064.29 337.28 1066.09 339.52 1067.29 342C1068.57 344.48 1069.21 347.16 1069.21 350.04C1069.21 355.4 1067.97 360.04 1065.49 363.96C1063.01 367.88 1059.49 370.92 1054.93 373.08C1050.37 375.16 1044.93 376.2 1038.61 376.2Z" fill="black"/>
-<rect x="282.922" y="152.48" width="147.351" height="31.4026" rx="15.7013" fill="#F9FF07"/>
-<rect x="317.948" y="202" width="112.325" height="31.4026" rx="15.7013" fill="#F9FF07"/>
+<rect x="282.922" y="152.48" width="147.351" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
+<rect x="317.948" y="202" width="112.325" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
 </svg>
diff --git a/docs_app/scripts/landing.mjs b/docs_app/scripts/landing.mjs
index 31bf584..95b7180 100644
--- a/docs_app/scripts/landing.mjs
+++ b/docs_app/scripts/landing.mjs
@@ -28,8 +28,9 @@ const output = path.join(landing, "build", "jaspr")
 const publicDir = path.join(docsApp, "public")
 
 /**
- * What ends up in public/. Everything else in build/jaspr is build tooling —
- * including landing.css, which the page inlines into its <head>.
+ * What ends up in public/. Everything else in build/jaspr is build tooling.
+ * There is no stylesheet: the styles are Dart (`@css` getters next to the
+ * components), and Jaspr inlines them into the page's <head>.
  */
 const artifacts = ["index.html", "landing.js", "landing-icon.svg", "fonts"]
 
diff --git a/docs_app/scripts/palette.mjs b/docs_app/scripts/palette.mjs
new file mode 100644
index 0000000..45bb399
--- /dev/null
+++ b/docs_app/scripts/palette.mjs
@@ -0,0 +1,314 @@
+#!/usr/bin/env node
+/*
+ * AI-Provenance:
+ *   model: Claude Fable 5.1
+ *   harness: Claude Code
+ */
+
+/**
+ * Writes every copy of the site's palette from palette.json, so the landing
+ * page, the docs, the social cards, the Flutter demos and the logos cannot
+ * disagree about a color. palette.json names the LeanCode swatches and maps
+ * them onto the `--af-*` tokens of the light and dark themes; this script
+ * turns that into each consumer's language.
+ *
+ *   generate  write the generated files and recolor the marked SVG elements
+ *   check     fail if any of them differs from what palette.json says
+ *
+ * Generated (committed, so every checkout builds without running this):
+ *   app/af-tokens.css                            the tokens as CSS variables, for the docs' stylesheet
+ *   lib/palette.generated.ts                     the swatches and tokens for the OG cards and the logo
+ *   flutter/lib/support/palette.generated.dart   the swatches and tokens as Flutter Colors, for the live demos
+ *   ../landing/lib/palette.generated.dart        the same as Jaspr Colors; the landing page writes its
+ *                                                `--af-*` variables and theme-color from it at build time
+ *
+ * Recolored in place: SVG elements carrying `data-palette="<swatch>"` get that
+ * swatch as their fill. The logos and icons stay single files of artwork; the
+ * attribute marks which shapes are brand color.
+ */
+import { readFile, writeFile } from "node:fs/promises"
+import { join, relative, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+const docsApp = resolve(fileURLToPath(new URL(".", import.meta.url)), "..")
+const repoRoot = resolve(docsApp, "..")
+const landing = join(repoRoot, "landing")
+const sourceFile = join(docsApp, "palette.json")
+
+const palette = JSON.parse(await readFile(sourceFile, "utf8"))
+const tokenNames = Object.keys(palette.tokens)
+
+for (const [theme, tokens] of Object.entries(palette.themes)) {
+  const missing = tokenNames.filter(name => !(name in tokens))
+  const extra = Object.keys(tokens).filter(name => !(name in palette.tokens))
+  if (missing.length || extra.length) {
+    throw new Error(
+      `palette.json: theme "${theme}" must define exactly the tokens listed under "tokens"` +
+        (missing.length ? `; missing ${missing.join(", ")}` : "") +
+        (extra.length ? `; unknown ${extra.join(", ")}` : ""),
+    )
+  }
+}
+
+// ---------- Colors ----------
+
+function swatch(name) {
+  const entry = palette.swatches[name]
+  if (!entry) throw new Error(`palette.json: unknown swatch "${name}"`)
+  if (!/^#[0-9a-f]{6}$/.test(entry.hex)) throw new Error(`palette.json: swatch "${name}" must be lowercase #rrggbb`)
+  return entry
+}
+
+/** A token's value: the swatch's hex, and the alpha it is used at (1 for solid). */
+function color(value) {
+  return typeof value === "string"
+    ? { hex: swatch(value).hex, alpha: 1 }
+    : { hex: swatch(value.of).hex, alpha: value.alpha }
+}
+
+const channels = hex => [1, 3, 5].map(i => Number.parseInt(hex.slice(i, i + 2), 16))
+
+const cssColor = ({ hex, alpha }) => (alpha === 1 ? hex : `rgba(${channels(hex).join(", ")}, ${alpha})`)
+
+const cssName = name => `--af-${name.replaceAll(/([a-z])([A-Z0-9])/g, "$1-$2").toLowerCase()}`
+
+// ---------- Outputs ----------
+
+const doNotEdit = (from, here) =>
+  `Generated by ${from} from ${here} — do not edit. Run \`npm run palette:generate\` in docs_app after changing the palette.`
+
+/** The same notice, wrapped for Dart's 80 columns. */
+const dartHeader = lines => lines.map(line => `// ${line}\n`).join("")
+
+/** `text` as a Dart doc comment at `indent`, wrapped to 80 columns. */
+function doc(text, indent = "  ") {
+  const width = 80 - indent.length - "/// ".length
+  const lines = []
+  let line = ""
+  for (const word of text.split(" ")) {
+    if (line && line.length + 1 + word.length > width) {
+      lines.push(line)
+      line = word
+    } else {
+      line = line ? `${line} ${word}` : word
+    }
+  }
+  if (line) lines.push(line)
+  return lines.map(l => `${indent}/// ${l}\n`).join("")
+}
+
+function tokensCss() {
+  const block = (selector, tokens, notes) =>
+    `${selector} {\n` +
+    tokenNames
+      .map(
+        name =>
+          `${notes ? `  /* ${palette.tokens[name]} */\n` : ""}  ${cssName(name)}: ${cssColor(color(tokens[name]))};\n`,
+      )
+      .join(notes ? "\n" : "") +
+    "}\n"
+  return (
+    `/* ${doNotEdit("docs_app/scripts/palette.mjs", "docs_app/palette.json")} */\n\n` +
+    block(":root", palette.themes.light, true) +
+    "\n" +
+    block(".dark", palette.themes.dark, false)
+  )
+}
+
+function paletteTs() {
+  const swatches = Object.entries(palette.swatches)
+    .map(([name, { hex, note }]) => `  /** ${note} */\n  ${name}: "${hex}",\n`)
+    .join("")
+  const theme = tokens =>
+    tokenNames
+      .map(name => {
+        const value = tokens[name]
+        const swatch =
+          typeof value === "string" ? `swatches.${value}` : `withAlpha(swatches.${value.of}, ${value.alpha})`
+        return `    /** ${palette.tokens[name]} */\n    ${name}: ${swatch},\n`
+      })
+      .join("")
+  return (
+    `// ${doNotEdit("scripts/palette.mjs", "palette.json")}\n\n` +
+    `/** The LeanCode swatches, as \`#rrggbb\`. */\n` +
+    `export const swatches = {\n${swatches}} as const\n\n` +
+    `/** \`#rrggbb\` at an alpha, as \`rgba()\` — the one color form every renderer of ours understands. */\n` +
+    `export function withAlpha(hex: string, alpha: number): string {\n` +
+    `  const [r, g, b] = [1, 3, 5].map(i => Number.parseInt(hex.slice(i, i + 2), 16))\n` +
+    `  return \`rgba(\${r}, \${g}, \${b}, \${alpha})\`\n` +
+    `}\n\n` +
+    `/** The site's \`--af-*\` tokens per theme, built from the swatches. */\n` +
+    `export const themes = {\n` +
+    `  light: {\n${theme(palette.themes.light)}  },\n` +
+    `  dark: {\n${theme(palette.themes.dark)}  },\n` +
+    `} as const\n`
+  )
+}
+
+/**
+ * The palette as Dart: `enum Palette` names the swatches, `AfTheme` holds one
+ * theme's tokens, and `afLight`/`afDark` build them from the enum. `members`
+ * are the enum's color accessors,
+ * which differ between Flutter's and Jaspr's `Color`; `themeMembers` are extra
+ * members of `AfTheme`.
+ */
+function dart({ header, import: importLine, members, themeMembers = "", trailer = "" }) {
+  const swatches = Object.entries(palette.swatches)
+    .map(([name, { hex, note }]) => `${doc(note)}  ${name}(0x${hex.slice(1)}),\n`)
+    .join("\n")
+    .replace(/,\n$/, ";\n")
+  const fields = tokenNames.map(name => `${doc(palette.tokens[name])}  final Color ${name};\n`).join("\n")
+  const params = tokenNames.map(name => `    required this.${name},\n`).join("")
+  const theme = tokens =>
+    tokenNames
+      .map(name => {
+        const value = tokens[name]
+        const swatch =
+          typeof value === "string" ? `Palette.${value}.color` : `Palette.${value.of}.alpha(${value.alpha})`
+        return `  ${name}: ${swatch},\n`
+      })
+      .join("")
+  return (
+    dartHeader(header) +
+    `\n${importLine}\n\n` +
+    `/// The LeanCode swatches, as \`palette.json\` names them, each a packed\n` +
+    `/// \`0xRRGGBB\`.\n` +
+    `enum Palette {\n${swatches}\n` +
+    `  const Palette(this.rgb);\n\n` +
+    `  final int rgb;\n\n` +
+    `${members}}\n\n` +
+    `/// The site's \`--af-*\` tokens for one theme, as the docs and the landing\n` +
+    `/// page paint them.\n` +
+    `class AfTheme {\n` +
+    `  const AfTheme({\n${params}  });\n\n` +
+    `${fields}${themeMembers}}\n\n` +
+    `/// The light theme.\n` +
+    `final afLight = AfTheme(\n${theme(palette.themes.light)});\n\n` +
+    `/// The dark theme.\n` +
+    `final afDark = AfTheme(\n${theme(palette.themes.dark)});\n` +
+    trailer
+  )
+}
+
+function flutterDart() {
+  return dart({
+    header: [
+      "Generated by docs_app/scripts/palette.mjs from docs_app/palette.json — do",
+      "not edit. Run `npm run palette:generate` in docs_app after changing the",
+      "palette.",
+    ],
+    import: "import 'dart:ui' show Color;",
+    members:
+      `  Color get color => Color(0xff000000 | rgb);\n\n` +
+      `  /// \`#rrggbb\`.\n` +
+      `  String get hex => '#\${rgb.toRadixString(16).padLeft(6, '0')}';\n\n` +
+      `  Color alpha(double alpha) => color.withValues(alpha: alpha);\n`,
+  })
+}
+
+function landingDart() {
+  return dart({
+    header: [
+      "Generated by ../../docs_app/scripts/palette.mjs from",
+      "../../docs_app/palette.json — do not edit. Run `npm run palette:generate`",
+      "in docs_app after changing the palette.",
+    ],
+    import: "import 'package:jaspr/dom.dart';",
+    members:
+      `  Color get color => Color.value(rgb);\n\n` +
+      `  /// \`#rrggbb\`.\n` +
+      `  String get hex => color.value;\n\n` +
+      `  Color alpha(double alpha) =>\n` +
+      `      Color.rgba(rgb >> 16 & 0xff, rgb >> 8 & 0xff, rgb & 0xff, alpha);\n`,
+    themeMembers:
+      `\n  /// The theme as the \`--af-*\` custom properties the stylesheet reads.\n` +
+      `  Map<String, Color> get cssVariables => {\n` +
+      tokenNames.map(name => `    '${cssName(name)}': ${name},\n`).join("") +
+      `  };\n`,
+    trailer:
+      `\n/// The dark theme's page background, for \`<meta name="theme-color">\`.\n` +
+      `final themeColor = afDark.bg.value;\n`,
+  })
+}
+
+/** Recolors the elements of an SVG that carry `data-palette="<swatch>"`. */
+function recolorSvg(file, svg) {
+  let marked = 0
+  const result = svg.replaceAll(/<[a-zA-Z][^>]*\bdata-palette="([^"]+)"[^>]*>/g, (tag, name) => {
+    marked += 1
+    if (!/\bfill="[^"]*"/.test(tag)) throw new Error(`${file}: the element marked data-palette="${name}" has no fill`)
+    return tag.replace(/\bfill="[^"]*"/, `fill="${swatch(name).hex}"`)
+  })
+  if (marked === 0) throw new Error(`${file}: no element carries data-palette; mark the brand-color shapes`)
+  return result
+}
+
+const generated = [
+  { file: join(docsApp, "app", "af-tokens.css"), content: tokensCss },
+  { file: join(docsApp, "lib", "palette.generated.ts"), content: paletteTs },
+  { file: join(docsApp, "flutter", "lib", "support", "palette.generated.dart"), content: flutterDart },
+  { file: join(landing, "lib", "palette.generated.dart"), content: landingDart },
+]
+
+const svgs = [
+  join(docsApp, "app", "icon.svg"),
+  join(docsApp, "public", "logo-dark.svg"),
+  join(docsApp, "public", "logo-light.svg"),
+  join(landing, "web", "landing-icon.svg"),
+]
+
+/** Every output with what it should contain and what it contains now. */
+async function outputs() {
+  const current = async file => {
+    try {
+      return await readFile(file, "utf8")
+    } catch (error) {
+      if (error.code === "ENOENT") return null
+      throw error
+    }
+  }
+  const files = []
+  for (const { file, content } of generated) {
+    files.push({ file, expected: content(), actual: await current(file) })
+  }
+  for (const file of svgs) {
+    const actual = await current(file)
+    if (actual === null) throw new Error(`${file} is missing`)
+    files.push({ file, expected: recolorSvg(relative(repoRoot, file), actual), actual })
+  }
+  return files
+}
+
+const label = file => relative(repoRoot, file)
+
+async function generate() {
+  for (const { file, expected, actual } of await outputs()) {
+    if (expected === actual) continue
+    await writeFile(file, expected)
+    console.log(`wrote ${label(file)}`)
+  }
+  console.log(`palette: ${generated.length} generated files and ${svgs.length} SVGs follow palette.json`)
+}
+
+async function check() {
+  const files = await outputs()
+  const stale = files.filter(({ expected, actual }) => expected !== actual)
+  if (stale.length === 0) {
+    console.log(`palette: ${generated.length} generated files and ${svgs.length} SVGs are up to date`)
+    return
+  }
+  throw new Error(
+    "The palette's generated files are out of date — run `npm run palette:generate` in docs_app:\n" +
+      stale.map(({ file }) => `  ${label(file)}`).join("\n"),
+  )
+}
+
+const command = process.argv[2]
+try {
+  if (command === "generate") await generate()
+  else if (command === "check") await check()
+  else throw new Error("usage: node scripts/palette.mjs <generate|check>")
+} catch (error) {
+  console.error(error instanceof Error ? error.message : error)
+  process.exit(1)
+}
diff --git a/landing/.gitignore b/landing/.gitignore
index cfe7145..79c320e 100644
--- a/landing/.gitignore
+++ b/landing/.gitignore
@@ -3,3 +3,5 @@ build/
 # Generated by jaspr_builder on every build.
 lib/main.server.options.dart
 lib/main.client.options.dart
+# Generated by jaspr_class_scope_builder on every build.
+lib/**/*.scopes.dart
diff --git a/landing/README.md b/landing/README.md
index 2a061bd..8e29223 100644
--- a/landing/README.md
+++ b/landing/README.md
@@ -18,31 +18,52 @@ jaspr serve        # http://localhost:8080, rebuilds on change
 jaspr build        # build/jaspr/{index.html,landing.js,landing-icon.svg,fonts/}
 ```
 
-From `../docs_app`, `npm run landing:build` runs the build and copies those four into `public/`. The stylesheet is
-inlined into `index.html`, so it is not copied on its own.
+From `../docs_app`, `npm run landing:build` runs the build and copies those four into `public/`. There is no
+stylesheet to copy: the styles are Dart, and the build inlines them into `index.html`.
 
 ## Layout
 
-| Path                   | What lives there                                                                                                 |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `lib/main.server.dart` | The entrypoint: the `<head>` (font preloads, the inlined stylesheet, theme bootstrap, Open Graph) and the `App`. |
-| `lib/app.dart`         | The page: header, hero, three sections with a live demo each, features, agent skill band, footer.                |
-| `lib/components/`      | One file per section; `example_frame.dart` is the window around a live demo.                                     |
-| `lib/examples.dart`    | Reads the demos from `../docs_app/content/landing/*.mdx` and maps them to the compiled bundle.                   |
-| `lib/highlight.dart`   | Build-time Dart syntax highlighting (`syntax_highlight_lite`) into `tk-*` spans.                                 |
-| `lib/site.dart`        | URLs, copy, the package version from `../pubspec.yaml`. `SITE_URL` (a `--dart-define`) for previews.             |
-| `web/landing.css`      | The stylesheet: the same `--af-*` tokens as `docs_app/app/global.css`, dark by default. Inlined at build.        |
-| `web/fonts/`           | Space Grotesk and JetBrains Mono, self-hosted (see its README), so no third-party request blocks paint.          |
-| `web/landing.js`       | The client: Flutter islands, copy buttons, theme toggle. No framework, no build step.                            |
+| Path                         | What lives there                                                                                                                  |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `lib/main.server.dart`       | The entrypoint: the `<head>` (font preloads, theme bootstrap, Open Graph) and the `App`.                                          |
+| `lib/app.dart`               | The page: header, hero, three sections with a live demo each, features, agent skill band, footer.                                 |
+| `lib/components/`            | One file per section or shared piece, each with its styles in a `@css` getter; `example_frame.dart` is the window around a demo.  |
+| `lib/examples.dart`          | Reads the demos from `../docs_app/content/landing/*.mdx` and maps them to the compiled bundle.                                    |
+| `lib/highlight.dart`         | Build-time Dart syntax highlighting (`syntax_highlight_lite`) into `tk-*` spans, and their colours.                               |
+| `lib/site.dart`              | URLs, copy, the package version from `../pubspec.yaml`. `SITE_URL` (a `--dart-define`) for previews.                              |
+| `lib/palette.generated.dart` | The palette — `enum Palette`, `afLight`/`afDark` — generated from `../docs_app/palette.json` by `npm run palette:generate` there. |
+| `lib/styles.dart`            | Fonts, the `--af-*` tokens (written from the palette), the reset and the container. See "Styles" below.                          |
+| `web/fonts/`                 | Space Grotesk and JetBrains Mono, self-hosted (see its README), so no third-party request blocks paint.                           |
+| `web/landing.js`             | The client: Flutter islands, copy buttons, theme toggle. No framework, no build step.                                             |
+
+## Styles
+
+There is no stylesheet file. Every component declares the rules for the classes it renders in a
+`@css static List<StyleRule> get styles` getter next to its `build`; `lib/styles.dart` holds what is not any one
+component's: the `@font-face` rules, the `--af-*` tokens for the light (`:root`) and dark (`.dark`) themes — written
+from `afLight` and `afDark` in `lib/palette.generated.dart`, so the colors come from `docs_app/palette.json` like the
+docs' — the reset, the `af-container` column and the reduced-motion rule. `jaspr_builder` collects every `@css` getter
+into `lib/main.server.options.dart` (generated, not committed), and Jaspr renders them as one `<style>` in the `<head>`
+— global rules first, then components in file order — so nothing render-blocking is fetched.
+
+Each component owns the classes it renders and keeps them as `ClassName` constants, scoped to it by
+[`jaspr_class_scope`](https://pub.dev/packages/jaspr_class_scope) (`@scopedCss` plus a generated `*.scopes.dart` part
+file). Selectors and `classes:` attributes are both spelled from the constant, so no component styles another's class
+by string. `ClassName.shared` keeps a name as written, for the classes `web/landing.js` and the docs' `global.css`
+know: the example frame, the logo, `af-landing` and `af-container`.
+
+Jaspr's typed properties cover most of it; what they cannot say (`color-mix()`, `:has()`, `counter()`, an `infinite`
+animation, a `@font-face` with a weight range) goes into the `raw` map of the same rule. Where two files style the same
+element, the cascade follows the bundle order — files alphabetically, getters alphabetically within a file — so a
+`Card` rule in `card.dart` is refined by the mode card's `className` rules in `sections.dart`.
 
 ## Fonts
 
-`web/fonts/` holds Space Grotesk and JetBrains Mono as variable fonts in their Latin and Latin Extended subsets, the
-same files [ciach.leancode.co](https://github.com/leancodepl/ciach/tree/main/website/web/fonts) ships, under the SIL
-Open Font License (the `OFL-*.txt` files alongside). Self-hosting them means no third-party stylesheet blocks the first
-paint; `landing.css` opens with the `@font-face` rules and `main.server.dart` preloads the two Latin files, which carry
-every glyph above the fold. To update a font, fetch the Google Fonts CSS with a modern Chrome user agent and copy the
-`woff2` files it points at.
+`web/fonts/` holds Space Grotesk and JetBrains Mono as variable fonts in their Latin and Latin Extended subsets, under
+the SIL Open Font License (the `OFL-*.txt` files alongside). Self-hosting them means no third-party stylesheet blocks the first
+paint; `lib/styles.dart` opens with the `@font-face` rules and `main.server.dart` preloads the two Latin files, which
+carry every glyph above the fold. To update a font, fetch the Google Fonts CSS with a modern Chrome user agent and copy
+the `woff2` files it points at.
 
 ## Live demos
 
diff --git a/landing/lib/app.dart b/landing/lib/app.dart
index 49b1fb8..7f6f514 100644
--- a/landing/lib/app.dart
+++ b/landing/lib/app.dart
@@ -3,26 +3,57 @@ import 'package:advanced_forms_landing/components/hero.dart';
 import 'package:advanced_forms_landing/components/nav_bar.dart';
 import 'package:advanced_forms_landing/components/sections.dart';
 import 'package:advanced_forms_landing/examples.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'app.scopes.dart';
+
 /// The landing page: what advanced_forms is, four live demos, where to go next.
+@scopedCss
 class App extends StatelessComponent {
   const App({required this.version, super.key});
 
   final String version;
 
+  /// `<main>`. The docs' `global.css` knows the name too.
+  static const _landing = ClassName.shared('af-landing');
+  static const _class = _$AppScope;
+  static final _skipLink = _class('af-skip-link');
+
+  @css
+  static List<StyleRule> get styles => [
+    // Sections may hold wide code samples; let them shrink and scroll instead
+    // of stretching the page.
+    css('${_landing.selector} > *').styles(minWidth: .zero),
+    // Hidden above the viewport until it takes keyboard focus.
+    css(_skipLink.selector).styles(
+      position: .fixed(top: 12.px, left: 12.px),
+      zIndex: const ZIndex(100),
+      padding: .symmetric(vertical: 0.6.rem, horizontal: 1.rem),
+      radius: .circular(8.px),
+      transition: Transition('transform', duration: 200.ms, curve: .ease),
+      transform: .translate(y: (-200).percent),
+      color: accentInkColor,
+      fontWeight: .w600,
+      backgroundColor: accentColor,
+    ),
+    css(
+      '${_skipLink.selector}:focus',
+    ).styles(transform: const .translate(y: .zero)),
+  ];
+
   @override
   Component build(BuildContext context) {
     return .fragment([
-      const a(href: '#main', classes: 'af-skip-link', [
+      a(href: '#main', classes: _skipLink.name, const [
         .text('Skip to content'),
       ]),
       const NavBar(),
       Component.element(
         tag: 'main',
         id: 'main',
-        classes: 'af-landing',
+        classes: _landing.name,
         children: [
           Hero(version: version, demo: loadExample('hero')),
           ModelSection(example: loadExample('signup')),
diff --git a/landing/lib/components/button.dart b/landing/lib/components/button.dart
index cf8ba74..aa83699 100644
--- a/landing/lib/components/button.dart
+++ b/landing/lib/components/button.dart
@@ -1,22 +1,29 @@
 import 'package:advanced_forms_landing/components/icons.dart';
-import 'package:advanced_forms_landing/components/section.dart';
+import 'package:advanced_forms_landing/components/text.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'button.scopes.dart';
+
 /// How a [Button] is filled.
 enum ButtonVariant {
   /// Accent fill with dark text: the one action a section wants taken.
-  primary,
+  primary('af-button-primary'),
 
   /// Surface fill with a hairline: the alternative next to a primary button.
-  secondary,
+  secondary('af-button-secondary');
+
+  const ButtonVariant(this._local);
+
+  /// The class, before [Button] scopes it.
+  final String _local;
 }
 
-/// A pill-shaped call to action that links somewhere, the same component
-/// Ciach's site uses. [external] links open in a new tab. An icon can go
-/// before the label ([leading]) or after it ([trailing]).
-///
-/// Styled by `.af-button*` in web/landing.css.
+/// A pill-shaped call to action that links somewhere. [external] links open in
+/// a new tab. An icon can go before the label ([leading]) or after it
+/// ([trailing]).
+@scopedCss
 class Button extends StatelessComponent {
   const Button(
     this.label, {
@@ -35,9 +42,54 @@ class Button extends StatelessComponent {
   final Icon? leading;
   final Icon? trailing;
 
+  static const _class = _$ButtonScope;
+  static final _button = _class('af-button');
+
+  /// The class of a [variant].
+  static ClassName _variantClass(ButtonVariant variant) =>
+      _class(variant._local);
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_button.selector).styles(
+      display: .inlineFlex,
+      padding: .symmetric(vertical: 0.75.rem, horizontal: 1.2.rem),
+      border: hairline(const Color('transparent')),
+      radius: .circular(999.px),
+      cursor: .pointer,
+      transition: .combine([
+        Transition('transform', duration: 150.ms, curve: .ease),
+        Transition('background-color', duration: 150.ms, curve: .ease),
+        Transition('border-color', duration: 150.ms, curve: .ease),
+        Transition('color', duration: 150.ms, curve: .ease),
+      ]),
+      alignItems: .center,
+      gap: .all(0.5.rem),
+      fontSize: 0.95.rem,
+      fontWeight: .w600,
+      lineHeight: const .expression('1'),
+      whiteSpace: .noWrap,
+    ),
+    css('${_button.selector}:hover').styles(transform: .translate(y: (-1).px)),
+    css(
+      _variantClass(.primary).selector,
+    ).styles(color: accentInkColor, backgroundColor: accentColor),
+    css(
+      '${_variantClass(.primary).selector}:hover',
+    ).styles(backgroundColor: accentHoverColor),
+    css(_variantClass(.secondary).selector).styles(
+      color: textColor,
+      backgroundColor: surfaceColor,
+      raw: {'border-color': border2Color.value},
+    ),
+    css(
+      '${_variantClass(.secondary).selector}:hover',
+    ).styles(raw: {'border-color': accentColor.value}),
+  ];
+
   @override
   Component build(BuildContext context) {
-    final classes = 'af-button af-button-${variant.name}';
+    final classes = (_button + _variantClass(variant)).name;
     final children = <Component>[
       if (leading case final icon?) icon.build(size: 18),
       .text(label),
@@ -49,3 +101,51 @@ class Button extends StatelessComponent {
     return a(href: href, classes: classes, children);
   }
 }
+
+/// A wrapping row of [Button]s under a piece of copy.
+@scopedCss
+class ButtonRow extends StatelessComponent {
+  const ButtonRow(
+    this.children, {
+    this.center = false,
+    this.flush = false,
+    super.key,
+  });
+
+  final List<Component> children;
+
+  /// Centered under centered copy, instead of starting at the left edge.
+  final bool center;
+
+  /// Without the gap above it, where the row stands on its own.
+  final bool flush;
+
+  static const _class = _$ButtonRowScope;
+  static final _row = _class('af-actions');
+  static final _center = _class('af-actions-center');
+  static final _flush = _class('af-actions-flush');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_row.selector).styles(
+      display: .flex,
+      margin: .only(top: 1.75.rem),
+      flexWrap: .wrap,
+      gap: .all(0.75.rem),
+    ),
+    css(_center.selector).styles(justifyContent: .center),
+    css(_flush.selector).styles(margin: const .only(top: .zero)),
+  ];
+
+  @override
+  Component build(BuildContext context) {
+    var classes = _row;
+    if (center) {
+      classes += _center;
+    }
+    if (flush) {
+      classes += _flush;
+    }
+    return div(classes: classes.name, children);
+  }
+}
diff --git a/landing/lib/components/card.dart b/landing/lib/components/card.dart
new file mode 100644
index 0000000..a286a7f
--- /dev/null
+++ b/landing/lib/components/card.dart
@@ -0,0 +1,124 @@
+import 'package:advanced_forms_landing/components/icons.dart';
+import 'package:advanced_forms_landing/styles.dart';
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+part 'card.scopes.dart';
+
+/// A responsive grid of [Card]s: as many 300px columns as fit.
+@scopedCss
+class CardGrid extends StatelessComponent {
+  const CardGrid(this.children, {this.className, super.key});
+
+  final List<Component> children;
+
+  /// A class of the caller's, for its own rules on this grid.
+  final ClassName? className;
+
+  static const _class = _$CardGridScope;
+  static final _grid = _class('af-card-grid');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_grid.selector).styles(
+      display: .grid,
+      gap: .all(1.rem),
+      raw: {
+        'grid-template-columns':
+            'repeat(auto-fit, minmax(min(100%, 300px), 1fr))',
+      },
+    ),
+    // A card may hold a wide code chip; let it shrink instead of stretching
+    // the page.
+    css('${_grid.selector} > *').styles(minWidth: .zero),
+  ];
+
+  @override
+  Component build(BuildContext context) {
+    return ul(classes: _classes(_grid, className), children);
+  }
+}
+
+/// A bordered surface that lifts a little when hovered, with a heading and a
+/// paragraph or two inside; a [CardGrid] item.
+@scopedCss
+class Card extends StatelessComponent {
+  const Card(this.children, {this.className, super.key});
+
+  final List<Component> children;
+
+  /// A class of the caller's, for its own rules on this card.
+  final ClassName? className;
+
+  static const _class = _$CardScope;
+  static final _card = _class('af-card');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_card.selector).styles(
+      display: .flex,
+      padding: .all(1.5.rem),
+      border: hairline(borderColor),
+      radius: const .circular(radius),
+      transition: .combine([
+        Transition('border-color', duration: 200.ms, curve: .ease),
+        Transition('transform', duration: 200.ms, curve: .ease),
+      ]),
+      flexDirection: .column,
+      backgroundColor: surfaceColor,
+    ),
+    css('${_card.selector}:hover').styles(
+      transform: .translate(y: (-2).px),
+      raw: {'border-color': border2Color.value},
+    ),
+    css('${_card.selector} h3').styles(
+      margin: .only(top: .zero, right: .zero, bottom: 0.5.rem, left: .zero),
+      fontSize: 1.15.rem,
+      fontWeight: .w600,
+    ),
+    css(
+      '${_card.selector} p',
+    ).styles(margin: .zero, color: text2Color, fontSize: 0.95.rem),
+  ];
+
+  @override
+  Component build(BuildContext context) {
+    return li(classes: _classes(_card, className), children);
+  }
+}
+
+/// The icon in a card's corner: a rounded accent tile.
+@scopedCss
+class CardIcon extends StatelessComponent {
+  const CardIcon(this.icon, {super.key});
+
+  final Icon icon;
+
+  static const _class = _$CardIconScope;
+  static final _icon = _class('af-card-icon');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_icon.selector).styles(
+      display: .inlineGrid,
+      width: 42.px,
+      height: 42.px,
+      margin: .only(bottom: 0.5.rem),
+      radius: .circular(12.px),
+      color: accentTextColor,
+      backgroundColor: accentSoftColor,
+      raw: {
+        'place-items': 'center',
+        'border': '1px solid ${colorMix(accentColor, 35, with_: borderColor)}',
+      },
+    ),
+  ];
+
+  @override
+  Component build(BuildContext context) {
+    return span(classes: _icon.name, [icon.build(size: 22)]);
+  }
+}
+
+String _classes(ClassName own, ClassName? extra) =>
+    (extra == null ? own : own + extra).name;
diff --git a/landing/lib/components/copy_button.dart b/landing/lib/components/copy_button.dart
new file mode 100644
index 0000000..9800f6b
--- /dev/null
+++ b/landing/lib/components/copy_button.dart
@@ -0,0 +1,142 @@
+import 'package:advanced_forms_landing/components/icons.dart';
+import 'package:advanced_forms_landing/styles.dart';
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+part 'copy_button.scopes.dart';
+
+/// How a [CopyButton] looks.
+enum CopyButtonVariant {
+  /// A framed button with a label, sitting in a command line.
+  framed('af-copy-framed'),
+
+  /// A square, icon-only button that fills on hover, for a toolbar.
+  ghost('af-copy-ghost');
+
+  const CopyButtonVariant(this._local);
+
+  /// The class, before [CopyButton] scopes it.
+  final String _local;
+}
+
+/// A button that copies text to the clipboard and shows a check mark for a
+/// moment afterwards. `web/landing.js` wires the click and flashes the
+/// `data-copied` attribute the styles below react to.
+@scopedCss
+class CopyButton extends StatelessComponent {
+  /// Copies [text].
+  const CopyButton({
+    required String text,
+    required this.ariaLabel,
+    this.variant = .framed,
+    this.label,
+    this.title,
+    super.key,
+  }) : _text = text;
+
+  /// Copies the source file the enclosing example frame currently shows;
+  /// `landing.js` finds it from the checked file tab.
+  const CopyButton.sourceFile({
+    required this.ariaLabel,
+    this.variant = .ghost,
+    this.label,
+    this.title,
+    super.key,
+  }) : _text = null;
+
+  final String? _text;
+  final String ariaLabel;
+  final CopyButtonVariant variant;
+
+  /// A visible label after the icon.
+  final String? label;
+
+  /// A tooltip.
+  final String? title;
+
+  static const _class = _$CopyButtonScope;
+
+  /// The button itself.
+  static final className = _class('af-copy-button');
+
+  /// The visible [label], for a rule that hides it where the room is short.
+  static final labelClassName = _class('af-copy-label');
+
+  static final _idle = _class('af-copy-idle');
+  static final _done = _class('af-copy-done');
+
+  /// The class of a [variant].
+  static ClassName _variantClass(CopyButtonVariant variant) =>
+      _class(variant._local);
+
+  @css
+  static List<StyleRule> get styles => [
+    css(className.selector).styles(
+      display: .inlineFlex,
+      transition: .combine([
+        Transition('color', duration: 150.ms, curve: .ease),
+        Transition('border-color', duration: 150.ms, curve: .ease),
+      ]),
+      alignItems: .center,
+    ),
+    css(_variantClass(.framed).selector).styles(
+      padding: .symmetric(vertical: 0.45.rem, horizontal: 0.75.rem),
+      border: hairline(border2Color),
+      radius: .circular(8.px),
+      gap: .all(0.4.rem),
+      color: text2Color,
+      backgroundColor: surfaceColor,
+      raw: {'font': '600 0.78rem/1 var(--font-sans)'},
+    ),
+    css(
+      '${_variantClass(.framed).selector}:hover',
+    ).styles(color: textColor, raw: {'border-color': accentColor.value}),
+    css(_variantClass(.ghost).selector).styles(
+      display: .inlineGrid,
+      width: 30.px,
+      height: 30.px,
+      radius: .circular(6.px),
+      flex: .none,
+      color: mutedColor,
+      backgroundColor: surfaceColor,
+      raw: {'place-items': 'center'},
+    ),
+    css(
+      '${_variantClass(.ghost).selector}:hover',
+    ).styles(color: textColor, backgroundColor: surface2Color),
+    // The icons sit in flex spans, so no line box adds slack around them.
+    css('${_idle.selector}, ${_done.selector}').styles(display: .inlineFlex),
+    // Copied: the check mark replaces the icon and the button turns green.
+    // Last, so it wins over the hover rules of either variant.
+    css(_done.selector).styles(display: .none, color: okColor),
+    css(
+      '${className.selector}[data-copied="true"]',
+    ).styles(color: okColor, raw: {'border-color': okColor.value}),
+    css(
+      '${className.selector}[data-copied="true"] ${_idle.selector}',
+    ).styles(display: .none),
+    css(
+      '${className.selector}[data-copied="true"] ${_done.selector}',
+    ).styles(display: .inlineFlex),
+  ];
+
+  @override
+  Component build(BuildContext context) {
+    return button(
+      classes: (className + _variantClass(variant)).name,
+      attributes: {
+        'type': 'button',
+        if (_text case final text?) 'data-copy-text': text else 'data-copy': '',
+        'aria-label': ariaLabel,
+        'aria-live': 'polite',
+        'title': ?title,
+      },
+      [
+        span(classes: _idle.name, [Icon.copy.build(size: 15)]),
+        span(classes: _done.name, [Icon.check.build(size: 15)]),
+        if (label case final label?)
+          span(classes: labelClassName.name, [.text(label)]),
+      ],
+    );
+  }
+}
diff --git a/landing/lib/components/example_frame.dart b/landing/lib/components/example_frame.dart
index 62b1968..6412fe5 100644
--- a/landing/lib/components/example_frame.dart
+++ b/landing/lib/components/example_frame.dart
@@ -1,7 +1,8 @@
-import 'package:advanced_forms_landing/components/icons.dart';
+import 'package:advanced_forms_landing/components/copy_button.dart';
 import 'package:advanced_forms_landing/examples.dart';
 import 'package:advanced_forms_landing/highlight.dart';
 import 'package:advanced_forms_landing/site.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
@@ -21,34 +22,339 @@ enum ExampleLayout {
 /// attaches a view of the shared Flutter engine to it once it scrolls near,
 /// and keeps the status pill honest. File tabs are radio inputs and CSS —
 /// no script needed to switch files.
+///
+/// The class names are a contract with two other files. `landing.js` looks up
+/// the example, its stage, status, code, tab inputs and code panels, and puts
+/// the notice, the gate and its "done" badge on the stage. The docs app draws
+/// the same frame around its own examples in `global.css`, under the same
+/// names, so the two sites read as one.
 class ExampleFrame extends StatelessComponent {
   const ExampleFrame({required this.example, required this.layout, super.key});
 
   final LandingExample example;
   final ExampleLayout layout;
 
+  static const _example = ClassName.shared('af-example');
+  static const _bar = ClassName.shared('af-example-bar');
+  static const _dots = ClassName.shared('af-dots');
+  static const _title = ClassName.shared('af-example-title');
+  static const _status = ClassName.shared('af-example-status');
+  static const _body = ClassName.shared('af-example-body');
+  static const _stage = ClassName.shared('af-example-stage');
+  static const _notice = ClassName.shared('af-example-notice');
+  static const _gate = ClassName.shared('af-example-gate');
+  static const _gateDone = ClassName.shared('af-example-gate-done');
+  static const _caption = ClassName.shared('af-example-caption');
+  static const _code = ClassName.shared('af-example-code');
+  static const _toolbar = ClassName.shared('af-example-toolbar');
+  static const _tabs = ClassName.shared('af-example-tabs');
+  static const _tabInput = ClassName.shared('af-tab-input');
+  static const _tab = ClassName.shared('af-example-tab');
+  static const _panels = ClassName.shared('af-example-panels');
+  static const _panel = ClassName.shared('af-code-panel');
+
+  static String _split(ClassName part) =>
+      '${_example.selector}[data-layout="split"] ${part.selector}';
+
+  @css
+  static List<StyleRule> get styles => [
+    ..._frame,
+    ..._stageRules,
+    ..._source,
+    ..._tabRules,
+    ..._panelRules,
+    css.media(MediaQuery.all(minWidth: 960.px), [
+      css(_split(_body)).styles(
+        display: .grid,
+        raw: {
+          'grid-template-columns': 'minmax(0, 1.15fr) minmax(0, 1fr)',
+          'align-items': 'start',
+        },
+      ),
+      css(_split(_stage)).styles(
+        position: const .sticky(
+          top: .expression('calc(var(--af-header-h) + 1.5rem)'),
+        ),
+        border: .only(left: hairlineSide(borderColor)),
+        order: 2,
+      ),
+      css(_split(_code)).styles(padding: .all(0.75.rem), order: 1),
+    ]),
+  ];
+
+  /// The window: title bar with dots, title and the island's status.
+  static List<StyleRule> get _frame => [
+    css(_example.selector).styles(
+      margin: .zero,
+      border: hairline(borderColor),
+      radius: const .circular(radius),
+      overflow: .hidden,
+      backgroundColor: surfaceColor,
+      raw: {'box-shadow': shadow},
+    ),
+    css(_bar.selector).styles(
+      display: .flex,
+      minHeight: 2.6.rem,
+      padding: .fromLTRB(0.9.rem, 0.4.rem, 0.75.rem, 0.4.rem),
+      border: .only(bottom: hairlineSide(borderColor)),
+      alignItems: .center,
+      gap: .all(0.75.rem),
+      backgroundColor: surface2Color,
+    ),
+    css(
+      _dots.selector,
+    ).styles(display: .inlineFlex, gap: .all(0.4.rem), flex: .none),
+    css('${_dots.selector} span').styles(
+      width: 10.px,
+      height: 10.px,
+      radius: .circular(50.percent),
+      backgroundColor: border2Color,
+    ),
+    css(
+      '${_dots.selector} span:first-child',
+    ).styles(backgroundColor: accentColor),
+    css(_title.selector).styles(
+      minWidth: .zero,
+      overflow: .hidden,
+      color: mutedColor,
+      textAlign: .center,
+      fontFamily: fontMono,
+      fontSize: 0.75.rem,
+      textOverflow: .ellipsis,
+      whiteSpace: .noWrap,
+      raw: {'flex': '1'},
+    ),
+    css(_status.selector).styles(
+      display: .inlineFlex,
+      alignItems: .center,
+      gap: .all(0.4.rem),
+      flex: .none,
+      color: mutedColor,
+      fontFamily: fontMono,
+      fontSize: 0.68.rem,
+      fontWeight: .w600,
+      textTransform: .upperCase,
+      letterSpacing: 0.06.em,
+    ),
+    css('${_status.selector}::before').styles(
+      content: '',
+      width: 7.px,
+      height: 7.px,
+      radius: .circular(50.percent),
+      backgroundColor: mutedColor,
+    ),
+    css('${_status.selector}[data-status="ready"]').styles(color: okColor),
+    css('${_status.selector}[data-status="ready"]::before').styles(
+      backgroundColor: okColor,
+      raw: {'box-shadow': '0 0 0 3px ${colorMix(okColor, 25)}'},
+    ),
+    css('${_status.selector}[data-status="attaching"]::before').styles(
+      backgroundColor: accentColor,
+      raw: {'animation': 'af-pulse 1s ease-in-out infinite'},
+    ),
+    css(
+      '${_status.selector}[data-status="failed"]::before, '
+      '${_status.selector}[data-status="evicted"]::before',
+    ).styles(backgroundColor: dangerColor),
+    // Either half may hold a wide code sample; let it shrink and scroll
+    // instead of stretching the page.
+    css('${_body.selector} > *').styles(minWidth: .zero),
+  ];
+
+  /// The stage the Flutter view attaches to, and what `landing.js` puts on it
+  /// while that has not happened: a notice when it cannot, a gate over a view
+  /// that is waiting for a click, and the caption under the source.
+  static List<StyleRule> get _stageRules => [
+    css(
+      _stage.selector,
+    ).styles(position: const .relative(), backgroundColor: surfaceColor),
+    css('${_stage.selector}[data-settled="false"]').styles(minHeight: 8.rem),
+    css(_notice.selector).styles(
+      display: .flex,
+      position: const .absolute(),
+      padding: .all(1.rem),
+      justifyContent: .center,
+      alignItems: .center,
+      color: mutedColor,
+      textAlign: .center,
+      fontSize: 0.8.rem,
+      raw: {'inset': '0'},
+    ),
+    css('${_notice.selector} button').styles(
+      display: .block,
+      padding: .symmetric(vertical: 0.35.rem, horizontal: 0.9.rem),
+      margin: .only(top: 0.6.rem, right: .auto, bottom: .zero, left: .auto),
+      radius: .circular(999.px),
+      color: accentInkColor,
+      fontSize: 0.8.rem,
+      fontWeight: .w600,
+      backgroundColor: accentColor,
+    ),
+    css(_gate.selector).styles(
+      display: .flex,
+      position: const .absolute(),
+      justifyContent: .center,
+      alignItems: .center,
+      backdropFilter: .blur(1.px),
+      raw: {'inset': '0', 'background': colorMix(surfaceColor, 55)},
+    ),
+    css('${_gate.selector} span').styles(
+      padding: .symmetric(vertical: 0.45.rem, horizontal: 1.1.rem),
+      radius: .circular(999.px),
+      color: accentInkColor,
+      fontSize: 0.875.rem,
+      fontWeight: .w600,
+      backgroundColor: accentColor,
+    ),
+    css(_gateDone.selector).styles(
+      position: .absolute(top: 0.35.rem, right: 0.35.rem),
+      padding: .symmetric(vertical: 0.15.rem, horizontal: 0.55.rem),
+      radius: .circular(6.px),
+      color: text2Color,
+      fontSize: 0.75.rem,
+      backgroundColor: surface2Color,
+    ),
+    css(_caption.selector).styles(
+      padding: .symmetric(vertical: 0.75.rem, horizontal: 0.9.rem),
+      border: .only(top: hairlineSide(borderColor)),
+      color: mutedColor,
+      fontSize: 0.85.rem,
+    ),
+    css(
+      '${_caption.selector} a',
+    ).styles(color: text2Color, raw: underlinedLink),
+  ];
+
+  /// Source, one file at a time: the toolbar with the tab strip and the copy
+  /// button beside it.
+  static List<StyleRule> get _source => [
+    css(
+      _code.selector,
+    ).styles(padding: .fromLTRB(0.75.rem, .zero, 0.75.rem, 0.75.rem)),
+    // The radio is clipped away; its label is the visible tab.
+    css(_tabInput.selector).styles(
+      position: const .absolute(),
+      width: 1.px,
+      height: 1.px,
+      margin: .all((-1).px),
+      overflow: .hidden,
+      opacity: 0,
+      raw: {'clip': 'rect(0 0 0 0)'},
+    ),
+    css(_toolbar.selector).styles(
+      display: .flex,
+      padding: .fromLTRB(0.35.rem, 0.35.rem, 0.35.rem, .zero),
+      alignItems: .center,
+      gap: .all(0.25.rem),
+    ),
+    // The copy button sits beside the strip, not in it, so it stays put when
+    // the strip scrolls.
+    css(_tabs.selector).styles(
+      display: .flex,
+      minWidth: .zero,
+      overflow: const .only(x: .auto),
+      alignItems: .center,
+      gap: .all(0.25.rem),
+      raw: {'flex': '1', 'scrollbar-width': 'none'},
+    ),
+  ];
+
+  static List<StyleRule> get _tabRules => [
+    css(_tab.selector).styles(
+      padding: .symmetric(vertical: 0.45.rem, horizontal: 0.8.rem),
+      border: hairline(const Color('transparent')),
+      cursor: .pointer,
+      transition: .combine([
+        Transition('color', duration: 150.ms, curve: .ease),
+        Transition('background-color', duration: 150.ms, curve: .ease),
+      ]),
+      flex: .none,
+      color: mutedColor,
+      fontFamily: fontMono,
+      fontSize: 0.75.rem,
+      whiteSpace: .noWrap,
+      raw: {'border-bottom': '0', 'border-radius': '8px 8px 0 0'},
+    ),
+    css('${_tab.selector}:hover').styles(color: textColor),
+    // The checked radio picks its tab: the label right after it.
+    css('${_tabInput.selector}:checked + ${_tab.selector}').styles(
+      color: textColor,
+      backgroundColor: bg2Color,
+      raw: {
+        'border-color': borderColor.value,
+        'box-shadow': 'inset 0 2px 0 var(--af-accent)',
+      },
+    ),
+    // The radio is clipped away; its label shows the keyboard focus instead.
+    css('${_tabInput.selector}:focus-visible + ${_tab.selector}').styles(
+      outline: Outline(
+        color: accentTextColor,
+        style: .solid,
+        width: OutlineWidth(2.px),
+        offset: (-2).px,
+      ),
+    ),
+  ];
+
+  static List<StyleRule> get _panelRules => [
+    css(_panel.selector).styles(
+      display: .none,
+      margin: .only(top: (-1).px),
+      border: hairline(borderColor),
+      overflow: .hidden,
+      backgroundColor: bg2Color,
+      raw: {
+        'border-radius': '0 var(--af-radius) var(--af-radius) var(--af-radius)',
+      },
+    ),
+    css('${_panel.selector} pre').styles(
+      maxHeight: 420.px,
+      padding: .symmetric(vertical: 0.9.rem, horizontal: 1.rem),
+      margin: .zero,
+      overflow: .auto,
+      fontSize: 0.8125.rem,
+      lineHeight: const .expression('1.65'),
+      raw: {
+        'tab-size': '2',
+        'scrollbar-width': 'thin',
+        'scrollbar-color': 'var(--af-border-2) transparent',
+      },
+    ),
+    css(
+      '${_panel.selector} code',
+    ).styles(display: .block, minWidth: .maxContent),
+    // The checked radio also picks its panel, for up to eight files.
+    css(
+      [for (var n = 1; n <= 8; n++) _panelSelector(n)].join(', '),
+    ).styles(display: .block),
+  ];
+
+  static String _panelSelector(int n) =>
+      '${_code.selector}:has(${_tabInput.selector}:nth-of-type($n):checked) '
+      '${_panel.selector}:nth-child($n)';
+
   @override
   Component build(BuildContext context) {
     return figure(
-      classes: 'af-example',
+      classes: _example.name,
       attributes: {'data-layout': layout.name},
       [
-        div(classes: 'af-example-bar', [
-          const span(
-            classes: 'af-dots',
-            attributes: {'aria-hidden': 'true'},
-            [span([]), span([]), span([])],
+        div(classes: _bar.name, [
+          span(
+            classes: _dots.name,
+            attributes: const {'aria-hidden': 'true'},
+            const [span([]), span([]), span([])],
           ),
-          span(classes: 'af-example-title', [.text(example.title)]),
-          const span(
-            classes: 'af-example-status',
-            attributes: {'data-status': 'idle', 'aria-live': 'polite'},
-            [.text('idle')],
+          span(classes: _title.name, [.text(example.title)]),
+          span(
+            classes: _status.name,
+            attributes: const {'data-status': 'idle', 'aria-live': 'polite'},
+            const [.text('idle')],
           ),
         ]),
-        div(classes: 'af-example-body', [
+        div(classes: _body.name, [
           div(
-            classes: 'af-example-stage',
+            classes: _stage.name,
             attributes: {
               'data-example-id': example.id,
               'data-settled': 'false',
@@ -60,7 +366,7 @@ class ExampleFrame extends StatelessComponent {
           if (layout == ExampleLayout.split) _SourceTabs(example: example),
         ]),
         if (layout == ExampleLayout.split)
-          const figcaption(classes: 'af-example-caption', [
+          figcaption(classes: _caption.name, const [
             .text(
               'Field widgets prefixed Docs are shorthands the documentation '
               'defines, not part of the package. ',
@@ -82,15 +388,15 @@ class _SourceTabs extends StatelessComponent {
   Component build(BuildContext context) {
     final group = 'tabs-${example.id}';
     return div(
-      classes: 'af-example-code',
+      classes: ExampleFrame._code.name,
       attributes: const {'data-tabs': 'true'},
       [
-        div(classes: 'af-example-toolbar', [
+        div(classes: ExampleFrame._toolbar.name, [
           // What it is, to assistive technology: a group of radio buttons, one
           // per file, each followed by the label that is its visible tab. The
           // CSS reads the checked one to show its tab and its panel.
           div(
-            classes: 'af-example-tabs',
+            classes: ExampleFrame._tabs.name,
             attributes: const {
               'role': 'radiogroup',
               'aria-label': 'Source files',
@@ -103,36 +409,27 @@ class _SourceTabs extends StatelessComponent {
                     'type': 'radio',
                     'name': group,
                     'id': '$group-$index',
-                    'class': 'af-tab-input',
+                    'class': ExampleFrame._tabInput.name,
                     'aria-label': file.name,
                     if (index == 0) 'checked': '',
                   },
                 ),
                 label(
-                  classes: 'af-example-tab',
+                  classes: ExampleFrame._tab.name,
                   attributes: {'for': '$group-$index'},
                   [.text(file.name)],
                 ),
               ],
             ],
           ),
-          button(
-            classes: 'af-example-copy',
-            attributes: const {
-              'type': 'button',
-              'data-copy': '',
-              'aria-label': 'Copy this file',
-              'title': 'Copy this file',
-            },
-            [
-              span(classes: 'af-copy-idle', [Icon.copy.build(size: 15)]),
-              span(classes: 'af-copy-done', [Icon.check.build(size: 15)]),
-            ],
+          const CopyButton.sourceFile(
+            ariaLabel: 'Copy this file',
+            title: 'Copy this file',
           ),
         ]),
-        div(classes: 'af-example-panels', [
+        div(classes: ExampleFrame._panels.name, [
           for (final file in example.files)
-            div(classes: 'af-code-panel', [
+            div(classes: ExampleFrame._panel.name, [
               pre(
                 attributes: const {'tabindex': '0'},
                 [code(highlightDart(file.code))],
diff --git a/landing/lib/components/footer.dart b/landing/lib/components/footer.dart
index b4933e2..44d2021 100644
--- a/landing/lib/components/footer.dart
+++ b/landing/lib/components/footer.dart
@@ -1,23 +1,110 @@
 import 'package:advanced_forms_landing/components/button.dart';
-import 'package:advanced_forms_landing/components/nav_bar.dart';
-import 'package:advanced_forms_landing/components/section.dart';
+import 'package:advanced_forms_landing/components/logo.dart';
+import 'package:advanced_forms_landing/components/text.dart';
 import 'package:advanced_forms_landing/site.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'footer.scopes.dart';
+
+/// The closing call to action, the link columns and the colophon.
+@scopedCss
 class SiteFooter extends StatelessComponent {
   const SiteFooter({required this.version, super.key});
 
   final String version;
 
+  static const _class = _$SiteFooterScope;
+  static final _footer = _class('af-footer');
+  static final _cta = _class('af-cta');
+  static final _ctaInner = _class('af-cta-inner');
+  static final _grid = _class('af-footer-grid');
+  static final _brand = _class('af-footer-brand');
+  static final _bottom = _class('af-footer-bottom');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_footer.selector).styles(
+      border: .only(top: hairlineSide(borderColor)),
+      fontSize: 1.rem,
+      backgroundColor: bg2Color,
+    ),
+    css(_cta.selector).styles(
+      padding: const .symmetric(
+        vertical: .expression('clamp(3.5rem, 7vw, 5.5rem)'),
+        horizontal: .zero,
+      ),
+      border: .only(bottom: hairlineSide(borderColor)),
+      raw: {
+        'background':
+            'radial-gradient(50% 60% at 50% 100%, var(--af-accent-soft), '
+            'transparent 70%), var(--af-bg-2)',
+      },
+    ),
+    css(_ctaInner.selector).styles(maxWidth: 40.rem, textAlign: .center),
+    css(
+      '${_cta.selector} h2',
+    ).styles(fontSize: const .expression('clamp(1.9rem, 3.6vw, 2.75rem)')),
+    css('${_cta.selector} p').styles(
+      margin: .only(top: 1.rem),
+      color: text2Color,
+      fontSize: 1.1.rem,
+    ),
+    css(_grid.selector).styles(
+      display: .grid,
+      padding: .symmetric(vertical: 3.5.rem, horizontal: .zero),
+      gap: .all(2.5.rem),
+    ),
+    css('${_grid.selector} h3').styles(
+      margin: .only(bottom: 0.9.rem),
+      color: mutedColor,
+      fontFamily: fontMono,
+      fontSize: 0.72.rem,
+      fontWeight: .w600,
+      textTransform: .upperCase,
+      letterSpacing: 0.08.em,
+    ),
+    css('${_grid.selector} ul').styles(display: .grid, gap: .all(0.5.rem)),
+    css('${_grid.selector} li a').styles(color: text2Color),
+    css('${_grid.selector} li a:hover').styles(color: accentTextColor),
+    css('${_brand.selector} p').styles(
+      maxWidth: 24.rem,
+      margin: .only(top: 1.rem),
+      color: text2Color,
+      fontSize: 0.95.rem,
+    ),
+    // Links in running text are underlined, not only coloured.
+    css('${_brand.selector} p a').styles(color: textColor, raw: underlinedLink),
+    css(_bottom.selector).styles(
+      display: .flex,
+      padding: .only(top: 1.5.rem, bottom: 2.rem),
+      border: .only(top: hairlineSide(borderColor)),
+      flexWrap: .wrap,
+      justifyContent: .spaceBetween,
+      gap: .all(0.75.rem),
+      color: mutedColor,
+      fontSize: 0.85.rem,
+    ),
+    css('${_bottom.selector} a').styles(color: text2Color, raw: underlinedLink),
+    css.media(MediaQuery.all(minWidth: 760.px), [
+      css(_grid.selector).styles(raw: {'grid-template-columns': '1fr 1fr'}),
+    ]),
+    css.media(MediaQuery.all(minWidth: 1000.px), [
+      css(
+        _grid.selector,
+      ).styles(raw: {'grid-template-columns': '1.6fr 1fr 1fr 1.4fr'}),
+    ]),
+  ];
+
   @override
   Component build(BuildContext context) {
-    return footer(classes: 'af-footer', [
-      const section(
-        classes: 'af-cta',
-        attributes: {'aria-labelledby': 'cta-heading'},
+    return footer(classes: _footer.name, [
+      section(
+        classes: _cta.name,
+        attributes: const {'aria-labelledby': 'cta-heading'},
         [
-          div(classes: 'af-container af-cta-inner', [
+          div(classes: (container + _ctaInner).name, const [
             h2(id: 'cta-heading', [.text('Ready to type your first field?')]),
             p([
               .text(
@@ -25,7 +112,7 @@ class SiteFooter extends StatelessComponent {
                 'can be submitted.',
               ),
             ]),
-            div(classes: 'af-hero-actions af-center', [
+            ButtonRow(center: true, [
               Button(
                 'Get it on pub.dev',
                 href: pubUrl,
@@ -42,9 +129,9 @@ class SiteFooter extends StatelessComponent {
           ]),
         ],
       ),
-      div(classes: 'af-container af-footer-grid', [
-        div(classes: 'af-footer-brand', [
-          logo(),
+      div(classes: (container + _grid).name, [
+        div(classes: _brand.name, [
+          const Logo(large: true),
           p([
             const .text('Form validation and state management for Flutter. '),
             externalLink(changelogUrl, [.text('v$version')]),
@@ -126,7 +213,7 @@ class SiteFooter extends StatelessComponent {
           ],
         ),
       ]),
-      div(classes: 'af-container af-footer-bottom', [
+      div(classes: (container + _bottom).name, [
         p([
           .text('© ${DateTime.now().year} '),
           externalLink(leancodeUrl, [const .text('LeanCode')]),
diff --git a/landing/lib/components/hero.dart b/landing/lib/components/hero.dart
index 7a86adc..737c21e 100644
--- a/landing/lib/components/hero.dart
+++ b/landing/lib/components/hero.dart
@@ -1,45 +1,239 @@
 import 'package:advanced_forms_landing/components/button.dart';
+import 'package:advanced_forms_landing/components/copy_button.dart';
 import 'package:advanced_forms_landing/components/example_frame.dart';
-import 'package:advanced_forms_landing/components/icons.dart';
 import 'package:advanced_forms_landing/components/pill.dart';
-import 'package:advanced_forms_landing/components/section.dart';
+import 'package:advanced_forms_landing/components/text.dart';
 import 'package:advanced_forms_landing/examples.dart';
 import 'package:advanced_forms_landing/site.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'hero.scopes.dart';
+
+/// The hero: badges, the pitch, the install command and the first live demo.
+@scopedCss
 class Hero extends StatelessComponent {
   const Hero({required this.version, required this.demo, super.key});
 
   final String version;
   final LandingExample demo;
 
+  static const _class = _$HeroScope;
+  static final _hero = _class('af-hero');
+  static final _bg = _class('af-hero-bg');
+  static final _grid = _class('af-hero-grid');
+  static final _badges = _class('af-hero-badges');
+  static final _accent = _class('af-accent');
+  static final _lead = _class('af-hero-lead');
+  static final _install = _class('af-install');
+  static final _command = _class('af-install-command');
+  static final _prompt = _class('af-prompt');
+  static final _installAlt = _class('af-install-alt');
+  static final _demo = _class('af-hero-demo');
+  static final _demoLabel = _class('af-demo-label');
+  static final _demoDot = _class('af-demo-dot');
+
+  @css
+  static List<StyleRule> get styles => [
+    ..._layout,
+    ..._copy,
+    ..._installRules,
+    ..._demoRules,
+    css.media(MediaQuery.all(minWidth: 1000.px), [
+      css(_grid.selector).styles(raw: {'grid-template-columns': '1.05fr 1fr'}),
+    ]),
+    css.media(MediaQuery.all(maxWidth: 540.px), [
+      // One row still: the prompt goes, the button shrinks to its icon, and
+      // the command scrolls sideways if a screen is narrower than it.
+      css(_command.selector).styles(
+        padding: .fromLTRB(0.85.rem, 0.4.rem, 0.4.rem, 0.4.rem),
+        gap: .all(0.5.rem),
+      ),
+      css('${_command.selector} code').styles(fontSize: 0.875.rem),
+      css('${_command.selector} ${_prompt.selector}').styles(display: .none),
+      css(
+        '${_command.selector} ${CopyButton.labelClassName.selector}',
+      ).styles(display: .none),
+      css(
+        '${_command.selector} ${CopyButton.className.selector}',
+      ).styles(padding: .all(0.5.rem)),
+    ]),
+  ];
+
+  static List<StyleRule> get _layout => [
+    css(_hero.selector).styles(
+      position: const .relative(),
+      padding: const .fromLTRB(
+        .zero,
+        .expression('clamp(3rem, 8vw, 6rem)'),
+        .zero,
+        .expression('clamp(3rem, 6vw, 4.5rem)'),
+      ),
+      overflow: .hidden,
+      raw: {'isolation': 'isolate'},
+    ),
+    css(_bg.selector).styles(
+      position: const .absolute(),
+      zIndex: const ZIndex(-1),
+      raw: {
+        'inset': '0',
+        'background': _glow(
+          colorMix(accentColor, 55),
+          colorMix(accentColor, 25),
+          colorMix(textColor, 6),
+        ),
+        'mask-image': 'linear-gradient(to bottom, #000 30%, transparent 100%)',
+        '-webkit-mask-image':
+            'linear-gradient(to bottom, #000 30%, transparent 100%)',
+      },
+    ),
+    css('.dark ${_bg.selector}').styles(
+      raw: {
+        'background': _glow(
+          colorMix(accentColor, 16),
+          colorMix(accentColor, 7),
+          colorMix(accentColor, 9),
+        ),
+      },
+    ),
+    css(
+      _grid.selector,
+    ).styles(display: .grid, alignItems: .center, gap: .all(3.rem)),
+    // Either column may hold a wide code sample; let it shrink and scroll
+    // instead of stretching the page.
+    css('${_grid.selector} > *').styles(minWidth: .zero),
+    css(_badges.selector).styles(
+      display: .flex,
+      margin: .only(bottom: 1.5.rem),
+      flexWrap: .wrap,
+      gap: .all(0.5.rem),
+    ),
+  ];
+
+  /// The backdrop: two accent glows and a fine diagonal hatch, in the colours
+  /// each theme needs.
+  static String _glow(String glow1, String glow2, String hatch) =>
+      'radial-gradient(55% 45% at 72% 18%, $glow1, transparent 65%), '
+      'radial-gradient(40% 40% at 10% 90%, $glow2, transparent 60%), '
+      'repeating-linear-gradient(-58deg, transparent 0 148px, '
+      '$hatch 148px 149px)';
+
+  static List<StyleRule> get _copy => [
+    css('${_hero.selector} h1').styles(
+      fontSize: const .expression('clamp(2.4rem, 5.2vw, 4rem)'),
+      fontWeight: .w700,
+      letterSpacing: (-0.035).em,
+      lineHeight: const .expression('1.02'),
+    ),
+    // The accented words of the headline: accent text on dark, a highlighter
+    // stroke under dark text on light.
+    css(_accent.selector).styles(color: accentTextColor),
+    css(':root:not(.dark) ${_hero.selector} h1 ${_accent.selector}').styles(
+      padding: .symmetric(vertical: .zero, horizontal: 0.1.em),
+      margin: .symmetric(vertical: .zero, horizontal: (-0.1).em),
+      color: textColor,
+      raw: {
+        'background': 'linear-gradient(transparent 55%, var(--af-accent) 55%)',
+      },
+    ),
+    css(_lead.selector).styles(
+      maxWidth: 38.rem,
+      margin: .only(top: 1.5.rem),
+      color: text2Color,
+      fontSize: const .expression('clamp(1.1rem, 1.6vw, 1.3rem)'),
+    ),
+  ];
+
+  static List<StyleRule> get _installRules => [
+    css(_install.selector).styles(margin: .only(top: 2.rem)),
+    css(_command.selector).styles(
+      display: .flex,
+      maxWidth: 34.rem,
+      padding: .fromLTRB(1.rem, 0.5.rem, 0.5.rem, 0.5.rem),
+      border: hairline(border2Color),
+      radius: const .circular(radius),
+      alignItems: .center,
+      gap: .all(0.75.rem),
+      backgroundColor: surfaceColor,
+      raw: {'box-shadow': shadow},
+    ),
+    css('${_command.selector} code').styles(
+      minWidth: .zero,
+      overflow: const .only(x: .auto),
+      fontSize: 0.95.rem,
+      whiteSpace: .noWrap,
+      raw: {'flex': '1'},
+    ),
+    css(_prompt.selector).styles(
+      userSelect: .none,
+      color: accentTextColor,
+      fontFamily: fontMono,
+      fontWeight: .w600,
+    ),
+    css(_installAlt.selector).styles(
+      margin: .only(top: 0.6.rem),
+      color: mutedColor,
+      fontSize: 0.85.rem,
+    ),
+    css(
+      '${_installAlt.selector} a',
+    ).styles(color: text2Color, raw: underlinedLink),
+  ];
+
+  static List<StyleRule> get _demoRules => [
+    css(_demoLabel.selector).styles(
+      display: .flex,
+      margin: .only(bottom: 0.75.rem),
+      alignItems: .center,
+      gap: .all(0.6.rem),
+      color: accentTextColor,
+      fontFamily: fontMono,
+      fontSize: 0.78.rem,
+      fontWeight: .w600,
+      textTransform: .upperCase,
+      letterSpacing: 0.06.em,
+    ),
+    css(_demoDot.selector).styles(
+      width: 8.px,
+      height: 8.px,
+      radius: .circular(50.percent),
+      flex: .none,
+      backgroundColor: okColor,
+      raw: {
+        'box-shadow': '0 0 0 3px ${colorMix(okColor, 25)}',
+        // `Animation` cannot say `infinite`.
+        'animation': 'af-pulse 1.6s ease-in-out infinite',
+      },
+    ),
+  ];
+
   @override
   Component build(BuildContext context) {
     return section(
       id: 'top',
-      classes: 'af-hero',
+      classes: _hero.name,
       attributes: const {'aria-labelledby': 'hero-heading'},
       [
-        const div(
-          classes: 'af-hero-bg',
-          attributes: {'aria-hidden': 'true'},
-          [],
+        div(
+          classes: _bg.name,
+          attributes: const {'aria-hidden': 'true'},
+          const [],
         ),
-        div(classes: 'af-container af-hero-grid', [
+        div(classes: (container + _grid).name, [
           div([
-            p(classes: 'af-hero-badges', [
+            p(classes: _badges.name, [
               Pill('v$version', href: pubUrl, accent: true),
               const Pill('Apache-2.0'),
               const Pill('Easy to use'),
               const Pill('Time-saving'),
               const Pill('Out of the box'),
             ]),
-            const h1(id: 'hero-heading', [
-              .text('Complicated forms. '),
-              span(classes: 'af-accent', [.text('Simple code.')]),
+            h1(id: 'hero-heading', [
+              const .text('Complicated forms. '),
+              span(classes: _accent.name, const [.text('Simple code.')]),
             ]),
-            const p(classes: 'af-hero-lead', [
+            p(classes: _lead.name, const [
               .text(
                 'Typed fields, three validation modes out of the box, async '
                 'checks with cancellation, cross-field rules and wizards for '
@@ -50,30 +244,21 @@ class Hero extends StatelessComponent {
               code([.text('ValueListenable')]),
               .text(' your app already uses.'),
             ]),
-            div(classes: 'af-install', [
-              div(classes: 'af-install-command', [
-                const span(
-                  classes: 'af-prompt',
-                  attributes: {'aria-hidden': 'true'},
-                  [.text(r'$')],
+            div(classes: _install.name, [
+              div(classes: _command.name, [
+                span(
+                  classes: _prompt.name,
+                  attributes: const {'aria-hidden': 'true'},
+                  const [.text(r'$')],
                 ),
                 const code([.text(installCommand)]),
-                button(
-                  classes: 'af-copy-button',
-                  attributes: const {
-                    'type': 'button',
-                    'data-copy-text': installCommand,
-                    'aria-label': 'Copy to clipboard',
-                    'aria-live': 'polite',
-                  },
-                  [
-                    span(classes: 'af-copy-idle', [Icon.copy.build(size: 15)]),
-                    span(classes: 'af-copy-done', [Icon.check.build(size: 15)]),
-                    const span(classes: 'af-copy-label', [.text('Copy')]),
-                  ],
+                const CopyButton(
+                  text: installCommand,
+                  label: 'Copy',
+                  ariaLabel: 'Copy to clipboard',
                 ),
               ]),
-              p(classes: 'af-install-alt', [
+              p(classes: _installAlt.name, [
                 const .text('Coming from '),
                 const code([.text('leancode_forms')]),
                 const .text(' 0.1.x? '),
@@ -83,7 +268,7 @@ class Hero extends StatelessComponent {
                 const .text('.'),
               ]),
             ]),
-            const div(classes: 'af-hero-actions', [
+            const ButtonRow([
               Button(
                 'Build your first form',
                 href: '$docsPath/first-form',
@@ -105,14 +290,14 @@ class Hero extends StatelessComponent {
               ),
             ]),
           ]),
-          div(classes: 'af-hero-demo', [
-            const p(classes: 'af-demo-label', [
+          div(classes: _demo.name, [
+            p(classes: _demoLabel.name, [
               span(
-                classes: 'af-demo-dot',
-                attributes: {'aria-hidden': 'true'},
-                [],
+                classes: _demoDot.name,
+                attributes: const {'aria-hidden': 'true'},
+                const [],
               ),
-              .text(
+              const .text(
                 'Try it — a live demo running in Flutter. Nothing you type is '
                 'sent anywhere.',
               ),
diff --git a/landing/lib/components/logo.dart b/landing/lib/components/logo.dart
new file mode 100644
index 0000000..ae80d04
--- /dev/null
+++ b/landing/lib/components/logo.dart
@@ -0,0 +1,67 @@
+import 'package:advanced_forms_landing/site.dart';
+import 'package:advanced_forms_landing/styles.dart';
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+part 'logo.scopes.dart';
+
+/// The designed word mark: `logo-light.svg` on the light theme and
+/// `logo-dark.svg` on the dark one. Both files are served by the docs app from
+/// its `public/` folder, so the two sites share one pair of assets, and the
+/// class names here are the ones the docs' `global.css` uses for the same
+/// mark.
+@scopedCss
+class Logo extends StatelessComponent {
+  const Logo({this.large = false, super.key});
+
+  /// The footer size. The regular mark fits a header row, and shrinks a
+  /// little more on narrow screens so that row still fits.
+  final bool large;
+
+  static const _logo = ClassName.shared('af-logo');
+  static const _large = ClassName.shared('af-logo-large');
+  static const _class = _$LogoScope;
+  static final _light = _class('af-logo-light');
+  static final _dark = _class('af-logo-dark');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_logo.selector).styles(display: .inlineFlex, alignItems: .center),
+    // The intrinsic size is the SVG's viewBox; the height is set here and the
+    // browser keeps the ratio, so the space is reserved before the file
+    // arrives.
+    css(
+      '${_logo.selector} img',
+    ).styles(width: .auto, height: 34.px, raw: {'vertical-align': 'middle'}),
+    css('${_large.selector} img').styles(height: 44.px),
+    // One file per theme.
+    css(_dark.selector).styles(display: .none),
+    css('.dark ${_light.selector}').styles(display: .none),
+    css('.dark ${_dark.selector}').styles(display: .inline),
+    css.media(MediaQuery.all(maxWidth: 540.px), [
+      css(
+        '${_logo.selector}:not(${_large.selector}) img',
+      ).styles(height: 28.px),
+    ]),
+  ];
+
+  @override
+  Component build(BuildContext context) {
+    return span(classes: (large ? _logo + _large : _logo).name, [
+      img(
+        src: '/logo-light.svg',
+        alt: siteName,
+        width: 1480,
+        height: 388,
+        classes: _light.name,
+      ),
+      img(
+        src: '/logo-dark.svg',
+        alt: siteName,
+        width: 1480,
+        height: 388,
+        classes: _dark.name,
+      ),
+    ]);
+  }
+}
diff --git a/landing/lib/components/nav_bar.dart b/landing/lib/components/nav_bar.dart
index 4eb0027..e27dfb5 100644
--- a/landing/lib/components/nav_bar.dart
+++ b/landing/lib/components/nav_bar.dart
@@ -1,34 +1,107 @@
 import 'package:advanced_forms_landing/components/icons.dart';
-import 'package:advanced_forms_landing/components/section.dart';
+import 'package:advanced_forms_landing/components/logo.dart';
+import 'package:advanced_forms_landing/components/text.dart';
 import 'package:advanced_forms_landing/site.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'nav_bar.scopes.dart';
+
 /// The site header: the word mark on the left, the places a visitor can go on
 /// the right. The docs are a separate app under `/docs`, served from the same
 /// domain, so every item is a plain link.
+@scopedCss
 class NavBar extends StatelessComponent {
   const NavBar({super.key});
 
+  static const _class = _$NavBarScope;
+  static final _header = _class('af-header');
+  static final _nav = _class('af-nav');
+  static final _brand = _class('af-brand');
+  static final _links = _class('af-nav-links');
+  static final _secondary = _class('af-nav-secondary');
+  static final _toggle = _class('af-theme-toggle');
+  static final _sun = _class('af-theme-sun');
+  static final _moon = _class('af-theme-moon');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_header.selector).styles(
+      position: const .sticky(top: .zero),
+      zIndex: const ZIndex(50),
+      height: headerHeight,
+      border: .only(bottom: hairlineSide(borderColor)),
+      backdropFilter: .list([const .saturate(1.4), .blur(14.px)]),
+      raw: {
+        'background': colorMix(bgColor, 80),
+        '-webkit-backdrop-filter': 'saturate(140%) blur(14px)',
+      },
+    ),
+    css(_nav.selector).styles(
+      display: .flex,
+      height: 100.percent,
+      justifyContent: .spaceBetween,
+      alignItems: .center,
+      gap: .all(1.rem),
+    ),
+    css(_brand.selector).styles(display: .inlineFlex, alignItems: .center),
+    css(
+      _links.selector,
+    ).styles(display: .flex, alignItems: .center, gap: .all(0.25.rem)),
+    css('${_links.selector} a, ${_toggle.selector}').styles(
+      display: .inlineFlex,
+      padding: .symmetric(vertical: 0.5.rem, horizontal: 0.85.rem),
+      radius: .circular(999.px),
+      transition: .combine([
+        Transition('background-color', duration: 150.ms, curve: .ease),
+        Transition('color', duration: 150.ms, curve: .ease),
+      ]),
+      alignItems: .center,
+      gap: .all(0.45.rem),
+      color: text2Color,
+      fontSize: 0.95.rem,
+      fontWeight: .w500,
+    ),
+    css(
+      '${_links.selector} a:hover, ${_toggle.selector}:hover',
+    ).styles(color: textColor, backgroundColor: surface2Color),
+    css(_toggle.selector).styles(padding: .all(0.5.rem)),
+    // One icon per theme.
+    css(_moon.selector).styles(display: .none),
+    css('.dark ${_sun.selector}').styles(display: .none),
+    css('.dark ${_moon.selector}').styles(display: .inlineFlex),
+    css.media(MediaQuery.all(maxWidth: 540.px), [
+      css('${_links.selector} a, ${_toggle.selector}').styles(
+        padding: .symmetric(vertical: 0.5.rem, horizontal: 0.55.rem),
+        fontSize: 0.9.rem,
+      ),
+      css(_links.selector).styles(gap: const .all(.zero)),
+      // Examples is reachable from the docs; the row has to fit next to the
+      // logo.
+      css(_secondary.selector).styles(display: .none),
+    ]),
+  ];
+
   @override
   Component build(BuildContext context) {
-    return header(classes: 'af-header', [
+    return header(classes: _header.name, [
       nav(
-        classes: 'af-container af-nav',
+        classes: (container + _nav).name,
         attributes: const {'aria-label': 'Primary'},
         [
           a(
             href: '/',
-            classes: 'af-brand',
+            classes: _brand.name,
             attributes: const {'aria-label': '$siteName home'},
-            [logo()],
+            const [Logo()],
           ),
-          ul(classes: 'af-nav-links', [
+          ul(classes: _links.name, [
             const li([
               a(href: docsPath, [.text('Docs')]),
             ]),
             // Secondary: dropped on narrow screens, where the row would not fit.
-            const li(classes: 'af-nav-secondary', [
+            li(classes: _secondary.name, const [
               a(href: '$docsPath/example-app', [.text('Examples')]),
             ]),
             li([
@@ -43,7 +116,7 @@ class NavBar extends StatelessComponent {
             ]),
             li([
               button(
-                classes: 'af-theme-toggle',
+                classes: _toggle.name,
                 attributes: const {
                   'type': 'button',
                   'data-theme-toggle': '',
@@ -51,8 +124,8 @@ class NavBar extends StatelessComponent {
                   'title': 'Toggle theme',
                 },
                 [
-                  span(classes: 'af-theme-sun', [Icon.sun.build(size: 18)]),
-                  span(classes: 'af-theme-moon', [Icon.moon.build(size: 18)]),
+                  span(classes: _sun.name, [Icon.sun.build(size: 18)]),
+                  span(classes: _moon.name, [Icon.moon.build(size: 18)]),
                 ],
               ),
             ]),
@@ -62,25 +135,3 @@ class NavBar extends StatelessComponent {
     ]);
   }
 }
-
-/// The designed word mark: `logo-light.svg` on the light theme and
-/// `logo-dark.svg` on the dark one. Both files are served by the docs app from
-/// its `public/` folder, so the two sites share one pair of assets. The
-/// intrinsic size is the SVG's viewBox; the stylesheet sets the height and the
-/// browser keeps the ratio, so the space is reserved before the file arrives.
-Component logo() => const span(classes: 'af-logo', [
-  img(
-    src: '/logo-light.svg',
-    alt: siteName,
-    width: 1480,
-    height: 388,
-    classes: 'af-theme-light',
-  ),
-  img(
-    src: '/logo-dark.svg',
-    alt: siteName,
-    width: 1480,
-    height: 388,
-    classes: 'af-theme-dark',
-  ),
-]);
diff --git a/landing/lib/components/pill.dart b/landing/lib/components/pill.dart
index 95123e4..75e97fc 100644
--- a/landing/lib/components/pill.dart
+++ b/landing/lib/components/pill.dart
@@ -1,11 +1,13 @@
-import 'package:advanced_forms_landing/components/section.dart';
+import 'package:advanced_forms_landing/components/text.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'pill.scopes.dart';
+
 /// A small rounded badge: a version, a licence, a promise. With [href] it
 /// links out; [accent] draws it in the accent colour.
-///
-/// Styled by `.af-pill*` in web/landing.css.
+@scopedCss
 class Pill extends StatelessComponent {
   const Pill(this.text, {this.href, this.accent = false, super.key});
 
@@ -13,9 +15,38 @@ class Pill extends StatelessComponent {
   final String? href;
   final bool accent;
 
+  static const _class = _$PillScope;
+  static final _pill = _class('af-pill');
+  static final _accent = _class('af-pill-accent');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_pill.selector).styles(
+      display: .inlineFlex,
+      padding: .symmetric(vertical: 0.3.rem, horizontal: 0.7.rem),
+      border: hairline(border2Color),
+      radius: .circular(999.px),
+      alignItems: .center,
+      gap: .all(0.35.rem),
+      color: text2Color,
+      fontSize: 0.8.rem,
+      fontWeight: .w500,
+      whiteSpace: .noWrap,
+      raw: {'background': colorMix(textColor, 4)},
+    ),
+    css(_accent.selector).styles(
+      color: accentTextColor,
+      backgroundColor: accentSoftColor,
+      raw: {'border-color': colorMix(accentColor, 45, with_: border2Color)},
+    ),
+    css(
+      'a${_accent.selector}:hover',
+    ).styles(raw: {'border-color': accentColor.value}),
+  ];
+
   @override
   Component build(BuildContext context) {
-    final classes = accent ? 'af-pill af-pill-accent' : 'af-pill';
+    final classes = (accent ? _pill + _accent : _pill).name;
     if (href case final href?) {
       return externalLink(href, classes: classes, [.text(text)]);
     }
diff --git a/landing/lib/components/section.dart b/landing/lib/components/section.dart
index 95788ba..43e8285 100644
--- a/landing/lib/components/section.dart
+++ b/landing/lib/components/section.dart
@@ -1,41 +1,82 @@
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
-/// A landing-page section with the shared eyebrow / heading / lead header.
+part 'section.scopes.dart';
+
+/// A landing-page section: full-bleed padding, a hairline on top, the content
+/// column, and the shared header of an [Eyebrow], a heading and a [Lead].
 ///
 /// Every section gets an `id` for in-page anchors and an `aria-labelledby`
 /// pointing at its heading, so the outline reads well for crawlers and screen
 /// readers alike.
+@scopedCss
 class Section extends StatelessComponent {
   const Section({
-    required this.id,
-    required this.eyebrow,
-    required this.heading,
+    required String this.id,
+    required String this.eyebrow,
+    required List<Component> this.heading,
     required this.children,
     this.lead,
     super.key,
-  });
+  }) : _labelledBy = null;
+
+  /// A section without the shared header: [children] go straight into the
+  /// content column, and [labelledBy] is the id of the heading among them.
+  const Section.plain({
+    required String labelledBy,
+    required this.children,
+    this.id,
+    super.key,
+  }) : eyebrow = null,
+       heading = null,
+       lead = null,
+       _labelledBy = labelledBy;
 
-  final String id;
-  final String eyebrow;
-  final List<Component> heading;
+  final String? id;
+  final String? eyebrow;
+  final List<Component>? heading;
   final List<Component>? lead;
   final List<Component> children;
+  final String? _labelledBy;
+
+  static const _class = _$SectionScope;
+  static final _section = _class('af-section');
+  static final _head = _class('af-section-head');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_section.selector).styles(
+      padding: const .symmetric(
+        vertical: .expression('clamp(3.5rem, 7vw, 6rem)'),
+        horizontal: .zero,
+      ),
+      border: .only(top: hairlineSide(borderColor)),
+    ),
+    css(
+      '${_section.selector} h2',
+    ).styles(fontSize: const .expression('clamp(1.9rem, 3.6vw, 2.75rem)')),
+    css(_head.selector).styles(
+      maxWidth: 44.rem,
+      margin: .only(bottom: 2.5.rem),
+    ),
+  ];
 
   @override
   Component build(BuildContext context) {
-    final headingId = '$id-heading';
+    final headingId = _labelledBy ?? '$id-heading';
     return section(
       id: id,
-      classes: 'af-section',
+      classes: _section.name,
       attributes: {'aria-labelledby': headingId},
       [
-        div(classes: 'af-container', [
-          header(classes: 'af-section-head', [
-            p(classes: 'af-eyebrow', [.text(eyebrow)]),
-            h2(id: headingId, heading),
-            if (lead case final lead?) p(classes: 'af-lead', lead),
-          ]),
+        div(classes: container.name, [
+          if ((eyebrow, heading) case (final eyebrow?, final heading?))
+            header(classes: _head.name, [
+              Eyebrow(eyebrow),
+              h2(id: headingId, heading),
+              if (lead case final lead?) Lead(lead),
+            ]),
           ...children,
         ]),
       ],
@@ -43,27 +84,152 @@ class Section extends StatelessComponent {
   }
 }
 
-/// Renders [text], turning each backtick-quoted span into an inline `<code>`,
-/// so prose data can mention identifiers without hand-built component lists.
-List<Component> rich(String text) => [
-  for (final (i, part) in text.split('`').indexed)
-    if (part.isNotEmpty)
-      if (i.isOdd) code([.text(part)]) else .text(part),
-];
-
-/// An external link that opens in a new tab with the right `rel`.
-Component externalLink(
-  String href,
-  List<Component> children, {
-  String? classes,
-  String? label,
-}) => a(
-  href: href,
-  classes: classes,
-  attributes: {
-    'target': '_blank',
-    'rel': 'noopener noreferrer',
-    'aria-label': ?label,
-  },
-  children,
-);
+/// The small mono line above a heading, with a short accent rule before it.
+@scopedCss
+class Eyebrow extends StatelessComponent {
+  const Eyebrow(this.text, {super.key});
+
+  final String text;
+
+  static const _class = _$EyebrowScope;
+  static final _eyebrow = _class('af-eyebrow');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_eyebrow.selector).styles(
+      display: .inlineFlex,
+      margin: .only(bottom: 1.rem),
+      alignItems: .center,
+      gap: .all(0.5.rem),
+      color: accentTextColor,
+      fontFamily: fontMono,
+      fontSize: 0.78.rem,
+      fontWeight: .w600,
+      textTransform: .upperCase,
+      letterSpacing: 0.08.em,
+    ),
+    css('${_eyebrow.selector}::before').styles(
+      content: '',
+      width: 1.5.rem,
+      height: 2.px,
+      backgroundColor: accentColor,
+    ),
+  ];
+
+  @override
+  Component build(BuildContext context) =>
+      p(classes: _eyebrow.name, [.text(text)]);
+}
+
+/// The paragraph under a heading that says what the section is about.
+@scopedCss
+class Lead extends StatelessComponent {
+  const Lead(this.children, {super.key});
+
+  final List<Component> children;
+
+  static const _class = _$LeadScope;
+  static final _lead = _class('af-lead');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_lead.selector).styles(
+      margin: .only(top: 1.rem),
+      color: text2Color,
+      fontSize: 1.125.rem,
+    ),
+  ];
+
+  @override
+  Component build(BuildContext context) => p(classes: _lead.name, children);
+}
+
+/// A "read more" line under a section's content: one link into the docs.
+@scopedCss
+class MoreLink extends StatelessComponent {
+  const MoreLink(this.text, {required this.href, super.key});
+
+  final String text;
+  final String href;
+
+  static const _class = _$MoreLinkScope;
+  static final _more = _class('af-section-more');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_more.selector).styles(
+      margin: .only(top: 1.5.rem),
+      fontWeight: .w500,
+    ),
+    css('${_more.selector} a').styles(color: accentTextColor),
+    css(
+      '${_more.selector} a:hover',
+    ).styles(textDecoration: const TextDecoration(line: .underline)),
+  ];
+
+  @override
+  Component build(BuildContext context) => p(classes: _more.name, [
+    a(href: href, [.text(text)]),
+  ]);
+}
+
+/// Room above a live demo that follows other content in a section.
+@scopedCss
+class DemoSlot extends StatelessComponent {
+  const DemoSlot(this.child, {super.key});
+
+  final Component child;
+
+  static const _class = _$DemoSlotScope;
+  static final _demo = _class('af-section-demo');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_demo.selector).styles(margin: .only(top: 2.5.rem)),
+  ];
+
+  @override
+  Component build(BuildContext context) => div(classes: _demo.name, [child]);
+}
+
+/// The points under a demo, each led by a short accent dash: bold claim first,
+/// then the sentence that backs it.
+@scopedCss
+class Checklist extends StatelessComponent {
+  const Checklist(this.items, {super.key});
+
+  /// One entry per item; the entry's components become the `<li>`.
+  final List<List<Component>> items;
+
+  static const _class = _$ChecklistScope;
+  static final _list = _class('af-checklist');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_list.selector).styles(
+      display: .grid,
+      maxWidth: 52.rem,
+      margin: .only(top: 2.rem),
+      gap: .all(0.75.rem),
+    ),
+    css('${_list.selector} li').styles(
+      position: const .relative(),
+      padding: .only(left: 1.6.rem),
+      color: text2Color,
+    ),
+    css(
+      '${_list.selector} li strong',
+    ).styles(color: textColor, fontWeight: .w600),
+    css('${_list.selector} li::before').styles(
+      content: '',
+      position: .absolute(top: 0.7.em, left: .zero),
+      width: 0.9.rem,
+      height: 2.px,
+      backgroundColor: accentColor,
+    ),
+  ];
+
+  @override
+  Component build(BuildContext context) =>
+      ul(classes: _list.name, [for (final item in items) li(item)]);
+}
diff --git a/landing/lib/components/sections.dart b/landing/lib/components/sections.dart
index 8cd7e9a..e493e26 100644
--- a/landing/lib/components/sections.dart
+++ b/landing/lib/components/sections.dart
@@ -1,13 +1,18 @@
 import 'package:advanced_forms_landing/components/button.dart';
+import 'package:advanced_forms_landing/components/card.dart';
 import 'package:advanced_forms_landing/components/example_frame.dart';
 import 'package:advanced_forms_landing/components/icons.dart';
 import 'package:advanced_forms_landing/components/pill.dart';
 import 'package:advanced_forms_landing/components/section.dart';
+import 'package:advanced_forms_landing/components/text.dart';
 import 'package:advanced_forms_landing/examples.dart';
 import 'package:advanced_forms_landing/site.dart';
+import 'package:advanced_forms_landing/styles.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
 
+part 'sections.scopes.dart';
+
 /// "The model": the whole form next to the code that is the whole form.
 class ModelSection extends StatelessComponent {
   const ModelSection({required this.example, super.key});
@@ -29,16 +34,16 @@ class ModelSection extends StatelessComponent {
       ),
       children: [
         ExampleFrame(example: example, layout: ExampleLayout.split),
-        ul(classes: 'af-checklist', [
-          li([
+        Checklist([
+          [
             strong(rich('One call to `registerFields`')),
             ...rich(
               ' and the form owns the fields: it disposes them, tracks '
               '`wasModified`, and reaches them in `validate`, `resetAll` and '
               'every other broadcast.',
             ),
-          ]),
-          li([
+          ],
+          [
             strong(
               rich(
                 'The field owns its `TextEditingController` and `FocusNode`.',
@@ -48,14 +53,14 @@ class ModelSection extends StatelessComponent {
               ' Bind the widget to `field.textController` and programmatic '
               'writes — `reset`, `prefill`, a relation — show up on screen.',
             ),
-          ]),
-          li([
+          ],
+          [
             const strong([.text('Errors are your type.')]),
             ...rich(
               ' `E` is whatever you choose: a string, an enum, a sealed class. '
               'The package never formats a message.',
             ),
-          ]),
+          ],
         ]),
       ],
     );
@@ -128,11 +133,72 @@ const _modes = [
 
 /// "Three rules": the trigger behaviour, the three modes, and a demo that
 /// switches between them.
+@scopedCss
 class ValidationSection extends StatelessComponent {
   const ValidationSection({required this.example, super.key});
 
   final LandingExample example;
 
+  static const _class = _$ValidationSectionScope;
+  static final _rulesList = _class('af-rules');
+  static final _rule = _class('af-rule');
+  static final _modesGrid = _class('af-modes');
+  static final _mode = _class('af-mode');
+  static final _modeHead = _class('af-mode-head');
+  static final _modeWhen = _class('af-mode-when');
+
+  /// The numbered rules, and what the mode cards add to a [Card].
+  @css
+  static List<StyleRule> get styles => [
+    css(
+      _rulesList.selector,
+    ).styles(display: .grid, gap: .all(1.rem), raw: {'counter-reset': 'rule'}),
+    css(_rule.selector).styles(
+      position: const .relative(),
+      padding: .only(left: 3.25.rem),
+    ),
+    css('${_rule.selector}::before').styles(
+      position: .absolute(top: 0.15.rem, left: .zero),
+      color: accentTextColor,
+      fontFamily: fontMono,
+      fontSize: 0.85.rem,
+      fontWeight: .w600,
+      raw: {
+        'counter-increment': 'rule',
+        'content': 'counter(rule, decimal-leading-zero)',
+      },
+    ),
+    css('${_rule.selector} h3').styles(
+      margin: .only(bottom: 0.35.rem),
+      fontSize: 1.1.rem,
+    ),
+    css('${_rule.selector} p').styles(color: text2Color, fontSize: 0.98.rem),
+    css(_modesGrid.selector).styles(margin: .only(top: 2.5.rem)),
+    css(_mode.selector).styles(gap: .all(0.35.rem)),
+    css(_modeHead.selector).styles(
+      display: .flex,
+      justifyContent: .spaceBetween,
+      gap: .all(0.75.rem),
+      raw: {'align-items': 'flex-start'},
+    ),
+    css('${_mode.selector} h3').styles(
+      margin: .only(top: 0.25.rem, right: .zero, bottom: .zero, left: .zero),
+    ),
+    css(
+      '${_mode.selector} h3 code',
+    ).styles(fontSize: 0.95.rem, fontWeight: .w600),
+    css(_modeWhen.selector).styles(
+      fontWeight: .w600,
+      raw: {'color': '${textColor.value} !important'},
+    ),
+    css.media(MediaQuery.all(minWidth: 960.px), [
+      css(_rulesList.selector).styles(
+        gap: .all(2.rem),
+        raw: {'grid-template-columns': 'repeat(3, 1fr)'},
+      ),
+    ]),
+  ];
+
   @override
   Component build(BuildContext context) {
     return Section(
@@ -146,35 +212,32 @@ class ValidationSection extends StatelessComponent {
         ),
       ],
       children: [
-        ol(classes: 'af-rules', [
+        ol(classes: _rulesList.name, [
           for (final rule in _rules)
-            li(classes: 'af-rule', [
+            li(classes: _rule.name, [
               h3([.text(rule.title)]),
               p(rich(rule.body)),
             ]),
         ]),
-        ul(classes: 'af-feature-grid af-modes', [
+        CardGrid(className: _modesGrid, [
           for (final mode in _modes)
-            li(classes: 'af-card af-mode', [
-              div(classes: 'af-mode-head', [
-                span(classes: 'af-feature-icon', [mode.icon.build(size: 22)]),
+            Card(className: _mode, [
+              div(classes: _modeHead.name, [
+                CardIcon(mode.icon),
                 Pill(mode.tag, accent: true),
               ]),
               h3([
                 code([.text(mode.name)]),
               ]),
-              p(classes: 'af-mode-when', [.text(mode.when)]),
+              p(classes: _modeWhen.name, [.text(mode.when)]),
               p([.text(mode.body)]),
             ]),
         ]),
-        const p(classes: 'af-section-more', [
-          a(href: '$docsPath/validation/modes', [
-            .text('Every mode and every event, explained →'),
-          ]),
-        ]),
-        div(classes: 'af-section-demo', [
-          ExampleFrame(example: example, layout: ExampleLayout.split),
-        ]),
+        const MoreLink(
+          'Every mode and every event, explained →',
+          href: '$docsPath/validation/modes',
+        ),
+        DemoSlot(ExampleFrame(example: example, layout: ExampleLayout.split)),
       ],
     );
   }
@@ -199,8 +262,8 @@ class AsyncSection extends StatelessComponent {
       ),
       children: [
         ExampleFrame(example: example, layout: ExampleLayout.split),
-        ul(classes: 'af-checklist', [
-          li([
+        Checklist([
+          [
             const strong([
               .text('Debounced while typing, immediate on submit.'),
             ]),
@@ -208,34 +271,33 @@ class AsyncSection extends StatelessComponent {
               ' `await validate()` flushes a waiting check rather than '
               'reporting the field bad for being busy.',
             ),
-          ]),
-          const li([
+          ],
+          const [
             strong([.text('A stale answer can never land.')]),
             .text(
               ' A new value replaces the round in flight; the old result is '
               'dropped, not applied late.',
             ),
-          ]),
-          const li([
+          ],
+          const [
             strong([.text('Verdicts are reused.')]),
             .text(
               ' A second submit on an unchanged form makes zero network calls.',
             ),
-          ]),
-          li([
+          ],
+          [
             const strong([.text('A failure is not an error.')]),
             ...rich(
               ' A validator that throws or times out puts the field on '
               '`failedValidation`: not valid, not stuck, retried by the next '
               'submit.',
             ),
-          ]),
-        ]),
-        const p(classes: 'af-section-more', [
-          a(href: '$docsPath/validation/async', [
-            .text('How rounds, verdicts and failures fit together →'),
-          ]),
+          ],
         ]),
+        const MoreLink(
+          'How rounds, verdicts and failures fit together →',
+          href: '$docsPath/validation/async',
+        ),
       ],
     );
   }
@@ -311,9 +373,21 @@ const _features = [
   ),
 ];
 
+/// "Everything a form needs": the feature cards.
+@scopedCss
 class Features extends StatelessComponent {
   const Features({super.key});
 
+  static const _class = _$FeaturesScope;
+  static final _feature = _class('af-feature');
+
+  /// What a feature card adds to a [Card].
+  @css
+  static List<StyleRule> get styles => [
+    css(_feature.selector).styles(gap: .all(0.6.rem)),
+    css('${_feature.selector} p').styles(raw: {'flex': '1'}),
+  ];
+
   @override
   Component build(BuildContext context) {
     return Section(
@@ -328,10 +402,10 @@ class Features extends StatelessComponent {
         ),
       ],
       children: [
-        ul(classes: 'af-feature-grid', [
+        CardGrid([
           for (final feature in _features)
-            li(classes: 'af-card af-feature', [
-              span(classes: 'af-feature-icon', [feature.icon.build(size: 22)]),
+            Card(className: _feature, [
+              CardIcon(feature.icon),
               h3([.text(feature.title)]),
               p(rich(feature.body)),
             ]),
@@ -342,46 +416,73 @@ class Features extends StatelessComponent {
 }
 
 /// The Agent Skill band.
+@scopedCss
 class SkillBand extends StatelessComponent {
   const SkillBand({super.key});
 
+  static const _class = _$SkillBandScope;
+  static final _band = _class('af-band');
+
+  @css
+  static List<StyleRule> get styles => [
+    css(_band.selector).styles(
+      display: .grid,
+      padding: .all(2.rem),
+      border: hairline(borderColor),
+      radius: const .circular(radius),
+      alignItems: .center,
+      gap: .all(2.rem),
+      raw: {
+        'background':
+            'radial-gradient(60% 80% at 100% 0%, var(--af-accent-soft), '
+            'transparent 70%), var(--af-surface)',
+      },
+    ),
+    css('${_band.selector} > *').styles(minWidth: .zero),
+    css(
+      '${_band.selector} h2',
+    ).styles(fontSize: const .expression('clamp(1.5rem, 2.6vw, 2rem)')),
+    css.media(MediaQuery.all(minWidth: 760.px), [
+      css(_band.selector).styles(
+        padding: .all(2.5.rem),
+        raw: {'grid-template-columns': '1.3fr 1fr'},
+      ),
+    ]),
+  ];
+
   @override
   Component build(BuildContext context) {
-    return section(
-      classes: 'af-section',
-      attributes: const {'aria-labelledby': 'skill-heading'},
-      [
-        div(classes: 'af-container', [
-          div(classes: 'af-band', [
-            div([
-              const p(classes: 'af-eyebrow', [.text('Agent skill')]),
-              const h2(id: 'skill-heading', [
-                .text('Your coding agent already knows this API.'),
-              ]),
-              p(
-                classes: 'af-lead',
-                rich(
-                  'The repository ships an Agent Skill that teaches Claude '
-                  'Code — or any agent that supports skills — the full '
-                  '`advanced_forms` API, so it generates fields, validation, '
-                  'cross-field logic and subforms idiomatically.',
-                ),
-              ),
+    return Section.plain(
+      labelledBy: 'skill-heading',
+      children: [
+        div(classes: _band.name, [
+          div([
+            const Eyebrow('Agent skill'),
+            const h2(id: 'skill-heading', [
+              .text('Your coding agent already knows this API.'),
             ]),
-            const div(classes: 'af-hero-actions', [
-              Button(
-                'Install the skill',
-                href: '$docsPath/agent-skill',
-                leading: .bot,
-              ),
-              Button(
-                'Read SKILL.md',
-                href: skillUrl,
-                variant: .secondary,
-                external: true,
-                trailing: .arrowRight,
+            Lead(
+              rich(
+                'The repository ships an Agent Skill that teaches Claude '
+                'Code — or any agent that supports skills — the full '
+                '`advanced_forms` API, so it generates fields, validation, '
+                'cross-field logic and subforms idiomatically.',
               ),
-            ]),
+            ),
+          ]),
+          const ButtonRow(flush: true, [
+            Button(
+              'Install the skill',
+              href: '$docsPath/agent-skill',
+              leading: .bot,
+            ),
+            Button(
+              'Read SKILL.md',
+              href: skillUrl,
+              variant: .secondary,
+              external: true,
+              trailing: .arrowRight,
+            ),
           ]),
         ]),
       ],
diff --git a/landing/lib/components/text.dart b/landing/lib/components/text.dart
new file mode 100644
index 0000000..1179d8e
--- /dev/null
+++ b/landing/lib/components/text.dart
@@ -0,0 +1,27 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+/// Renders [text], turning each backtick-quoted span into an inline `<code>`,
+/// so prose data can mention identifiers without hand-built component lists.
+List<Component> rich(String text) => [
+  for (final (i, part) in text.split('`').indexed)
+    if (part.isNotEmpty)
+      if (i.isOdd) code([.text(part)]) else .text(part),
+];
+
+/// An external link that opens in a new tab with the right `rel`.
+Component externalLink(
+  String href,
+  List<Component> children, {
+  String? classes,
+  String? label,
+}) => a(
+  href: href,
+  classes: classes,
+  attributes: {
+    'target': '_blank',
+    'rel': 'noopener noreferrer',
+    'aria-label': ?label,
+  },
+  children,
+);
diff --git a/landing/lib/highlight.dart b/landing/lib/highlight.dart
index 100bd05..5f4b1e4 100644
--- a/landing/lib/highlight.dart
+++ b/landing/lib/highlight.dart
@@ -4,7 +4,7 @@
 /// behind `jaspr_content`, while the site is pre-rendered. Its scopes are
 /// mapped to CSS classes here, so the browser receives finished `<span>`
 /// markup and never downloads a highlighting library. The classes are coloured
-/// in `web/styles.css`, with one palette per theme.
+/// by [tokenStyles], from the `--tk-*` tokens, one palette per theme.
 library;
 
 import 'package:jaspr/dom.dart';
@@ -24,6 +24,26 @@ final _theme = sh.HighlighterTheme.fromConfiguration(
 
 final _highlighter = sh.Highlighter(language: 'dart', theme: _theme);
 
+/// One colour per token class, `.tk-<token>` from `--tk-<token>`. The
+/// variables are defined with the other tokens in `styles.dart`.
+@css
+List<StyleRule> get tokenStyles => [
+  for (final token in const [
+    'keyword',
+    'type',
+    'string',
+    'number',
+    'comment',
+    'annotation',
+    'function',
+    'operator',
+  ])
+    css('.tk-$token').styles(color: Color.variable('--tk-$token')),
+  css(
+    '.tk-doc',
+  ).styles(color: const .variable('--tk-comment'), fontStyle: .italic),
+];
+
 /// TextMate scope prefixes to CSS classes (`tk-<class>`). For each token the
 /// innermost scope is tried first, longest prefix first; a scope with no entry
 /// falls through to its parent, so punctuation inside a string stays a string.
diff --git a/landing/lib/main.server.dart b/landing/lib/main.server.dart
index 0016ff7..e1725dd 100644
--- a/landing/lib/main.server.dart
+++ b/landing/lib/main.server.dart
@@ -2,17 +2,19 @@
 library;
 
 import 'dart:convert';
-import 'dart:io';
 
 import 'package:advanced_forms_landing/app.dart';
 import 'package:advanced_forms_landing/highlight.dart';
+import 'package:advanced_forms_landing/main.server.options.dart';
+import 'package:advanced_forms_landing/palette.generated.dart';
 import 'package:advanced_forms_landing/site.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/server.dart';
 
 Future<void> main() async {
-  // No @client components and no Dart-side styles, so no generated options.
-  Jaspr.initializeApp();
+  // The generated options carry every `@css` getter in `lib/`; Jaspr renders
+  // them as one `<style>` in the head, so nothing render-blocking is fetched.
+  Jaspr.initializeApp(options: defaultServerOptions);
   await initHighlighting();
 
   final version = packageVersion();
@@ -24,11 +26,11 @@ Future<void> main() async {
     Document(
       lang: 'en',
       title: seoTitle,
-      meta: const {
+      meta: {
         'description': description,
         'author': 'LeanCode',
         'robots': 'index, follow, max-image-preview:large',
-        'theme-color': '#050505',
+        'theme-color': themeColor,
         'application-name': siteName,
         'generator': 'Jaspr',
         'twitter:card': 'summary_large_image',
@@ -57,7 +59,6 @@ Future<void> main() async {
             type: 'font/woff2',
             attributes: const {'crossorigin': ''},
           ),
-        const _Stylesheet(),
         // Applied before paint so a light-theme visitor never sees a dark flash.
         const script(
           content:
@@ -95,30 +96,6 @@ Future<void> main() async {
   );
 }
 
-/// `web/landing.css`, inlined. The page is one HTML document with nothing
-/// render-blocking left but its stylesheet, and that stylesheet is 6 KB over
-/// the wire: fetching it separately would cost a round trip before the first
-/// paint and save nothing, since there is no second page to reuse it on. Read
-/// on every render so `jaspr serve` picks up an edit on reload.
-class _Stylesheet extends StatelessComponent {
-  const _Stylesheet();
-
-  @override
-  Component build(BuildContext context) {
-    final css = File('web/landing.css').readAsStringSync();
-    return RawText('<style>${_minify(css)}</style>');
-  }
-
-  /// Drops comments and the whitespace the grammar does not need. Strings in
-  /// the sheet are font names and URLs, which a single space cannot harm.
-  static String _minify(String css) => css
-      .replaceAll(RegExp(r'/\*[\s\S]*?\*/'), '')
-      .replaceAll(RegExp(r'\s+'), ' ')
-      .replaceAllMapped(RegExp(r'\s*([{};,>])\s*'), (match) => match[1]!)
-      .replaceAll(RegExp(r':\s+'), ':')
-      .trim();
-}
-
 Map<String, Object> _structuredData(String version) {
   const publisher = {
     '@type': 'Organization',
diff --git a/landing/lib/palette.generated.dart b/landing/lib/palette.generated.dart
new file mode 100644
index 0000000..fa6d292
--- /dev/null
+++ b/landing/lib/palette.generated.dart
@@ -0,0 +1,237 @@
+// Generated by ../../docs_app/scripts/palette.mjs from
+// ../../docs_app/palette.json — do not edit. Run `npm run palette:generate`
+// in docs_app after changing the palette.
+
+import 'package:jaspr/dom.dart';
+
+/// The LeanCode swatches, as `palette.json` names them, each a packed
+/// `0xRRGGBB`.
+enum Palette {
+  /// Primary surface. LeanCode is black-first; yellow is the exception.
+  black(0x000000),
+
+  /// Text and headings on black; the light document surface.
+  white(0xffffff),
+
+  /// Call to action and emphasis only. Text on it is always black.
+  ctaYellow(0xf0ff00),
+
+  /// Body copy on dark surfaces.
+  bodyGray(0xd8d8d4),
+
+  /// Secondary text, captions, metadata on dark.
+  mutedGray(0xa3a3a0),
+
+  /// Secondary text, captions, metadata on light: the design system's #757575,
+  /// a step darker so it also reads AA on paper.
+  mutedOnLight(0x6f6f6f),
+
+  /// Cards and panels on black, warm-tinted.
+  surface(0x151513),
+
+  /// A second surface step on black.
+  surface2(0x1d1d1a),
+
+  /// The 1px hairline on white.
+  lineOnLight(0xe5e5e5),
+
+  /// Error signal, sparingly.
+  error(0xe64239),
+
+  /// Success signal, sparingly.
+  success(0x80c340),
+
+  /// Site tint: a section background a step above black.
+  nearBlack(0x0a0a08),
+
+  /// Site tint: a section background a step below white.
+  paper(0xf7f7f5),
+
+  /// Site tint: a second surface step on white.
+  paper2(0xf2f2ef),
+
+  /// Site tint: body copy on light surfaces.
+  bodyOnLight(0x3f3f3c),
+
+  /// Site tint: the stronger hairline on white, for controls.
+  lineStrongOnLight(0xcfcfcb),
+
+  /// Site tint: the CTA yellow lifted, for the primary button's hover.
+  ctaYellowLight(0xf5ff4d),
+
+  /// Site tint: the CTA yellow as text on white, which yellow itself never is.
+  ctaYellowOnLight(0x606a00),
+
+  /// Site tint: the error signal as text on white.
+  errorOnLight(0xbe2119),
+
+  /// Site tint: the success signal as text on white.
+  successOnLight(0x527b28);
+
+  const Palette(this.rgb);
+
+  final int rgb;
+
+  Color get color => Color.value(rgb);
+
+  /// `#rrggbb`.
+  String get hex => color.value;
+
+  Color alpha(double alpha) =>
+      Color.rgba(rgb >> 16 & 0xff, rgb >> 8 & 0xff, rgb & 0xff, alpha);
+}
+
+/// The site's `--af-*` tokens for one theme, as the docs and the landing
+/// page paint them.
+class AfTheme {
+  const AfTheme({
+    required this.bg,
+    required this.bg2,
+    required this.surface,
+    required this.surface2,
+    required this.border,
+    required this.border2,
+    required this.text,
+    required this.text2,
+    required this.muted,
+    required this.accent,
+    required this.accentInk,
+    required this.accentText,
+    required this.accentHover,
+    required this.accentSoft,
+    required this.primary,
+    required this.primaryInk,
+    required this.overlay,
+    required this.danger,
+    required this.ok,
+  });
+
+  /// Page background.
+  final Color bg;
+
+  /// Section background: footer, code panels.
+  final Color bg2;
+
+  /// Cards and frames.
+  final Color surface;
+
+  /// Bars and chips on a surface.
+  final Color surface2;
+
+  /// The hairline.
+  final Color border;
+
+  /// The stronger hairline, for controls.
+  final Color border2;
+
+  /// Headings and primary text.
+  final Color text;
+
+  /// Body copy.
+  final Color text2;
+
+  /// Captions and metadata.
+  final Color muted;
+
+  /// The CTA yellow, as a fill.
+  final Color accent;
+
+  /// Text on the accent.
+  final Color accentInk;
+
+  /// The accent as text.
+  final Color accentText;
+
+  /// The primary button's hover fill.
+  final Color accentHover;
+
+  /// The accent as a wash behind icons, pills and glows.
+  final Color accentSoft;
+
+  /// The docs' primary action fill.
+  final Color primary;
+
+  /// Text on the primary fill.
+  final Color primaryInk;
+
+  /// The scrim behind dialogs.
+  final Color overlay;
+
+  /// Error signal.
+  final Color danger;
+
+  /// Success signal.
+  final Color ok;
+
+  /// The theme as the `--af-*` custom properties the stylesheet reads.
+  Map<String, Color> get cssVariables => {
+    '--af-bg': bg,
+    '--af-bg-2': bg2,
+    '--af-surface': surface,
+    '--af-surface-2': surface2,
+    '--af-border': border,
+    '--af-border-2': border2,
+    '--af-text': text,
+    '--af-text-2': text2,
+    '--af-muted': muted,
+    '--af-accent': accent,
+    '--af-accent-ink': accentInk,
+    '--af-accent-text': accentText,
+    '--af-accent-hover': accentHover,
+    '--af-accent-soft': accentSoft,
+    '--af-primary': primary,
+    '--af-primary-ink': primaryInk,
+    '--af-overlay': overlay,
+    '--af-danger': danger,
+    '--af-ok': ok,
+  };
+}
+
+/// The light theme.
+final afLight = AfTheme(
+  bg: Palette.white.color,
+  bg2: Palette.paper.color,
+  surface: Palette.white.color,
+  surface2: Palette.paper2.color,
+  border: Palette.lineOnLight.color,
+  border2: Palette.lineStrongOnLight.color,
+  text: Palette.black.color,
+  text2: Palette.bodyOnLight.color,
+  muted: Palette.mutedOnLight.color,
+  accent: Palette.ctaYellow.color,
+  accentInk: Palette.black.color,
+  accentText: Palette.ctaYellowOnLight.color,
+  accentHover: Palette.ctaYellowLight.color,
+  accentSoft: Palette.ctaYellow.alpha(0.45),
+  primary: Palette.black.color,
+  primaryInk: Palette.ctaYellow.color,
+  overlay: Palette.black.alpha(0.3),
+  danger: Palette.errorOnLight.color,
+  ok: Palette.successOnLight.color,
+);
+
+/// The dark theme.
+final afDark = AfTheme(
+  bg: Palette.black.color,
+  bg2: Palette.nearBlack.color,
+  surface: Palette.surface.color,
+  surface2: Palette.surface2.color,
+  border: Palette.white.alpha(0.12),
+  border2: Palette.white.alpha(0.2),
+  text: Palette.white.color,
+  text2: Palette.bodyGray.color,
+  muted: Palette.mutedGray.color,
+  accent: Palette.ctaYellow.color,
+  accentInk: Palette.black.color,
+  accentText: Palette.ctaYellow.color,
+  accentHover: Palette.ctaYellowLight.color,
+  accentSoft: Palette.ctaYellow.alpha(0.06),
+  primary: Palette.ctaYellow.color,
+  primaryInk: Palette.black.color,
+  overlay: Palette.black.alpha(0.6),
+  danger: Palette.error.color,
+  ok: Palette.success.color,
+);
+
+/// The dark theme's page background, for `<meta name="theme-color">`.
+final themeColor = afDark.bg.value;
diff --git a/landing/lib/styles.dart b/landing/lib/styles.dart
new file mode 100644
index 0000000..42ec3d0
--- /dev/null
+++ b/landing/lib/styles.dart
@@ -0,0 +1,276 @@
+/// Design tokens and the site-wide rules: the fonts, the reset, typography and
+/// the one layout utility. Everything else lives next to the component it
+/// styles, in `@css` getters; Jaspr collects all of them into one stylesheet,
+/// global rules first, and inlines it into the page's `<head>`.
+///
+/// The LeanCode design system: black surfaces, one CTA yellow, Space Grotesk
+/// and JetBrains Mono. Dark is the design; light is a paper variant where the
+/// accent is a fill with black ink on it. The colors come from
+/// `docs_app/palette.json` through `palette.generated.dart`, and the docs app
+/// under /docs paints with the same `--af-*` tokens, so the two read as one
+/// site.
+library;
+
+import 'package:advanced_forms_landing/palette.generated.dart';
+import 'package:jaspr/dom.dart';
+import 'package:jaspr_class_scope/jaspr_class_scope.dart';
+
+export 'package:jaspr_class_scope/jaspr_class_scope.dart';
+
+/// Centers the content column: `min(100% - 2.5rem, var(--af-container))`
+/// wide. The one class any component may put on an element of its own.
+const container = ClassName.shared('af-container');
+
+// ---------- Tokens ----------
+//
+// The palette and metrics are CSS custom properties: light on `:root`, dark
+// where `<html>` carries the `dark` class. The values below are the variables;
+// the definitions sit in [styles], the colors written from [afLight] and
+// [afDark].
+
+const bgColor = Color.variable('--af-bg');
+const bg2Color = Color.variable('--af-bg-2');
+const surfaceColor = Color.variable('--af-surface');
+const surface2Color = Color.variable('--af-surface-2');
+const borderColor = Color.variable('--af-border');
+const border2Color = Color.variable('--af-border-2');
+const textColor = Color.variable('--af-text');
+const text2Color = Color.variable('--af-text-2');
+const mutedColor = Color.variable('--af-muted');
+const accentColor = Color.variable('--af-accent');
+const accentInkColor = Color.variable('--af-accent-ink');
+
+/// The primary button's hover fill.
+const accentHoverColor = Color.variable('--af-accent-hover');
+
+/// The accent as text: the accent itself on dark, a readable olive on light.
+const accentTextColor = Color.variable('--af-accent-text');
+const accentSoftColor = Color.variable('--af-accent-soft');
+const dangerColor = Color.variable('--af-danger');
+const okColor = Color.variable('--af-ok');
+
+const fontSans = FontFamily.variable('--font-sans');
+const fontMono = FontFamily.variable('--font-mono');
+
+const radius = Unit.variable('--af-radius');
+const headerHeight = Unit.variable('--af-header-h');
+
+/// `var(--af-shadow)`, for the `box-shadow` slot of a `raw` map: `BoxShadow`
+/// has no variable form.
+const shadow = 'var(--af-shadow)';
+
+/// Marks a link inside running text by more than its colour: underlined in
+/// the border colour, a little below the baseline.
+const underlinedLink = {
+  'text-decoration': 'underline',
+  'text-decoration-color': 'var(--af-border-2)',
+  'text-underline-offset': '3px',
+};
+
+/// A 1px solid border in [color].
+Border hairline(Color color) => Border.all(color: color, width: 1.px);
+
+/// One side of a [hairline], for `Border.only`.
+BorderSide hairlineSide(Color color) => BorderSide(color: color, width: 1.px);
+
+/// `color-mix(in srgb, <color> <percent>%, <with>)`: [color] at [percent]
+/// opacity over [with], which defaults to transparent. Jaspr has no typed form,
+/// so it goes into `raw` maps.
+String colorMix(Color color, int percent, {Color? with_}) =>
+    'color-mix(in srgb, ${color.value} $percent%, '
+    '${with_?.value ?? 'transparent'})';
+
+/// Everything the page needs before any component draws: fonts, tokens, the
+/// reset, the container and the motion preference.
+@css
+List<StyleRule> get styles => [
+  ..._fonts,
+  ..._tokens,
+  ..._reset,
+  css(container.selector).styles(
+    width: const .expression('min(100% - 2.5rem, var(--af-container))'),
+    raw: {'margin-inline': 'auto'},
+  ),
+  ..._motion,
+];
+
+// ---------- Fonts ----------
+
+const _latin =
+    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, '
+    'U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, '
+    'U+2212, U+2215, U+FEFF, U+FFFD';
+const _latinExt =
+    'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, '
+    'U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, '
+    'U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF';
+
+/// The two variable fonts, self-hosted from `web/fonts/` (SIL Open Font
+/// License, the texts sit alongside the files), so no third-party stylesheet
+/// blocks the first paint. Latin and Latin Extended subsets cover the site's
+/// text; `swap` shows the fallback stack until they arrive, and the `<head>`
+/// preloads the Latin two.
+List<StyleRule> get _fonts => [
+  _fontFace('Space Grotesk', '300 700', 'space-grotesk-latin', _latin),
+  _fontFace('Space Grotesk', '300 700', 'space-grotesk-latin-ext', _latinExt),
+  _fontFace('JetBrains Mono', '100 800', 'jetbrains-mono-latin', _latin),
+  _fontFace('JetBrains Mono', '100 800', 'jetbrains-mono-latin-ext', _latinExt),
+];
+
+/// One `@font-face`. Jaspr's `css.fontFace` knows neither weight ranges,
+/// `font-display` nor `unicode-range`, so the at-rule is spelled out: `css()`
+/// takes any selector text, and an at-rule with a declaration block renders
+/// the same way a rule does.
+StyleRule _fontFace(String family, String weights, String file, String range) =>
+    css('@font-face').styles(
+      raw: {
+        'font-family': '"$family"',
+        'font-style': 'normal',
+        'font-weight': weights,
+        'font-display': 'swap',
+        'src': 'url("/fonts/$file.woff2") format("woff2")',
+        'unicode-range': range,
+      },
+    );
+
+// ---------- Tokens ----------
+
+/// A theme's `--af-*` colors as declarations, for a `raw` map.
+Map<String, String> _colors(AfTheme theme) => {
+  for (final MapEntry(:key, :value) in theme.cssVariables.entries)
+    key: value.value,
+};
+
+List<StyleRule> get _tokens => [
+  css(':root').styles(
+    raw: {
+      ..._colors(afLight),
+      '--af-shadow': '0 24px 60px -32px rgba(0, 0, 0, 0.25)',
+      '--af-radius': '14px',
+      '--af-header-h': '3.5rem',
+      '--af-container': '1160px',
+      '--font-sans':
+          '"Space Grotesk", ui-sans-serif, system-ui, -apple-system, '
+          '"Segoe UI", Roboto, sans-serif',
+      '--font-mono':
+          '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, '
+          'monospace',
+      // Code tokens: GitHub Light.
+      '--tk-keyword': '#cf222e',
+      '--tk-type': '#953800',
+      '--tk-string': '#0a3069',
+      '--tk-number': '#0550ae',
+      '--tk-comment': '#656d76',
+      '--tk-annotation': '#8250df',
+      '--tk-function': '#8250df',
+      '--tk-operator': '#0550ae',
+      'color-scheme': 'light',
+    },
+  ),
+  css('.dark').styles(
+    raw: {
+      ..._colors(afDark),
+      '--af-shadow': '0 24px 60px -32px rgba(0, 0, 0, 0.9)',
+      // Code tokens: Material Palenight.
+      '--tk-keyword': '#c792ea',
+      '--tk-type': '#ffcb6b',
+      '--tk-string': '#c3e88d',
+      '--tk-number': '#f78c6c',
+      '--tk-comment': '#767eaa',
+      '--tk-annotation': '#ffcb6b',
+      '--tk-function': '#82aaff',
+      '--tk-operator': '#89ddff',
+      'color-scheme': 'dark',
+    },
+  ),
+];
+
+// ---------- Base ----------
+
+List<StyleRule> get _reset => [
+  css('*, *::before, *::after').styles(boxSizing: .borderBox),
+  css('html').styles(
+    raw: {
+      'scroll-behavior': 'smooth',
+      'scroll-padding-top': 'calc(var(--af-header-h) + 16px)',
+      '-webkit-text-size-adjust': '100%',
+      'scrollbar-gutter': 'stable',
+    },
+  ),
+  css('body').styles(
+    margin: .zero,
+    color: textColor,
+    fontFamily: fontSans,
+    fontSize: 1.0625.rem,
+    lineHeight: const .expression('1.6'),
+    backgroundColor: bgColor,
+    raw: {
+      '-webkit-font-smoothing': 'antialiased',
+      'text-rendering': 'optimizeLegibility',
+    },
+  ),
+  css('h1, h2, h3').styles(
+    margin: .zero,
+    fontWeight: .w600,
+    letterSpacing: (-0.02).em,
+    lineHeight: const .expression('1.15'),
+    raw: {'text-wrap': 'balance'},
+  ),
+  css('p').styles(margin: .zero),
+  css('a').styles(color: .inherit, textDecoration: .none),
+  css('ul, ol').styles(padding: .zero, margin: .zero, listStyle: .none),
+  css('button').styles(
+    padding: .zero,
+    cursor: .pointer,
+    color: .inherit,
+    raw: {'font': 'inherit', 'background': 'none', 'border': '0'},
+  ),
+  css('svg').styles(
+    display: .inlineBlock,
+    flex: .none,
+    raw: {'vertical-align': 'middle'},
+  ),
+  css(
+    'code, pre, kbd',
+  ).styles(fontFamily: fontMono, raw: {'font-feature-settings': '"liga" 0'}),
+  // Inline code chips.
+  css('p code, li code, h3 code').styles(
+    padding: .symmetric(vertical: 0.1.em, horizontal: 0.4.em),
+    border: hairline(borderColor),
+    radius: .circular(6.px),
+    color: textColor,
+    fontSize: 0.85.em,
+    whiteSpace: .noWrap,
+    backgroundColor: surface2Color,
+  ),
+  css(':focus-visible').styles(
+    radius: .circular(4.px),
+    outline: Outline(
+      color: accentTextColor,
+      style: .solid,
+      width: OutlineWidth(2.px),
+      offset: 3.px,
+    ),
+  ),
+  css(
+    '::selection',
+  ).styles(color: accentInkColor, backgroundColor: accentColor),
+];
+
+// ---------- Motion ----------
+
+List<StyleRule> get _motion => [
+  // The live dot in the hero and the "attaching" status of an example frame.
+  css.keyframes('af-pulse', {'50%': const Styles(opacity: 0.3)}),
+  // Motion is a garnish here; readers who asked for less of it get none.
+  css.media(const MediaQuery.raw('(prefers-reduced-motion: reduce)'), [
+    css('html').styles(raw: {'scroll-behavior': 'auto'}),
+    css('*, *::before, *::after').styles(
+      raw: {
+        'animation-duration': '0.01ms !important',
+        'animation-iteration-count': '1 !important',
+        'transition-duration': '0.01ms !important',
+      },
+    ),
+  ]),
+];
diff --git a/landing/pubspec.lock b/landing/pubspec.lock
index e583826..7398719 100644
--- a/landing/pubspec.lock
+++ b/landing/pubspec.lock
@@ -281,6 +281,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.23.4"
+  jaspr_class_scope:
+    dependency: "direct main"
+    description:
+      name: jaspr_class_scope
+      sha256: "8714085bbb61fa824bdab2f802136f585f637824cad298f6d6a795bf0605fc1d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
+  jaspr_class_scope_builder:
+    dependency: "direct dev"
+    description:
+      name: jaspr_class_scope_builder
+      sha256: b1fe58ff87fb953224030901746d1cafb03f8668e416a4f551ec186a89569aa3
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
   json_annotation:
     dependency: transitive
     description:
diff --git a/landing/pubspec.yaml b/landing/pubspec.yaml
index de89d6f..b504b57 100644
--- a/landing/pubspec.yaml
+++ b/landing/pubspec.yaml
@@ -10,6 +10,7 @@ environment:
 
 dependencies:
   jaspr: ^0.23.4
+  jaspr_class_scope: ^0.1.0
   syntax_highlight_lite: ^0.0.1
 
 dev_dependencies:
@@ -20,6 +21,7 @@ dev_dependencies:
   build_web_compilers: '>=4.8.5 <4.8.6'
   dart_style: '>=3.1.8 <3.1.9'
   jaspr_builder: ^0.23.4
+  jaspr_class_scope_builder: ^0.1.0
   leancode_lint: ^27.0.0
 
 dependency_overrides:
diff --git a/landing/web/landing-icon.svg b/landing/web/landing-icon.svg
index ba21bea..8c45ed3 100644
--- a/landing/web/landing-icon.svg
+++ b/landing/web/landing-icon.svg
@@ -2,6 +2,6 @@
   <rect x="107.2" y="50.3" width="372" height="372" rx="72" fill="black"/>
   <rect x="266.423" y="183.133" width="147.277" height="42.2665" rx="21.1333" transform="rotate(120 266.423 183.133)" fill="white"/>
   <rect width="142.634" height="42.2727" rx="21.1364" transform="matrix(0.5 0.866025 0.866025 -0.5 209.527 183.354)" fill="white"/>
-  <rect x="282.922" y="171.48" width="147.351" height="31.4026" rx="15.7013" fill="#F9FF07"/>
-  <rect x="317.948" y="221" width="112.325" height="31.4026" rx="15.7013" fill="#F9FF07"/>
+  <rect x="282.922" y="171.48" width="147.351" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
+  <rect x="317.948" y="221" width="112.325" height="31.4026" rx="15.7013" fill="#f0ff00" data-palette="ctaYellow"/>
 </svg>
diff --git a/landing/web/landing.css b/landing/web/landing.css
deleted file mode 100644
index 27b79c8..0000000
--- a/landing/web/landing.css
+++ /dev/null
@@ -1,1351 +0,0 @@
-/*
- * AI-Provenance:
- *   model: Claude Fable 5.1
- *   harness: Claude Code
- *
- * The advanced_forms homepage — the LeanCode design system as used on
- * ciach.leancode.co: near-black surfaces, one lime accent, Space Grotesk and
- * JetBrains Mono. Dark is the design; light is a paper variant where the
- * accent is a fill with dark ink on it. The docs app under /docs uses the same
- * tokens, so the two read as one site.
- */
-
-/* ---------- Fonts ---------- */
-
-/* The two variable fonts, self-hosted from fonts/ (SIL Open Font License, the
-   texts sit alongside the files), so no third-party stylesheet blocks the first
-   paint. Latin and Latin Extended subsets cover the site's text; `swap` shows
-   the fallback stack until they arrive, and the <head> preloads the Latin two. */
-@font-face {
-  font-family: "Space Grotesk";
-  font-style: normal;
-  font-weight: 300 700;
-  font-display: swap;
-  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
-    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: "Space Grotesk";
-  font-style: normal;
-  font-weight: 300 700;
-  font-display: swap;
-  src: url("/fonts/space-grotesk-latin-ext.woff2") format("woff2");
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
-    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  font-style: normal;
-  font-weight: 100 800;
-  font-display: swap;
-  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
-    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  font-style: normal;
-  font-weight: 100 800;
-  font-display: swap;
-  src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
-    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* ---------- Tokens ---------- */
-
-:root {
-  --af-bg: #f6f6f2;
-  --af-bg-2: #ffffff;
-  --af-surface: #ffffff;
-  --af-surface-2: #efefe9;
-  --af-border: #e2e2dc;
-  --af-border-2: #cfcfc7;
-  --af-text: #0b0b0d;
-  --af-text-2: #4b4b52;
-  --af-muted: #66666d;
-  --af-accent: #edff2f;
-  --af-accent-2: #c9dc00;
-  --af-accent-ink: #0b0c00;
-  --af-accent-text: #5f6e00;
-  --af-accent-soft: rgba(237, 255, 47, 0.45);
-  --af-danger: #d93636;
-  --af-ok: #15773f;
-  --af-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.25);
-  --af-radius: 14px;
-  --af-header-h: 3.5rem;
-  --af-container: 1160px;
-
-  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-
-  /* Code tokens: GitHub Light. */
-  --tk-keyword: #cf222e;
-  --tk-type: #953800;
-  --tk-string: #0a3069;
-  --tk-number: #0550ae;
-  --tk-comment: #656d76;
-  --tk-annotation: #8250df;
-  --tk-function: #8250df;
-  --tk-operator: #0550ae;
-
-  color-scheme: light;
-}
-
-.dark {
-  --af-bg: #050505;
-  --af-bg-2: #0b0b0d;
-  --af-surface: #101013;
-  --af-surface-2: #16161b;
-  --af-border: #23232b;
-  --af-border-2: #33333e;
-  --af-text: #f4f4f1;
-  --af-text-2: #b7b7b3;
-  --af-muted: #84848d;
-  --af-accent-text: #edff2f;
-  --af-accent-soft: rgba(237, 255, 47, 0.12);
-  --af-danger: #ff5d5d;
-  --af-ok: #58e08a;
-  --af-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.9);
-
-  /* Code tokens: Material Palenight, the palette ciach uses. */
-  --tk-keyword: #c792ea;
-  --tk-type: #ffcb6b;
-  --tk-string: #c3e88d;
-  --tk-number: #f78c6c;
-  --tk-comment: #767eaa;
-  --tk-annotation: #ffcb6b;
-  --tk-function: #82aaff;
-  --tk-operator: #89ddff;
-
-  color-scheme: dark;
-}
-
-/* ---------- Base ---------- */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-  scroll-padding-top: calc(var(--af-header-h) + 16px);
-  -webkit-text-size-adjust: 100%;
-  scrollbar-gutter: stable;
-}
-
-body {
-  margin: 0;
-  background: var(--af-bg);
-  color: var(--af-text);
-  font-family: var(--font-sans);
-  font-size: 1.0625rem;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-h1,
-h2,
-h3 {
-  margin: 0;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  text-wrap: balance;
-}
-
-p {
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-ul,
-ol {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-button {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-svg {
-  display: inline-block;
-  vertical-align: middle;
-  flex: none;
-}
-
-code,
-pre,
-kbd {
-  font-family: var(--font-mono);
-  font-feature-settings: "liga" 0;
-}
-
-p code,
-li code,
-h3 code {
-  padding: 0.1em 0.4em;
-  border: 1px solid var(--af-border);
-  border-radius: 6px;
-  background: var(--af-surface-2);
-  font-size: 0.85em;
-  color: var(--af-text);
-  white-space: nowrap;
-}
-
-:focus-visible {
-  outline: 2px solid var(--af-accent-text);
-  outline-offset: 3px;
-  border-radius: 4px;
-}
-
-::selection {
-  background: var(--af-accent);
-  color: var(--af-accent-ink);
-}
-
-/* Theme-specific children: the logo has one file per theme. */
-.af-theme-dark {
-  display: none;
-}
-
-.dark .af-theme-light {
-  display: none;
-}
-
-.dark .af-theme-dark {
-  display: inline;
-}
-
-.af-container {
-  width: min(100% - 2.5rem, var(--af-container));
-  margin-inline: auto;
-}
-
-.af-landing > *,
-.af-hero-grid > *,
-.af-feature-grid > *,
-.af-example-body > * {
-  min-width: 0;
-}
-
-.af-skip-link {
-  position: fixed;
-  top: 12px;
-  left: 12px;
-  z-index: 100;
-  padding: 0.6rem 1rem;
-  border-radius: 8px;
-  background: var(--af-accent);
-  color: var(--af-accent-ink);
-  font-weight: 600;
-  transform: translateY(-200%);
-  transition: transform 0.2s ease;
-}
-
-.af-skip-link:focus {
-  transform: translateY(0);
-}
-
-.af-accent {
-  color: var(--af-accent-text);
-}
-
-/* ---------- Header ---------- */
-
-.af-header {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  height: var(--af-header-h);
-  border-bottom: 1px solid var(--af-border);
-  background: color-mix(in srgb, var(--af-bg) 80%, transparent);
-  backdrop-filter: saturate(140%) blur(14px);
-  -webkit-backdrop-filter: saturate(140%) blur(14px);
-}
-
-.af-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  height: 100%;
-}
-
-.af-brand {
-  display: inline-flex;
-  align-items: center;
-}
-
-.af-logo {
-  display: inline-flex;
-  align-items: center;
-}
-
-.af-logo img {
-  height: 34px;
-  width: auto;
-  vertical-align: middle;
-}
-
-.af-footer-brand .af-logo img {
-  height: 44px;
-}
-
-.af-nav-links {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.af-nav-links a,
-.af-theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.5rem 0.85rem;
-  border-radius: 999px;
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: var(--af-text-2);
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.af-nav-links a:hover,
-.af-theme-toggle:hover {
-  background: var(--af-surface-2);
-  color: var(--af-text);
-}
-
-.af-theme-toggle {
-  padding: 0.5rem;
-}
-
-.af-theme-moon {
-  display: none;
-}
-
-.dark .af-theme-sun {
-  display: none;
-}
-
-.dark .af-theme-moon {
-  display: inline-flex;
-}
-
-/* ---------- Shared vocabulary ---------- */
-
-.af-eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--af-accent-text);
-}
-
-.af-eyebrow::before {
-  content: "";
-  width: 1.5rem;
-  height: 2px;
-  background: var(--af-accent);
-}
-
-.af-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.3rem 0.7rem;
-  border: 1px solid var(--af-border-2);
-  border-radius: 999px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--af-text-2);
-  background: rgba(127, 127, 127, 0.04);
-  white-space: nowrap;
-}
-
-.af-pill-accent {
-  border-color: color-mix(in srgb, var(--af-accent) 45%, var(--af-border-2));
-  background: var(--af-accent-soft);
-  color: var(--af-accent-text);
-}
-
-a.af-pill-accent:hover {
-  border-color: var(--af-accent-2);
-}
-
-.af-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.2rem;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    transform 0.15s ease,
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.af-button:hover {
-  transform: translateY(-1px);
-}
-
-.af-button-primary {
-  background: var(--af-accent);
-  color: var(--af-accent-ink);
-}
-
-.af-button-primary:hover {
-  background: #f6ff6b;
-}
-
-.af-button-secondary {
-  border-color: var(--af-border-2);
-  background: var(--af-surface);
-  color: var(--af-text);
-}
-
-.af-button-secondary:hover {
-  border-color: var(--af-accent-2);
-}
-
-.af-card {
-  padding: 1.5rem;
-  border: 1px solid var(--af-border);
-  border-radius: var(--af-radius);
-  background: var(--af-surface);
-  transition:
-    border-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.af-card h3 {
-  margin: 0 0 0.5rem;
-  font-size: 1.15rem;
-  font-weight: 600;
-}
-
-.af-card p {
-  margin: 0;
-  font-size: 0.95rem;
-  color: var(--af-text-2);
-}
-
-/* ---------- Hero ---------- */
-
-.af-hero {
-  position: relative;
-  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
-  overflow: hidden;
-  isolation: isolate;
-}
-
-.af-hero-bg {
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background:
-    radial-gradient(55% 45% at 72% 18%, rgba(237, 255, 47, 0.55), transparent 65%),
-    radial-gradient(40% 40% at 10% 90%, rgba(237, 255, 47, 0.25), transparent 60%),
-    repeating-linear-gradient(-58deg, transparent 0 148px, rgba(11, 11, 13, 0.06) 148px 149px);
-  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
-  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
-}
-
-.dark .af-hero-bg {
-  background:
-    radial-gradient(55% 45% at 72% 18%, rgba(237, 255, 47, 0.16), transparent 65%),
-    radial-gradient(40% 40% at 10% 90%, rgba(237, 255, 47, 0.07), transparent 60%),
-    repeating-linear-gradient(-58deg, transparent 0 148px, rgba(237, 255, 47, 0.09) 148px 149px);
-}
-
-.af-hero-grid {
-  display: grid;
-  gap: 3rem;
-  align-items: center;
-}
-
-.af-hero-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.af-hero h1 {
-  font-size: clamp(2.4rem, 5.2vw, 4rem);
-  font-weight: 700;
-  line-height: 1.02;
-  letter-spacing: -0.035em;
-}
-
-:root:not(.dark) .af-hero h1 .af-accent {
-  color: var(--af-text);
-  background: linear-gradient(transparent 55%, var(--af-accent) 55%);
-  padding: 0 0.1em;
-  margin: 0 -0.1em;
-}
-
-.af-hero-lead {
-  max-width: 38rem;
-  margin-top: 1.5rem;
-  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
-  color: var(--af-text-2);
-}
-
-.af-install {
-  margin-top: 2rem;
-}
-
-.af-install-command {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  max-width: 34rem;
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
-  border: 1px solid var(--af-border-2);
-  border-radius: var(--af-radius);
-  background: var(--af-surface);
-  box-shadow: var(--af-shadow);
-}
-
-.af-install-command code {
-  flex: 1;
-  min-width: 0;
-  font-size: 0.95rem;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.af-prompt {
-  color: var(--af-accent-text);
-  font-family: var(--font-mono);
-  font-weight: 600;
-  user-select: none;
-}
-
-.af-install-alt {
-  margin-top: 0.6rem;
-  font-size: 0.85rem;
-  color: var(--af-muted);
-}
-
-.af-install-alt a {
-  color: var(--af-text-2);
-  text-decoration: underline;
-  text-decoration-color: var(--af-border-2);
-  text-underline-offset: 3px;
-}
-
-.af-hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-top: 1.75rem;
-}
-
-.af-hero-actions.af-center {
-  justify-content: center;
-}
-
-.af-demo-label {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.75rem;
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--af-accent-text);
-}
-
-.af-demo-dot {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--af-ok);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-ok) 25%, transparent);
-  animation: af-pulse 1.6s ease-in-out infinite;
-}
-
-@keyframes af-pulse {
-  50% {
-    opacity: 0.3;
-  }
-}
-
-/* Copy buttons (install command, source files). */
-.af-copy-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.45rem 0.75rem;
-  border: 1px solid var(--af-border-2);
-  border-radius: 8px;
-  background: var(--af-surface);
-  color: var(--af-text-2);
-  font: 600 0.78rem/1 var(--font-sans);
-  transition:
-    color 0.15s ease,
-    border-color 0.15s ease;
-}
-
-.af-copy-button:hover {
-  color: var(--af-text);
-  border-color: var(--af-accent-2);
-}
-
-.af-copy-done {
-  display: none;
-  color: var(--af-ok);
-}
-
-[data-copied="true"] {
-  border-color: var(--af-ok) !important;
-  color: var(--af-ok) !important;
-}
-
-[data-copied="true"] .af-copy-idle {
-  display: none;
-}
-
-[data-copied="true"] .af-copy-done {
-  display: inline-flex;
-}
-
-/* ---------- Sections ---------- */
-
-.af-section {
-  padding: clamp(3.5rem, 7vw, 6rem) 0;
-  border-top: 1px solid var(--af-border);
-}
-
-.af-section-head {
-  max-width: 44rem;
-  margin-bottom: 2.5rem;
-}
-
-.af-section h2 {
-  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
-}
-
-.af-lead {
-  margin-top: 1rem;
-  font-size: 1.125rem;
-  color: var(--af-text-2);
-}
-
-.af-section-more {
-  margin-top: 1.5rem;
-  font-weight: 500;
-}
-
-.af-section-more a {
-  color: var(--af-accent-text);
-}
-
-.af-section-more a:hover {
-  text-decoration: underline;
-}
-
-.af-section-demo {
-  margin-top: 2.5rem;
-}
-
-.af-checklist {
-  display: grid;
-  gap: 0.75rem;
-  max-width: 52rem;
-  margin-top: 2rem;
-}
-
-.af-checklist li {
-  position: relative;
-  padding-left: 1.6rem;
-  color: var(--af-text-2);
-}
-
-.af-checklist li strong {
-  color: var(--af-text);
-  font-weight: 600;
-}
-
-.af-checklist li::before {
-  content: "";
-  position: absolute;
-  top: 0.7em;
-  left: 0;
-  width: 0.9rem;
-  height: 2px;
-  background: var(--af-accent);
-}
-
-.af-feature-grid {
-  display: grid;
-  gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
-}
-
-.af-feature {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.af-feature:hover,
-.af-mode:hover {
-  border-color: var(--af-border-2);
-  transform: translateY(-2px);
-}
-
-.af-feature-icon {
-  display: inline-grid;
-  place-items: center;
-  width: 42px;
-  height: 42px;
-  margin-bottom: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--af-accent) 35%, var(--af-border));
-  border-radius: 12px;
-  background: var(--af-accent-soft);
-  color: var(--af-accent-text);
-}
-
-.af-feature p {
-  flex: 1;
-}
-
-.af-rules {
-  display: grid;
-  gap: 1rem;
-  counter-reset: rule;
-}
-
-.af-rule {
-  position: relative;
-  padding-left: 3.25rem;
-}
-
-.af-rule::before {
-  counter-increment: rule;
-  content: counter(rule, decimal-leading-zero);
-  position: absolute;
-  left: 0;
-  top: 0.15rem;
-  font-family: var(--font-mono);
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--af-accent-text);
-}
-
-.af-rule h3 {
-  font-size: 1.1rem;
-  margin-bottom: 0.35rem;
-}
-
-.af-rule p {
-  color: var(--af-text-2);
-  font-size: 0.98rem;
-}
-
-.af-modes {
-  margin-top: 2.5rem;
-}
-
-.af-mode {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.af-mode-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.af-mode h3 {
-  margin: 0.25rem 0 0;
-}
-
-.af-mode h3 code {
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.af-mode-when {
-  color: var(--af-text) !important;
-  font-weight: 600;
-}
-
-.af-band {
-  display: grid;
-  gap: 2rem;
-  align-items: center;
-  padding: 2rem;
-  border: 1px solid var(--af-border);
-  border-radius: var(--af-radius);
-  background:
-    radial-gradient(60% 80% at 100% 0%, var(--af-accent-soft), transparent 70%),
-    var(--af-surface);
-}
-
-.af-band > * {
-  min-width: 0;
-}
-
-.af-band h2 {
-  font-size: clamp(1.5rem, 2.6vw, 2rem);
-}
-
-.af-band .af-hero-actions {
-  margin-top: 0;
-}
-
-/* ---------- Footer ---------- */
-
-.af-footer {
-  border-top: 1px solid var(--af-border);
-  background: var(--af-bg-2);
-  font-size: 1rem;
-}
-
-.af-cta {
-  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
-  border-bottom: 1px solid var(--af-border);
-  background:
-    radial-gradient(50% 60% at 50% 100%, var(--af-accent-soft), transparent 70%),
-    var(--af-bg-2);
-}
-
-.af-cta-inner {
-  max-width: 40rem;
-  text-align: center;
-}
-
-.af-cta h2 {
-  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
-}
-
-.af-cta p {
-  margin-top: 1rem;
-  color: var(--af-text-2);
-  font-size: 1.1rem;
-}
-
-.af-footer-grid {
-  display: grid;
-  gap: 2.5rem;
-  padding: 3.5rem 0;
-}
-
-.af-footer-grid h3 {
-  margin: 0 0 0.9rem;
-  font-family: var(--font-mono);
-  font-size: 0.72rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--af-muted);
-}
-
-.af-footer-grid ul {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.af-footer-grid li a {
-  color: var(--af-text-2);
-}
-
-.af-footer-grid li a:hover {
-  color: var(--af-accent-text);
-}
-
-.af-footer-brand p {
-  max-width: 24rem;
-  margin-top: 1rem;
-  color: var(--af-text-2);
-  font-size: 0.95rem;
-}
-
-.af-footer-brand p a {
-  color: var(--af-text);
-  text-decoration: underline;
-  text-decoration-color: var(--af-border-2);
-  text-underline-offset: 3px;
-}
-
-.af-footer-bottom {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 1.5rem 0 2rem;
-  border-top: 1px solid var(--af-border);
-  font-size: 0.85rem;
-  color: var(--af-muted);
-}
-
-.af-footer-bottom a {
-  color: var(--af-text-2);
-  text-decoration: underline;
-  text-decoration-color: var(--af-border-2);
-  text-underline-offset: 3px;
-}
-
-/* ---------- Live examples ---------- */
-
-.af-example {
-  margin: 0;
-  border: 1px solid var(--af-border);
-  border-radius: var(--af-radius);
-  background: var(--af-surface);
-  box-shadow: var(--af-shadow);
-  overflow: hidden;
-}
-
-.af-example-bar {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-height: 2.6rem;
-  padding: 0.4rem 0.75rem 0.4rem 0.9rem;
-  border-bottom: 1px solid var(--af-border);
-  background: var(--af-surface-2);
-}
-
-.af-dots {
-  display: inline-flex;
-  gap: 0.4rem;
-  flex: none;
-}
-
-.af-dots span {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--af-border-2);
-}
-
-.af-dots span:first-child {
-  background: var(--af-accent);
-}
-
-.af-example-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: center;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--af-muted);
-}
-
-.af-example-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  flex: none;
-  font-family: var(--font-mono);
-  font-size: 0.68rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--af-muted);
-}
-
-.af-example-status::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--af-muted);
-}
-
-.af-example-status[data-status="ready"] {
-  color: var(--af-ok);
-}
-
-.af-example-status[data-status="ready"]::before {
-  background: var(--af-ok);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-ok) 25%, transparent);
-}
-
-.af-example-status[data-status="attaching"]::before {
-  background: var(--af-accent);
-  animation: af-pulse 1s ease-in-out infinite;
-}
-
-.af-example-status[data-status="failed"]::before,
-.af-example-status[data-status="evicted"]::before {
-  background: var(--af-danger);
-}
-
-.af-example-stage {
-  position: relative;
-  background: var(--af-surface);
-}
-
-.af-example-stage[data-settled="false"] {
-  min-height: 8rem;
-}
-
-.af-example-notice {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  text-align: center;
-  font-size: 0.8rem;
-  color: var(--af-muted);
-}
-
-.af-example-notice button {
-  display: block;
-  margin: 0.6rem auto 0;
-  padding: 0.35rem 0.9rem;
-  border-radius: 999px;
-  background: var(--af-accent);
-  color: var(--af-accent-ink);
-  font-weight: 600;
-  font-size: 0.8rem;
-}
-
-.af-example-gate {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: color-mix(in srgb, var(--af-surface) 55%, transparent);
-  backdrop-filter: blur(1px);
-}
-
-.af-example-gate span {
-  padding: 0.45rem 1.1rem;
-  border-radius: 999px;
-  background: var(--af-accent);
-  color: var(--af-accent-ink);
-  font-weight: 600;
-  font-size: 0.875rem;
-}
-
-.af-example-gate-done {
-  position: absolute;
-  top: 0.35rem;
-  right: 0.35rem;
-  padding: 0.15rem 0.55rem;
-  border-radius: 6px;
-  background: var(--af-surface-2);
-  color: var(--af-text-2);
-  font-size: 0.75rem;
-}
-
-.af-example-caption {
-  padding: 0.75rem 0.9rem;
-  border-top: 1px solid var(--af-border);
-  font-size: 0.85rem;
-  color: var(--af-muted);
-}
-
-.af-example-caption a {
-  color: var(--af-text-2);
-  text-decoration: underline;
-  text-decoration-color: var(--af-border-2);
-  text-underline-offset: 3px;
-}
-
-/* Source, one file at a time. Radio inputs and CSS switch the panels. */
-.af-example-code {
-  padding: 0 0.75rem 0.75rem;
-}
-
-.af-tab-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  opacity: 0;
-}
-
-.af-example-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.35rem 0.35rem 0;
-}
-
-.af-example-tabs {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.af-example-tab {
-  flex: none;
-  padding: 0.45rem 0.8rem;
-  border: 1px solid transparent;
-  border-bottom: 0;
-  border-radius: 8px 8px 0 0;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--af-muted);
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    color 0.15s ease,
-    background-color 0.15s ease;
-}
-
-.af-example-tab:hover {
-  color: var(--af-text);
-}
-
-.af-example-copy {
-  /* Beside the tab strip, not in it, so it stays put when the strip scrolls. */
-  flex: none;
-  display: inline-grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 6px;
-  color: var(--af-muted);
-  background: var(--af-surface);
-}
-
-.af-example-copy:hover {
-  color: var(--af-text);
-  background: var(--af-surface-2);
-}
-
-.af-example-copy .af-copy-idle,
-.af-example-copy .af-copy-done {
-  display: none;
-}
-
-.af-example-copy .af-copy-idle {
-  display: inline-flex;
-}
-
-.af-example-copy[data-copied="true"] .af-copy-idle {
-  display: none;
-}
-
-.af-example-copy[data-copied="true"] .af-copy-done {
-  display: inline-flex;
-}
-
-.af-code-panel {
-  display: none;
-  margin-top: -1px;
-  border: 1px solid var(--af-border);
-  border-radius: 0 var(--af-radius) var(--af-radius) var(--af-radius);
-  background: var(--af-bg-2);
-  overflow: hidden;
-}
-
-.af-code-panel pre {
-  margin: 0;
-  padding: 0.9rem 1rem;
-  max-height: 420px;
-  overflow: auto;
-  font-size: 0.8125rem;
-  line-height: 1.65;
-  tab-size: 2;
-  scrollbar-width: thin;
-  scrollbar-color: var(--af-border-2) transparent;
-}
-
-.af-code-panel code {
-  display: block;
-  min-width: max-content;
-}
-
-/* The checked radio picks its tab (the label right after it) and its panel,
-   for up to eight files. */
-.af-tab-input:checked + .af-example-tab {
-  color: var(--af-text);
-  background: var(--af-bg-2);
-  border-color: var(--af-border);
-  box-shadow: inset 0 2px 0 var(--af-accent);
-}
-
-.af-example-code:has(.af-tab-input:nth-of-type(1):checked) .af-code-panel:nth-child(1),
-.af-example-code:has(.af-tab-input:nth-of-type(2):checked) .af-code-panel:nth-child(2),
-.af-example-code:has(.af-tab-input:nth-of-type(3):checked) .af-code-panel:nth-child(3),
-.af-example-code:has(.af-tab-input:nth-of-type(4):checked) .af-code-panel:nth-child(4),
-.af-example-code:has(.af-tab-input:nth-of-type(5):checked) .af-code-panel:nth-child(5),
-.af-example-code:has(.af-tab-input:nth-of-type(6):checked) .af-code-panel:nth-child(6),
-.af-example-code:has(.af-tab-input:nth-of-type(7):checked) .af-code-panel:nth-child(7),
-.af-example-code:has(.af-tab-input:nth-of-type(8):checked) .af-code-panel:nth-child(8) {
-  display: block;
-}
-
-/* The radio is clipped away; its label shows the keyboard focus instead. */
-.af-tab-input:focus-visible + .af-example-tab {
-  outline: 2px solid var(--af-accent-text);
-  outline-offset: -2px;
-}
-
-/* Code tokens. */
-.tk-keyword { color: var(--tk-keyword); }
-.tk-type { color: var(--tk-type); }
-.tk-string { color: var(--tk-string); }
-.tk-number { color: var(--tk-number); }
-.tk-comment { color: var(--tk-comment); }
-.tk-doc { color: var(--tk-comment); font-style: italic; }
-.tk-annotation { color: var(--tk-annotation); }
-.tk-function { color: var(--tk-function); }
-.tk-operator { color: var(--tk-operator); }
-
-/* ---------- Responsive ---------- */
-
-@media (min-width: 760px) {
-  .af-footer-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .af-band {
-    grid-template-columns: 1.3fr 1fr;
-    padding: 2.5rem;
-  }
-}
-
-@media (min-width: 960px) {
-  .af-rules {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 2rem;
-  }
-
-  .af-example[data-layout="split"] .af-example-body {
-    display: grid;
-    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
-    align-items: start;
-  }
-
-  .af-example[data-layout="split"] .af-example-stage {
-    order: 2;
-    position: sticky;
-    top: calc(var(--af-header-h) + 1.5rem);
-    border-left: 1px solid var(--af-border);
-  }
-
-  .af-example[data-layout="split"] .af-example-code {
-    order: 1;
-    padding: 0.75rem;
-  }
-}
-
-@media (min-width: 1000px) {
-  .af-hero-grid {
-    grid-template-columns: 1.05fr 1fr;
-  }
-
-  .af-footer-grid {
-    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
-  }
-}
-
-@media (max-width: 540px) {
-  .af-nav-links a,
-  .af-theme-toggle {
-    padding: 0.5rem 0.55rem;
-    font-size: 0.9rem;
-  }
-
-  .af-nav-links {
-    gap: 0;
-  }
-
-  /* Examples is reachable from the docs; the row has to fit next to the logo. */
-  .af-nav-secondary {
-    display: none;
-  }
-
-  .af-logo img {
-    height: 28px;
-  }
-
-  /* One row still: the prompt goes, the button shrinks to its icon, and the
-     command scrolls sideways if a screen is narrower than it. */
-  .af-install-command {
-    gap: 0.5rem;
-    padding: 0.4rem 0.4rem 0.4rem 0.85rem;
-  }
-
-  .af-install-command code {
-    font-size: 0.875rem;
-  }
-
-  .af-install-command .af-prompt {
-    display: none;
-  }
-
-  .af-install-command .af-copy-label {
-    display: none;
-  }
-
-  .af-install-command .af-copy-button {
-    padding: 0.5rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}