diff --git a/.grok/hooks/impeccable.json b/.grok/hooks/impeccable.json
new file mode 100644
index 00000000..31d2d420
--- /dev/null
+++ b/.grok/hooks/impeccable.json
@@ -0,0 +1,29 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write|MultiEdit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "[ ! -f \".grok/skills/impeccable/scripts/impeccable\" ] || \".grok/skills/impeccable/scripts/impeccable\" hook",
+            "timeout": 5,
+            "statusMessage": "Checking UI changes"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "[ ! -f \".grok/skills/impeccable/scripts/impeccable\" ] || \".grok/skills/impeccable/scripts/impeccable\" hook",
+            "timeout": 30,
+            "statusMessage": "Design deep pass"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.impeccable/config.json b/.impeccable/config.json
new file mode 100644
index 00000000..91a24265
--- /dev/null
+++ b/.impeccable/config.json
@@ -0,0 +1,9 @@
+{
+  "hook": {
+    "enabled": true,
+    "limits": {
+      "maxFindings": 5,
+      "maxChars": 8000
+    }
+  }
+}
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 00000000..9d732cf0
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,92 @@
+---
+name: Snapper
+description: Public page for the semantic line-break formatter.
+colors:
+  teal: "#004D40"
+  teal-light: "#00695C"
+  coral: "#FF655D"
+  yellow: "#F1DB4B"
+  background: "#FDFCF9"
+  text: "#1a2e1f"
+typography:
+  body:
+    fontFamily: "Atkinson Hyperlegible Next, system-ui, sans-serif"
+    fontWeight: 400
+  mono:
+    fontFamily: "JetBrains Mono, monospace"
+    fontWeight: 400
+rounded:
+  logo: "28px"
+  control: "8px"
+  panel: "12px"
+spacing:
+  section: "6rem 0"
+components:
+  button-primary:
+    backgroundColor: "{colors.teal}"
+    textColor: "{colors.background}"
+---
+
+# Design System: Snapper
+
+## Overview
+
+**Creative North Star: "The forest page"**
+
+(Inferred from `site/index.html`.) The static page sets its own custom properties: deep teal, coral, cream, and forest greens, with Atkinson Hyperlegible Next for text and JetBrains Mono for code.
+
+**Key Characteristics:**
+
+- Teal `#004D40`.
+- Background `#FDFCF9`.
+- Atkinson Hyperlegible Next and JetBrains Mono.
+
+## Colors
+
+### Primary
+
+- **Teal** (`#004D40`): `--teal`.
+
+### Secondary
+
+- **Coral** (`#FF655D`): `--coral`.
+- **Yellow** (`#F1DB4B`): `--yellow`.
+
+### Neutral
+
+- **Paper** (`#FDFCF9`): `--bg`.
+- **Ink** (`#1a2e1f`): `--text`.
+
+## Typography
+
+**Body Font:** Atkinson Hyperlegible Next
+**Label/Mono Font:** JetBrains Mono
+
+### Hierarchy
+
+- **Body**: `var(--sans)` on the page sections.
+- **Label**: `var(--mono)` on code samples.
+
+## Layout
+
+`section` padding is `6rem 0` in `site/index.html`. The recorded spacing value is that same `6rem 0`.
+
+## Shapes
+
+The logo uses a 28px radius. Controls use 8px. Panels and the demo close at 12px.
+
+## Components
+
+### Navigation
+
+- Text uses `var(--sans)` and the teal custom properties.
+
+## Do's and Don'ts
+
+### Do:
+
+- **Do** keep `#004D40` and Atkinson Hyperlegible Next as written in `site/index.html`.
+
+### Don't:
+
+- **Don't** load a second display face. This page uses Atkinson Hyperlegible Next for text and JetBrains Mono for code.
diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 00000000..799127e0
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,41 @@
+# Product
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+(Inferred) People who format prose so that a sentence is one line and a diff stays readable. They may use the command, an editor, or the public page.
+
+## Product Purpose
+
+(Inferred from `README.md`) Snapper is a format-aware semantic line-break formatter. The static page in `site/` is the public face of that tool.
+
+## Positioning
+
+(Inferred) Snapper is the free formatter. It is not the citation product and not the account site.
+
+## Operating Context
+
+(Inferred) The page in `site/index.html` is the rendered interface in this checkout. The ops catalogue also names `Git/Github/Rust/snapper`, and that path is not on this machine.
+
+## Capabilities and Constraints
+
+(Inferred) Do not invent editor integrations beyond the ones the README already lists.
+
+## Brand Commitments
+
+The site sets `--teal: #004D40` and `--sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif` in `site/index.html`.
+
+## Evidence on Hand
+
+`README.md` and `site/index.html`.
+
+## Product Principles
+
+- (Inferred) The page explains the formatter that this repository ships.
+- (Inferred) Keep the teal and the shared Atkinson face in the site stylesheet.
+- (Inferred) Do not move this record into a different repository.
diff --git a/site-svelte/src/app.html b/site-svelte/src/app.html
index 07bf72d7..d0dc8793 100644
--- a/site-svelte/src/app.html
+++ b/site-svelte/src/app.html
@@ -39,7 +39,7 @@
 </script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 %sveltekit.head%
 </head>
 <body data-sveltekit-preload-data="hover">
