feat(web): the list is GPU CLI's, the page rounds like the app

Three changes, one of which turned up a bug.

§05 was written as an AnnotKit list. It is not — it is the GPU CLI list,
and AnnotKit is one of the things it covers. The lead now says so, and
the privacy line says it out loud ("one list for everything GPU CLI
ships, AnnotKit included") because someone subscribing from a page about
a Swift package should know what lands in their inbox. Claims are held to
gpu-cli.sh's own words: it runs cloud GPUs from your terminal. Nothing is
promised about cadence or list size.

The footer carries a powered-by line under the wordmark, linking the org.

Radii are lifted from the overlay rather than invented. The app has a
three-value vocabulary — RoundedRectangle(cornerRadius: 3) on marks and
small chrome, cornerRadius: 10 on the composer panel, Capsule() on its one
accent button — so the page gets --radius-sm/lg/pill and nothing in
between. The submit is a capsule for the same reason the app's Save is.
Editorial bans a pill with a GRADIENT fill, not a pill.

The bug: :focus-visible carried `border-radius: inherit`, which does not
mean "keep your own corners" — it REPLACES them with the parent's. The
outline already follows an element's own radius, so the declaration was
never doing anything useful; with radii on the page it would have squared
the capsule off the instant it took keyboard focus. Removed, and verified
by reading the computed style of a focused submit (999px) and input (3px,
1px border, 2px outline) rather than by looking at it.

Two instrument fixes found while auditing, not design changes:

  - responsive-check watched six affordance selectors and .foot__powered
    made seven. A new affordance that no gate watches is how gate 49
    quietly stops meaning anything.
  - The honest-typography test spot-checked four strings for straight
    quotes after whitespace, so the apostrophe in "Agentation's" sat in
    the footer colophon undetected. It now walks every exported string
    and rejects any straight quote or double hyphen outside code samples.

Lighthouse 100/100/100/100, LCP 0.4s, CLS 0.007. Responsive PASS at five
widths, contrast 14/14, 95 tests.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: angusbezzina

web/.hallmark/slop-test.md

@@ -1,6 +1,9 @@
 # Slop test — AnnotKit landing page
 
-Run against the built page at 320 / 375 / 414 / 768 / 1280 px, 2026-08-19.
+Run against the built page at 320 / 375 / 414 / 768 / 1280 px. First run
+2026-08-19; re-run 2026-08-20 after three changes — corner radii lifted from
+the overlay, §05 widened from an AnnotKit list to the GPU CLI list, and the
+notes file renamed to `ANNOTKIT_NOTES.md`.
 Every gate must answer **no**. Where a gate is answered with a justification
 rather than a plain no, the justification is written out — a silent pass on a
 gate that fired is the thing this file exists to prevent.
@@ -54,8 +57,8 @@ Automated backing:
 ## Implementation · 22–27
 
 22. **Zero-chroma neutral?** No. Lowest chroma on the page is 0.010.
-23. **Accent over ~5 % of a viewport?** No. The accent fills exactly one surface — the submit button — plus hairline underlines, the §-numbers, and the focus ring. Measured well under 3 % at every width.
-24. **Off-scale spacing?** No. Every gap, pad, and margin comes from `--space-*`; the only bare values are the 4 px double-rule height and 1 px hairlines, both tokenised as `--rule-*`.
+23. **Accent over ~5 % of a viewport?** No. The accent fills exactly one surface — the submit button — plus hairline underlines, the §-numbers, the footer's powered-by hover, and the focus ring. Measured well under 3 % at every width. The submit is a capsule because the overlay fills its one accent button with `Capsule()`; editorial bans a pill with a GRADIENT fill, not a pill, and this fill is flat.
+24. **Off-scale spacing?** No. Every gap, pad, and margin comes from `--space-*`; the only bare values are the 4 px double-rule height and 1 px hairlines, both tokenised as `--rule-*`. Radii are `--radius-sm/lg/pill`, lifted from the overlay (`RoundedRectangle(cornerRadius: 3)`, `cornerRadius: 10`, `Capsule()`) rather than invented, so the page rounds the way the app does.
 25. **Measure outside 45–75 ch?** No. `--measure: 66ch`, `--measure-narrow: 52ch`.
 26. **Interactive element missing focus-visible / active / disabled?** No. The copy button, the input, and the submit each ship all eight states; typographic links ship default, hover, focus-visible, active, and a disabled variant used when the repo is private.
 27. **Motion without a reduced-motion fallback?** No. The hero reveal collapses to a 150 ms opacity fade, the rule draw collapses to an opacity fade, and the §02 loop renders its poster with controls instead of autoplaying.
@@ -102,7 +105,7 @@ Automated backing:
 
 ## Honest copy · 46
 
-46. **Invented metric?** No. The page carries no numbers except the platform facts from `Package.swift` (macOS 15, iOS 17, Swift 6) and the version posture from `DECISIONS.md` (0.x, MIT). No testimonials, no logos, no proof bar. Where proof would normally sit, the page shows the code, the note format, and the captures.
+46. **Invented metric?** No. The page carries no numbers except the platform facts from `Package.swift` (macOS 15, iOS 17, Swift 6) and the version posture from `DECISIONS.md` (0.x, MIT). No testimonials, no logos, no proof bar. Where proof would normally sit, the page shows the code, the note format, and the captures. §05's claims about the GPU CLI list are traceable to gpu-cli.sh's own tagline ("Run cloud GPUs from your terminal"); nothing is promised about cadence or subscriber count. The §03 claim that a named third-party skill consumes the output was REMOVED at the rename rather than restated, because it could not be verified (annotkit-6l8).
 
 ## Re-drawn chrome · 47
 
@@ -144,4 +147,4 @@ No axis scored below 3; no revision pass was required on the scores.
 Neither is a gate failure; both are recorded so they are not mistaken for finished work.
 
 - **Captures are placeholders.** The §02 loop and the two stills are `pending` in `src/captures.ts` and render labelled plates. L4 records them from `task demo`.
-- **Initial JS is 67.4 KB gzip against the epic's ~60 KB budget** (§8.5). React 19 + react-dom is 65 KB of that; the app itself is under 3 KB. Lighthouse still scores 100 for performance (LCP 0.4 s, TBT 0 ms), so this is a budget-line question, not a user-facing one. Aliasing `react`/`react-dom` to `preact/compat` was measured at **14.5 KB gzip** — a 53 KB saving with no source changes — but the epic locks React, so the swap is the maintainer's call, not a silent substitution.
+- **Initial JS is 67.6 KB gzip against the epic's ~60 KB budget** (§8.5). React 19 + react-dom is 65 KB of that; the app itself is under 3 KB. Lighthouse still scores 100 for performance (LCP 0.4 s, TBT 0 ms), so this is a budget-line question, not a user-facing one. Aliasing `react`/`react-dom` to `preact/compat` was measured at **14.5 KB gzip** — a 53 KB saving with no source changes — but the epic locks React, so the swap is the maintainer's call, not a silent substitution.

web/scripts/responsive-check.mjs

@@ -23,7 +23,15 @@ const WIDTHS = [320, 375, 414, 768, 1280];
 const HEIGHT = 900;
 
 /** Affordances that must read as one line at every width. */
-const AFFORDANCES = ".link, .mast__nav a, .foot__links a, .submit, .copy, .skip";
+const AFFORDANCES = [
+  ".link",
+  ".mast__nav a",
+  ".foot__links a",
+  ".foot__powered",
+  ".submit",
+  ".copy",
+  ".skip",
+].join(", ");
 
 const MIME = {
   ".html": "text/html; charset=utf-8",

web/src/config.ts

@@ -11,6 +11,8 @@ import { DEFAULT_SITE_URL } from "../shared/site";
 export const site = {
   name: "AnnotKit",
   url: import.meta.env.VITE_SITE_URL ?? DEFAULT_SITE_URL,
+  /** The organisation behind AnnotKit; the updates list is theirs, not ours. */
+  org: "https://gpu-cli.sh",
   repo: "https://github.com/gpu-cli/annotkit",
   issues: "https://github.com/gpu-cli/annotkit/issues",
   license: "https://github.com/gpu-cli/annotkit/blob/main/LICENSE",

web/src/copy.ts

@@ -130,7 +130,7 @@ export const mcpBridge = {
 export const signup = {
   number: "§05",
   title: "One email when it’s worth reading.",
-  lead: "Releases, design notes, and the 1.0 call. No digest, no drip campaign — AnnotKit is 0.x and honest about it.",
+  lead: "The GPU CLI list: releases and design notes for AnnotKit, for the CLI that runs cloud GPUs from your terminal, and for whatever ships next. No digest, no drip campaign.",
   label: "Email address",
   placeholder: "you@example.com",
   submit: "Get release notes",
@@ -146,11 +146,12 @@ export const signup = {
     network: "That didn’t reach us. Check your connection and try again.",
   },
   privacy:
-    "Your address goes to Resend and nowhere else. Every email carries an unsubscribe link.",
+    "One list for everything GPU CLI ships, AnnotKit included. Your address goes to Resend and nowhere else, and every email carries an unsubscribe link.",
 } as const;
 
 export const footer = {
   wordmark: "AnnotKit",
+  poweredBy: "Powered by GPU CLI",
   tagline:
     "The native analogue of the web Agentation tool. Pre-1.0 — the API may shift before 1.0.",
   links: [
@@ -159,7 +160,7 @@ export const footer = {
     { label: "License", href: "license" },
   ],
   colophon:
-    "MIT licensed. The note format is a clean-room reimplementation of Agentation's; this project contains no Agentation source. Set in Fraunces, Newsreader & IBM Plex Mono.",
+    "MIT licensed. The note format is a clean-room reimplementation of Agentation’s; this project contains no Agentation source. Set in Fraunces, Newsreader & IBM Plex Mono.",
 } as const;
 
 export const codeBlock = {

web/src/sections/Footer.tsx

@@ -10,7 +10,15 @@ export function Footer() {
     <footer className="foot">
       <div className="u-shell">
         <div className="foot__band">
-          <p className="foot__wordmark">{footer.wordmark}</p>
+          <div className="foot__mark">
+            <p className="foot__wordmark">{footer.wordmark}</p>
+            <a className="foot__powered" href={site.org}>
+              {footer.poweredBy}
+              <span className="link__arrow" aria-hidden="true">
+                ↗
+              </span>
+            </a>
+          </div>
           <p className="foot__tagline">{footer.tagline}</p>
         </div>
         <nav className="foot__links" aria-label="Elsewhere">

web/src/styles/base.css

@@ -109,7 +109,9 @@ pre {
 :focus-visible {
   outline: var(--rule-thick) solid var(--color-focus);
   outline-offset: 2px;
-  border-radius: 1px;
+  /* No border-radius here. The outline already follows the element's own
+   * corners, and declaring one would REPLACE that radius with the parent's —
+   * squaring the capsule submit off the moment it takes keyboard focus. */
 }
 
 ::selection {
@@ -156,6 +158,7 @@ pre {
 }
 
 .skip {
+  border-radius: var(--radius-sm);
   position: absolute;
   inset-block-start: var(--space-xs);
   inset-inline-start: var(--space-xs);
@@ -414,7 +417,8 @@ pre {
   padding: var(--space-md);
   background: var(--color-paper-2);
   color: var(--color-ink);
-  border-block-end: var(--rule-hair) solid var(--color-rule);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: var(--radius-lg);
   overflow-x: auto;
   font-size: var(--text-sm);
   line-height: 1.7;
@@ -427,6 +431,7 @@ pre {
 
 /* Copy button — 8 states, all visibly distinct. */
 .copy {
+  border-radius: var(--radius-sm);
   display: inline-flex;
   align-items: center;
   gap: var(--space-2xs);
@@ -481,7 +486,9 @@ pre {
 
 .figure__frame {
   border: var(--rule-hair) solid var(--color-rule);
+  border-radius: var(--radius-lg);
   background: var(--color-paper-2);
+  overflow: hidden; /* so a capture's square corners cannot poke through */
   min-width: 0;
 }
 
@@ -504,6 +511,7 @@ pre {
  * Not a drawn mockup, not a stand-in screenshot — an empty plate with the
  * shot list printed on it. Replaced by the real capture in L4. */
 .figure__pending {
+  border-radius: var(--radius-lg);
   display: grid;
   gap: var(--space-xs);
   align-content: center;
@@ -583,7 +591,7 @@ pre {
   font-family: var(--font-body);
   font-size: var(--text-base);
   border: var(--rule-hair) solid var(--color-rule-2); /* 1px in EVERY state */
-  border-radius: 0;
+  border-radius: var(--radius-sm);
   outline: var(--rule-thick) solid transparent; /* reserved ring slot */
   outline-offset: 1px;
   transition: background-color var(--dur-short) var(--ease-out);
@@ -647,7 +655,7 @@ pre {
   font-size: var(--text-base);
   font-weight: var(--weight-body-strong);
   border: var(--rule-hair) solid var(--color-accent);
-  border-radius: 0;
+  border-radius: var(--radius-pill);
   cursor: pointer;
   transition:
     background-color var(--dur-short) var(--ease-out),
@@ -730,6 +738,35 @@ pre {
   }
 }
 
+.foot__mark {
+  display: grid;
+  gap: var(--space-2xs);
+  justify-items: start;
+}
+
+/* Powered by — the org line. Quiet, but a real link, not a signature. */
+.foot__powered {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  text-decoration: none;
+  border-block-end: var(--rule-hair) solid transparent;
+  transition: color var(--dur-short) var(--ease-out);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .foot__powered:hover {
+    color: var(--color-accent);
+    border-block-end-color: var(--color-accent);
+  }
+}
+
 .foot__wordmark {
   font-family: var(--font-display);
   font-size: var(--text-lg);

web/src/styles/tokens.css

@@ -99,6 +99,16 @@
   --rule-hair: 1px;
   --rule-thick: 2px;
 
+  /* ── Radii ────────────────────────────────────────────────────────────────
+   * Lifted from the overlay rather than invented, so the page and the app
+   * round the same way: RoundedRectangle(cornerRadius: 3) on marks and small
+   * chrome, cornerRadius: 10 on the composer panel, and Capsule() on the one
+   * accent-filled button. Three values, no in-between steps.
+   */
+  --radius-sm: 3px;
+  --radius-lg: 10px;
+  --radius-pill: 999px;
+
   /* ── Motion ───────────────────────────────────────────────────────────── */
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

web/tests/a11y.dom.test.tsx

@@ -79,12 +79,28 @@ describe("typography discipline", () => {
     }
   });
 
-  it("uses typographic punctuation, never straight quotes or double hyphens", () => {
-    const strings = [hero.standfirst, signup.lead, signup.privacy, signup.successNew];
+  it("uses typographic punctuation, never straight quotes or double hyphens", async () => {
+    // Walk every exported string rather than a hand-picked few. The earlier
+    // spot-check only looked for a quote after whitespace, so the straight
+    // apostrophe in "Agentation's" sat in the footer colophon undetected.
+    const copy: Record<string, unknown> = await import("../src/copy");
+
+    const strings: string[] = [];
+    const walk = (value: unknown) => {
+      if (typeof value === "string") strings.push(value);
+      else if (Array.isArray(value)) value.forEach(walk);
+      else if (value && typeof value === "object") Object.values(value).forEach(walk);
+    };
+    walk(copy);
+
+    expect(strings.length).toBeGreaterThan(30);
     for (const value of strings) {
-      expect(value).not.toMatch(/--/);
-      expect(value).not.toMatch(/\.\.\./);
-      expect(value).not.toMatch(/(^|\s)'/);
+      // Code samples legitimately contain straight quotes and dashes.
+      if (/\n/.test(value)) continue;
+      expect(value, value).not.toMatch(/--/);
+      expect(value, value).not.toMatch(/\.\.\./);
+      expect(value, value).not.toMatch(/'/);
+      expect(value, value).not.toMatch(/"/);
     }
   });
 });