diff --git a/site/404.html b/site/404.html
index 3b4361e5..3ea2ff33 100644
--- a/site/404.html
+++ b/site/404.html
@@ -5,10 +5,12 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Page not found · snapper</title>
 <meta name="robots" content="noindex">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
 <style>
 :root { --bg:#f4f1ea; --text:#1b241f; --heading:#0d3b2e; --muted:#5c6b63; }
 * { box-sizing:border-box; }
-body { margin:0; font-family:ui-sans-serif,system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; }
+body { margin:0; font-family:'Atkinson Hyperlegible Next',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; }
 .wrap { max-width:36rem; margin:18vh auto; padding:0 1.25rem; }
 p.brand { letter-spacing:.04em; text-transform:uppercase; font-size:.75rem; color:var(--muted); margin:0 0 .75rem; }
 h1 { font-size:1.75rem; color:var(--heading); margin:0 0 .75rem; }
diff --git a/site/index.html b/site/index.html
index e7fa0027..71012a8b 100644
--- a/site/index.html
+++ b/site/index.html
@@ -47,7 +47,7 @@
 </script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
 :root {
   --teal: #004D40;
@@ -68,7 +68,7 @@
   --diff-rm: #fdd;
   --diff-rm-strong: #f8b0b0;
   --mono: 'JetBrains Mono', monospace;
-  --sans: 'Jost', system-ui, sans-serif;
+  --sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
 }
 
 [data-theme="dark"] {
@@ -92,13 +92,7 @@
 }
 
 [data-theme="dark"] .feature-card {
-  background: #152218;
-  border-color: rgba(165,214,167,0.1);
-}
-
-[data-theme="dark"] .feature-card:hover {
-  border-color: rgba(165,214,167,0.2);
-  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  border-top-color: rgba(165,214,167,0.2);
 }
 
 [data-theme="dark"] .pane-before { background: #152218; }
@@ -120,6 +114,11 @@
   -webkit-font-smoothing: antialiased;
 }
 
+:focus-visible {
+  outline: 2px solid var(--teal);
+  outline-offset: 3px;
+}
+
 /* ---- NOISE TEXTURE OVERLAY ---- */
 body::before {
   content: '';
@@ -185,10 +184,7 @@
 
 .hero h1 span {
   display: inline-block;
-  background: linear-gradient(135deg, var(--coral), #ff8a70);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  color: var(--green-dark);
 }
 
 .hero-tagline {
@@ -296,6 +292,8 @@
 .lang-btn {
   background: none;
   border: none;
+  min-width: 44px;
+  min-height: 44px;
   padding: 0.4rem 0.55rem;
   font-size: 0.8rem;
   font-weight: 600;
@@ -328,6 +326,10 @@
   50% { transform: translateX(-50%) translateY(8px); }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .scroll-hint { animation: none; }
+}
+
 /* ---- SECTION LAYOUT ---- */
 section {
   padding: 6rem 0;
@@ -338,7 +340,7 @@
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
-  color: var(--coral);
+  color: var(--teal);
   margin-bottom: 0.75rem;
 }
 
@@ -550,52 +552,25 @@
 
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.5rem;
+  gap: 0;
 }
 
 .feature-card {
-  background: white;
-  border-radius: 12px;
-  padding: 1.75rem;
-  border: 1px solid rgba(0,77,64,0.08);
-  transition: all 0.25s ease;
-  position: relative;
-  overflow: hidden;
+  padding: 1.15rem 0 0;
+  border-top: 1px solid rgba(0,77,64,0.16);
 }
 
-.feature-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, var(--teal), var(--green-light));
-  opacity: 0;
-  transition: opacity 0.25s;
+.feature-card:first-child {
+  border-top: 0;
+  padding-top: 0;
+  padding-bottom: 1.5rem;
 }
 
-.feature-card:hover {
-  border-color: rgba(0,77,64,0.15);
-  box-shadow: 0 4px 20px rgba(45,90,61,0.08);
-  transform: translateY(-2px);
+.feature-card:first-child h3 {
+  font-size: 1.45rem;
 }
 
-.feature-card:hover::before { opacity: 1; }
-
-.feature-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-  font-size: 1.2rem;
-  background: var(--cream);
-  color: var(--green-dark);
-}
+.feature-icon { display: none; }
 
 .feature-card h3 {
   font-size: 1.05rem;
@@ -696,7 +671,7 @@
   .hero-logo { width: 180px; height: 180px; }
   section { padding: 4rem 0; }
   .pane-before { border-right: none; border-bottom: 2px solid var(--green-dark); }
-  .features-grid { grid-template-columns: 1fr; }
+  .features-grid { gap: 0; }
   .install-options { grid-template-columns: 1fr; }
 }
 </style>