From a95212aa87874fb2e61b25374e3324641b048d0c Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Thu, 23 Apr 2026 09:13:15 -0700
Subject: [PATCH] feat(site): Designing orientation page with compass loop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New /designing page: the missing "how do I actually use this tool?" story,
organized around a four-phase core loop. Start, iterate, polish, maintain.
Text-dominant editorial sections, cards are rare, spacing pulls from
DESIGN.md's scale only.

Hero runs as a single editorial spread: title and lede on the left,
a compass loop on the right. The compass is a thin ink circle with
cardinal phase labels at N/E/S/W, clockwise arrow glyphs at 45°
transit points, a slow orbiting accent dot, and an italic impeccable
wordmark in the middle. Collapses to vertical stack below 880px.

Phase sections below the hero are full width. Each opens with a
numbered eyebrow, italic Cormorant title (spine), and a 60ch sub.
Appendix sections (register cross-link, DESIGN.md interop, what to
avoid, CTA) use a quieter title tier in roman to separate spine from
supporting material. All separators are 1px mist hairline, no 2px
black rules; rhythm comes from variable padding and margins.

Adds /live-mode hero-frame polish, new top-nav entry (Home · Designing
· Docs · Anti-Patterns · Live · Overlay), footer link, and the server
route for /designing.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 content/site/partials/header.html |    1 +
 public/css/docs-visuals.css       | 1192 ++++++++++++++++++++++++++++-
 public/designing/index.html       |  550 +++++++++++++
 public/index.html                 |    2 +
 public/live-mode/index.html       |    1 +
 scripts/build-sub-pages.js        |  402 ++++++++++
 server/index.js                   |    2 +
 7 files changed, 2149 insertions(+), 1 deletion(-)
 create mode 100644 public/designing/index.html

diff --git a/content/site/partials/header.html b/content/site/partials/header.html
index d6f80c7e9..d28c67058 100644
--- a/content/site/partials/header.html
+++ b/content/site/partials/header.html
@@ -7,6 +7,7 @@
   <div class="site-header-right">
     <nav class="site-header-nav" aria-label="Primary">
       <a href="/" data-nav="home">Home</a>
+      <a href="/designing" data-nav="designing">Designing</a>
       <a href="/docs" data-nav="docs">Docs</a>
       <a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
       <a href="/live-mode" data-nav="live">Live</a>
diff --git a/public/css/docs-visuals.css b/public/css/docs-visuals.css
index 275fb7c42..15ff073ce 100644
--- a/public/css/docs-visuals.css
+++ b/public/css/docs-visuals.css
@@ -1371,11 +1371,22 @@
   color: oklch(70% 0.18 145);
 }
 
-/* Demo section — wraps the animated homepage .live-demo block */
+/* Demo section — wraps the animated homepage .live-demo block.
+   The homepage uses a 2-col grid (frame + support cells). /live-mode
+   replaces the support cells with the stages section below, so the
+   frame should take the full width here. */
 .live-mode-demo-wrap {
   margin: 0;
 }
 
+.live-mode-demo-wrap .live-demo {
+  grid-template-columns: 1fr;
+}
+
+.live-mode-demo-wrap .live-demo-frame {
+  max-width: none;
+}
+
 .live-mode-demo-caption {
   margin: 14px 0 0;
   font-family: var(--font-body);
@@ -1623,3 +1634,1182 @@
   text-underline-offset: 2px;
   font-weight: 600;
 }
+
+
+/* ============================================
+   DESIGNING WITH IMPECCABLE (/designing)
+
+   Editorial orientation page. Cards are rare — most sections
+   rely on typography, whitespace, and hairline rules for structure.
+   Four core phases get full weight; three appendix sections (register,
+   interop, avoid) render at a quieter tier. CTA climax at the bottom.
+
+   Spacing follows DESIGN.md: 8 / 16 / 24 / 32 / 48 / 80 / 120.
+   Two card radii: 8 (inline chrome like terminal, live frame) and 12
+   (only the loop spine + CTA climax). No freestyle paddings.
+   ============================================ */
+
+.designing-page {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem) clamp(4rem, 8vw, 6rem);
+}
+
+/* ---------- Hero ---------- */
+
+/* Hero wrapper: hero text on the left, compass loop on the right when
+   there's enough room. Single column below ~880px so both halves stay
+   legible. */
+.designing-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
+  column-gap: clamp(1.5rem, 4vw, 3rem);
+  row-gap: var(--spacing-xl, 48px);
+  align-items: center;
+  margin-bottom: var(--spacing-2xl, 80px);
+}
+
+@media (max-width: 880px) {
+  .designing-hero {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+}
+
+.designing-page-header {
+  max-width: 46ch;
+}
+
+.designing-page-eyebrow {
+  display: block;
+  font-family: var(--font-body);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-accent);
+  margin-bottom: var(--spacing-sm, 16px);
+}
+
+.designing-page-title {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-style: italic;
+  font-size: clamp(2.75rem, 6vw, 4rem);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  color: var(--color-ink);
+  margin: 0 0 var(--spacing-md, 24px) 0;
+}
+
+.designing-page-title em {
+  font-style: italic;
+  color: var(--color-accent);
+}
+
+.designing-page-lede {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: clamp(1rem, 1.6vw, 1.125rem);
+  line-height: 1.65;
+  color: var(--color-charcoal);
+  margin: 0;
+  max-width: 58ch;
+}
+
+/* ---------- Loop spine ---------- */
+/*
+ * Editorial compass. A thin ink circle is the loop itself; four phase
+ * labels sit at the N/E/S/W compass points and read clockwise. Four
+ * small clockwise arrow glyphs mark the transit points on the ring.
+ * The center carries a quiet italic wordmark so the circle has a
+ * typographic anchor.
+ */
+
+.designing-loop-wrap {
+  padding: 0;
+}
+
+.designing-loop-wrap-eyebrow {
+  display: none;
+}
+
+.designing-loop {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(96px, 1fr) clamp(200px, 26vw, 280px) minmax(96px, 1fr);
+  grid-template-rows: auto clamp(200px, 26vw, 280px) auto;
+  column-gap: clamp(0.75rem, 2vw, 1.25rem);
+  row-gap: clamp(0.75rem, 2vw, 1.25rem);
+  max-width: 540px;
+  margin: 0 auto;
+  align-items: center;
+  justify-items: center;
+}
+
+/* When the loop stands alone (e.g. stacked below the hero on narrow
+   viewports), the eyebrow comes back and a touch more air surrounds it. */
+@media (max-width: 880px) {
+  .designing-loop-wrap {
+    padding-top: clamp(1rem, 3vw, 2rem);
+  }
+  .designing-loop-wrap-eyebrow {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--color-ash);
+    text-align: center;
+    margin-bottom: clamp(1rem, 2vw, 1.5rem);
+  }
+}
+
+.designing-loop-node {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-decoration: none;
+  color: inherit;
+  max-width: 24ch;
+}
+
+.designing-loop-node--start {
+  grid-column: 2;
+  grid-row: 1;
+  text-align: center;
+  align-items: center;
+}
+.designing-loop-node--iterate {
+  grid-column: 3;
+  grid-row: 2;
+  text-align: left;
+  align-items: flex-start;
+}
+.designing-loop-node--polish {
+  grid-column: 2;
+  grid-row: 3;
+  text-align: center;
+  align-items: center;
+}
+.designing-loop-node--maintain {
+  grid-column: 1;
+  grid-row: 2;
+  text-align: right;
+  align-items: flex-end;
+}
+
+.designing-loop-num {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.18em;
+  color: var(--color-accent);
+  text-transform: uppercase;
+}
+
+.designing-loop-name {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(1.5rem, 2.4vw, 2rem);
+  line-height: 1;
+  color: var(--color-ink);
+  transition: color 180ms var(--ease-out, ease);
+  margin-top: 2px;
+}
+
+.designing-loop-node:hover .designing-loop-name {
+  color: var(--color-accent);
+}
+
+.designing-loop-hint {
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  color: var(--color-charcoal);
+  margin-top: 6px;
+  max-width: 20ch;
+}
+
+/* Hide hints inside the compressed hero-side compass; the full phase
+   description lives in its section below. Shown again when the compass
+   stacks under the hero on narrow viewports. */
+@media (min-width: 881px) {
+  .designing-hero .designing-loop-hint {
+    display: none;
+  }
+}
+
+/* The wheel — center cell. Thin ink circle + clockwise arrow glyphs at
+   the 45° positions + an italic wordmark in the middle. */
+.designing-loop-wheel {
+  grid-column: 2;
+  grid-row: 2;
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  align-self: center;
+  justify-self: center;
+}
+
+.designing-loop-wheel-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.designing-loop-wheel-ring {
+  fill: none;
+  stroke: var(--color-ink);
+  stroke-width: 1;
+  opacity: 0.85;
+}
+
+.designing-loop-wheel-tick {
+  stroke: var(--color-ink);
+  stroke-width: 1;
+  opacity: 0.18;
+}
+
+.designing-loop-wheel-tick--cardinal {
+  stroke-width: 1.25;
+  opacity: 0.4;
+}
+
+.designing-loop-wheel-dot {
+  fill: var(--color-accent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .designing-loop-wheel-dot {
+    offset-path: path("M 50 4 A 46 46 0 1 1 50 96 A 46 46 0 1 1 50 4");
+    animation: designingWheelOrbit 22s linear infinite;
+  }
+}
+
+@keyframes designingWheelOrbit {
+  from { offset-distance: 0%; }
+  to   { offset-distance: 100%; }
+}
+
+.designing-loop-wheel-arrow {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--color-cream);
+  color: var(--color-accent);
+  font-family: var(--font-body);
+  font-size: 13px;
+  line-height: 1;
+  border-radius: 50%;
+  user-select: none;
+}
+
+/* 45° offsets: cos 45° ≈ 0.7071. At radius 50% of wheel size, that's
+   ~35.4% along each axis from center. */
+.designing-loop-wheel-arrow--ne { top: calc(50% - 35.4%); left: calc(50% + 35.4%); transform: translate(-50%, -50%); }
+.designing-loop-wheel-arrow--se { top: calc(50% + 35.4%); left: calc(50% + 35.4%); transform: translate(-50%, -50%); }
+.designing-loop-wheel-arrow--sw { top: calc(50% + 35.4%); left: calc(50% - 35.4%); transform: translate(-50%, -50%); }
+.designing-loop-wheel-arrow--nw { top: calc(50% - 35.4%); left: calc(50% - 35.4%); transform: translate(-50%, -50%); }
+
+.designing-loop-wheel-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  pointer-events: none;
+}
+
+.designing-loop-wheel-center-label {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+}
+
+.designing-loop-wheel-center-mark {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
+  line-height: 1;
+  color: var(--color-ink);
+}
+
+@media (max-width: 720px) {
+  .designing-loop {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(7, auto);
+    row-gap: 12px;
+    justify-items: start;
+  }
+  .designing-loop-node {
+    text-align: left;
+    align-items: flex-start;
+    max-width: none;
+  }
+  .designing-loop-node--start    { grid-column: 1; grid-row: 1; }
+  .designing-loop-node--iterate  { grid-column: 1; grid-row: 3; }
+  .designing-loop-node--polish   { grid-column: 1; grid-row: 5; }
+  .designing-loop-node--maintain { grid-column: 1; grid-row: 7; }
+  .designing-loop-wheel { display: none; }
+}
+
+/* ============================================
+   PHASE SECTIONS — editorial, text-dominant
+   ============================================ */
+
+.designing-phase {
+  scroll-margin-top: 80px;
+  padding-top: var(--spacing-xl, 48px);
+  padding-bottom: var(--spacing-xl, 48px);
+  border-top: 1px solid var(--color-mist);
+}
+
+/* First phase after the loop: no border (loop-wrap already separates),
+   but keep a little top air so the eye settles. */
+.designing-loop-wrap + .designing-phase {
+  border-top: 0;
+  padding-top: var(--spacing-lg, 32px);
+}
+
+/* Transition from spine to appendix: rely on whitespace, not a thicker
+   rule. Design system uses only 1px mist separators. */
+.designing-phase:not(.designing-phase--appendix) + .designing-phase--appendix {
+  margin-top: var(--spacing-2xl, 80px);
+}
+
+.designing-phase-head {
+  margin-bottom: var(--spacing-lg, 32px);
+}
+
+.designing-phase-num {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  color: var(--color-accent);
+  text-transform: uppercase;
+  margin-bottom: var(--spacing-sm, 16px);
+}
+
+.designing-phase--appendix .designing-phase-num {
+  color: var(--color-ash);
+}
+
+.designing-phase-title {
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-style: italic;
+  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
+  line-height: 1.15;
+  color: var(--color-ink);
+  margin: 0 0 var(--spacing-sm, 16px) 0;
+  max-width: 22ch;
+}
+
+.designing-phase--appendix .designing-phase-title {
+  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
+  font-style: normal;
+  max-width: 32ch;
+}
+
+.designing-phase-sub {
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  color: var(--color-charcoal);
+  margin: 0;
+  max-width: 60ch;
+}
+
+.designing-phase--appendix .designing-phase-sub {
+  font-size: 0.9375rem;
+  max-width: 64ch;
+}
+
+.designing-phase-commands {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: var(--spacing-md, 24px);
+}
+
+.designing-phase-cmd {
+  padding: 4px 10px;
+  background: transparent;
+  border: 1px solid var(--color-mist);
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: border-color 160ms ease, color 160ms ease;
+}
+
+.designing-phase-cmd:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.designing-phase-body {
+  margin-top: var(--spacing-lg, 32px);
+}
+
+/* ============================================
+   PHASE 1 — Start
+   ============================================ */
+
+.designing-start-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: clamp(1.5rem, 4vw, 3rem);
+  align-items: start;
+}
+
+@media (max-width: 720px) {
+  .designing-start-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.designing-start-grid-prose {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--color-ink);
+  max-width: 36ch;
+}
+
+.designing-start-grid-prose p {
+  margin: 0 0 1rem 0;
+}
+
+.designing-start-grid-prose p:last-child {
+  margin-bottom: 0;
+}
+
+.designing-start-grid-prose code {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  color: var(--color-accent);
+}
+
+/* Codex aside — quieter, pull-quote shape, not a card */
+.designing-codex {
+  margin-top: var(--spacing-xl, 48px);
+  padding: var(--spacing-md, 24px) 0 var(--spacing-md, 24px) var(--spacing-md, 24px);
+  border-left: 2px solid var(--color-accent);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--spacing-md, 24px);
+  row-gap: 6px;
+  align-items: baseline;
+}
+
+@media (max-width: 640px) {
+  .designing-codex {
+    grid-template-columns: 1fr;
+  }
+}
+
+.designing-codex-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  white-space: nowrap;
+  padding-top: 2px;
+}
+
+.designing-codex-body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--color-ink);
+  margin: 0;
+  max-width: 56ch;
+}
+
+.designing-codex-body code,
+.designing-codex-body strong {
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.designing-codex-hosts {
+  grid-column: 2;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-ash);
+  margin-top: 8px;
+}
+
+@media (max-width: 640px) {
+  .designing-codex-hosts {
+    grid-column: 1;
+  }
+}
+
+/* ============================================
+   PHASE 2 — Iterate
+   ============================================ */
+
+.designing-iterate-split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+@media (max-width: 720px) {
+  .designing-iterate-split {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-xl, 48px);
+  }
+}
+
+.designing-iterate-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 16px);
+}
+
+.designing-iterate-kind {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.designing-iterate-name {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1.375rem;
+  line-height: 1.2;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.designing-iterate-when {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  color: var(--color-charcoal);
+  line-height: 1.6;
+  margin: 0;
+  max-width: 36ch;
+}
+
+.designing-iterate-terminal {
+  background: var(--color-ink);
+  color: oklch(90% 0 0);
+  border-radius: 8px;
+  padding: 24px 22px;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 2.2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 240px;
+}
+
+.designing-iterate-col {
+  align-self: stretch;
+}
+
+.designing-iterate-terminal-line {
+  display: flex;
+  gap: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.designing-iterate-terminal-prompt {
+  color: var(--color-accent);
+  user-select: none;
+}
+
+/* Pass-through wrapper for the embedded docs-viz-live-frame.
+   Overrides shrink the stage so the frame matches the terminal
+   height on the opposite column. */
+.designing-iterate-live .docs-viz-live-frame {
+  box-shadow: 0 4px 18px oklch(0% 0 0 / 0.05);
+}
+
+.designing-iterate-live .docs-viz-live-stage {
+  min-height: 180px;
+  padding: 20px 18px 52px;
+}
+
+.designing-iterate-live .docs-viz-live-stage--tall {
+  min-height: 180px;
+}
+
+.designing-iterate-live .docs-viz-live-target {
+  width: 60%;
+}
+
+.designing-iterate-live .docs-viz-live-outline {
+  inset: 14px 14px 44px;
+}
+
+.designing-iterate-live .docs-viz-live-ctx {
+  top: 16px;
+}
+
+.designing-iterate-live .docs-viz-live-gbar {
+  bottom: 10px;
+}
+
+/* Decision table (replaces the old matrix card) */
+.designing-iterate-table {
+  margin-top: var(--spacing-xl, 48px);
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+}
+
+.designing-iterate-table caption {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+  text-align: left;
+  padding-bottom: 10px;
+}
+
+.designing-iterate-table th,
+.designing-iterate-table td {
+  text-align: left;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-mist);
+  vertical-align: top;
+}
+
+.designing-iterate-table th {
+  font-weight: 500;
+  color: var(--color-charcoal);
+  width: 55%;
+}
+
+.designing-iterate-table td {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-accent);
+}
+
+.designing-iterate-table td a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+
+.designing-iterate-table td a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* ============================================
+   PHASE 3 — Polish (3-column editorial, no cards)
+   ============================================ */
+
+.designing-polish {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+@media (max-width: 720px) {
+  .designing-polish {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg, 32px);
+  }
+}
+
+.designing-polish-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 16px);
+  padding-top: var(--spacing-sm, 16px);
+  border-top: 1px solid var(--color-ink);
+}
+
+.designing-polish-cmd {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--color-accent);
+}
+
+.designing-polish-cmd a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+
+.designing-polish-cmd a:hover { text-decoration-thickness: 2px; }
+
+.designing-polish-name {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1.5rem;
+  line-height: 1.1;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.designing-polish-desc {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: var(--color-charcoal);
+  margin: 0;
+}
+
+/* ============================================
+   PHASE 4 — Maintain (two editorial columns + one hero viz each)
+   ============================================ */
+
+.designing-maintain {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+@media (max-width: 720px) {
+  .designing-maintain {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-xl, 48px);
+  }
+}
+
+.designing-maintain-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 16px);
+}
+
+.designing-maintain-label {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+}
+
+.designing-maintain-label a {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+
+.designing-maintain-label a:hover { text-decoration-thickness: 2px; }
+
+.designing-maintain-name {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1.5rem;
+  line-height: 1.15;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.designing-maintain-desc {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.7;
+  color: var(--color-charcoal);
+  margin: 0 0 var(--spacing-md, 24px) 0;
+}
+
+/* Extract consolidation viz — inline, no card */
+.designing-extract-viz {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 14px;
+  align-items: center;
+}
+
+.designing-extract-before {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+}
+
+.designing-extract-btn {
+  padding: 6px 4px;
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 3px;
+  font-family: var(--font-body);
+  font-size: 9px;
+  text-align: center;
+  color: var(--color-charcoal);
+}
+
+.designing-extract-btn:nth-child(1) { background: oklch(97% 0.01 20); }
+.designing-extract-btn:nth-child(3) { background: oklch(97% 0.01 220); color: oklch(40% 0.06 220); }
+.designing-extract-btn:nth-child(4) { border-radius: 0; }
+.designing-extract-btn:nth-child(6) { border-radius: 999px; }
+
+.designing-extract-arrow {
+  color: var(--color-accent);
+  font-size: 16px;
+}
+
+.designing-extract-after {
+  padding: 10px;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  border-radius: 4px;
+  text-align: center;
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* DESIGN.md inline preview */
+.designing-designmd-preview {
+  padding: 10px 14px;
+  background: var(--color-cream);
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.85;
+  color: var(--color-ink);
+}
+
+.designing-designmd-preview-line {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.designing-designmd-preview-num {
+  color: var(--color-ash);
+  min-width: 18px;
+}
+
+/* ============================================
+   APPENDIX: Register (cross-link, quieter aside)
+   ============================================ */
+
+.designing-register {
+  display: grid;
+  grid-template-columns: 1fr 1.6fr;
+  gap: clamp(1.5rem, 4vw, 2.5rem);
+  align-items: center;
+}
+
+@media (max-width: 640px) {
+  .designing-register {
+    grid-template-columns: 1fr;
+  }
+}
+
+.designing-register-preview {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.designing-register-mini {
+  padding: 14px 12px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 88px;
+  justify-content: center;
+}
+
+.designing-register-mini--brand {
+  background: oklch(96% 0.02 30);
+}
+
+.designing-register-mini--brand .designing-register-mini-label {
+  font-family: var(--font-mono);
+  font-size: 8px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: oklch(40% 0.12 30);
+}
+
+.designing-register-mini--brand .designing-register-mini-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 14px;
+  color: oklch(20% 0.1 30);
+  line-height: 1.1;
+}
+
+.designing-register-mini--product {
+  background: var(--color-cream);
+}
+
+.designing-register-mini--product .designing-register-mini-label {
+  font-family: var(--font-body);
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--color-ash);
+}
+
+.designing-register-mini--product .designing-register-mini-title {
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--color-ink);
+  line-height: 1.2;
+}
+
+.designing-register-link {
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  display: inline-block;
+  margin-top: var(--spacing-md, 24px);
+  margin-bottom: var(--spacing-sm, 16px);
+}
+
+.designing-register-link:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* ============================================
+   APPENDIX: Interop (minimal inline diagram)
+   ============================================ */
+
+.designing-interop {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px 24px;
+  align-items: center;
+  justify-items: center;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  color: var(--color-ink);
+  padding: 32px 16px;
+  border: 1px solid var(--color-mist);
+  border-radius: 8px;
+  background: var(--color-cream);
+}
+
+@media (max-width: 640px) {
+  .designing-interop {
+    grid-template-columns: 1fr;
+    padding: 24px 16px;
+  }
+}
+
+.designing-interop-side {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  text-align: center;
+}
+
+.designing-interop-side-label {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+}
+
+.designing-interop-side-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  color: var(--color-ink);
+}
+
+.designing-interop-node {
+  padding: 8px 16px;
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+.designing-interop-node--center {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: transparent;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  padding: 12px 20px;
+}
+
+.designing-interop-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-accent);
+  font-size: 18px;
+  line-height: 1;
+}
+
+@media (max-width: 640px) {
+  .designing-interop-arrow { transform: rotate(90deg); }
+}
+
+/* ============================================
+   APPENDIX: What to avoid (inline list, no cards)
+   ============================================ */
+
+.designing-avoid {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.designing-avoid li {
+  padding: var(--spacing-sm, 16px) 0;
+  border-bottom: 1px solid var(--color-mist);
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: var(--spacing-sm, 16px);
+  align-items: baseline;
+}
+
+.designing-avoid li:last-child {
+  border-bottom: 0;
+}
+
+.designing-avoid-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background: oklch(95% 0.04 25);
+  color: oklch(55% 0.22 25);
+  border-radius: 50%;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  align-self: start;
+  margin-top: 3px;
+}
+
+.designing-avoid-title {
+  display: block;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-ink);
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+.designing-avoid-desc {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--color-charcoal);
+  margin: 0;
+  max-width: 62ch;
+}
+
+/* ============================================
+   CTA climax (largest typographic moment)
+   ============================================ */
+
+.designing-cta {
+  margin-top: var(--spacing-3xl, 120px);
+  padding-top: var(--spacing-xl, 48px);
+  border-top: 1px solid var(--color-mist);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+}
+
+@media (max-width: 720px) {
+  .designing-cta {
+    grid-template-columns: 1fr;
+  }
+}
+
+.designing-cta-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm, 16px);
+  padding: var(--spacing-lg, 32px);
+  background: var(--color-paper);
+  border: 1px solid var(--color-mist);
+  border-radius: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 200ms ease, background 200ms ease;
+}
+
+.designing-cta-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-accent-dim);
+}
+
+.designing-cta-card-kind {
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+}
+
+.designing-cta-card-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
+  line-height: 1.1;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.designing-cta-card-title em {
+  color: var(--color-accent);
+  font-style: italic;
+}
+
+.designing-cta-card-desc {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--color-charcoal);
+  margin: 0;
+}
diff --git a/public/designing/index.html b/public/designing/index.html
new file mode 100644
index 000000000..251705395
--- /dev/null
+++ b/public/designing/index.html
@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Designing with Impeccable</title>
+  <meta name="description" content="The core loop: start, iterate, polish, maintain. How to use Impeccable end-to-end, from a blank file to shipped feature to paid-down design debt.">
+  <meta name="theme-color" content="#fafafa">
+  <link rel="canonical" href="https://impeccable.style/designing">
+  <link rel="icon" type="image/svg+xml" href="../favicon.svg">
+  <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=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../css/sub-pages.css">
+  
+</head>
+<body class="sub-page designing-page-body">
+  <a href="#main" class="skip-link">Skip to content</a>
+  <!-- site-header v1 -->
+<header class="site-header" data-site-header>
+  <a href="/" class="site-header-brand" aria-label="Impeccable home">
+    <svg class="site-header-brand-logo" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="6" fill="#1a1a1a"/><text x="16" y="24" font-family="system-ui, -apple-system, sans-serif" font-size="22" font-weight="500" fill="#f5f3ef" text-anchor="middle">/</text></svg>
+    <span class="site-header-brand-name">Impeccable</span>
+  </a>
+  <div class="site-header-right">
+    <nav class="site-header-nav" aria-label="Primary">
+      <a href="/" data-nav="home">Home</a>
+      <a href="/designing" data-nav="designing" aria-current="page">Designing</a>
+      <a href="/docs" data-nav="docs">Docs</a>
+      <a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
+      <a href="/live-mode" data-nav="live">Live</a>
+      <a href="/visual-mode" data-nav="visual-mode">Overlay</a>
+    </nav>
+    <a href="https://github.com/pbakaus/impeccable" class="site-header-github" target="_blank" rel="noopener" aria-label="Impeccable on GitHub, 21k stars">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
+      <span class="site-header-github-label">21k</span>
+      <svg class="site-header-github-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l2.76 6.36L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l7.24-.91L12 2z"/></svg>
+    </a>
+  </div>
+</header>
+  <main id="main">
+
+<div class="designing-page">
+  <section class="designing-hero">
+    <header class="designing-page-header">
+      <span class="designing-page-eyebrow">The core loop</span>
+      <h1 class="designing-page-title">Designing <em>with Impeccable</em></h1>
+      <p class="designing-page-lede">Shipping a real interface is a loop. Four phases, each with one place to begin.</p>
+    </header>
+
+    <div class="designing-loop-wrap" aria-label="The four-phase loop">
+    <span class="designing-loop-wrap-eyebrow">The core loop</span>
+    <div class="designing-loop">
+      
+      <a class="designing-loop-node designing-loop-node--start" href="#start">
+        <span class="designing-loop-num">01</span>
+        <span class="designing-loop-name">Start</span>
+        <span class="designing-loop-hint">From a blank file, through a brief, to a designed feature.</span>
+      </a>
+      <a class="designing-loop-node designing-loop-node--iterate" href="#iterate">
+        <span class="designing-loop-num">02</span>
+        <span class="designing-loop-name">Iterate</span>
+        <span class="designing-loop-hint">Refine in place. Command line or in the browser.</span>
+      </a>
+      <a class="designing-loop-node designing-loop-node--polish" href="#polish">
+        <span class="designing-loop-num">03</span>
+        <span class="designing-loop-name">Polish</span>
+        <span class="designing-loop-hint">The pre-ship gauntlet. Audit, clarify, harden.</span>
+      </a>
+      <a class="designing-loop-node designing-loop-node--maintain" href="#maintain">
+        <span class="designing-loop-num">04</span>
+        <span class="designing-loop-name">Maintain</span>
+        <span class="designing-loop-hint">Pay down design debt before it solidifies.</span>
+      </a>
+      <div class="designing-loop-wheel" aria-hidden="true">
+        <svg class="designing-loop-wheel-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+          <circle class="designing-loop-wheel-ring" cx="50" cy="50" r="46"/>
+          <!-- 12 tick marks at 30° increments. Cardinals (0/90/180/270) stronger. -->
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="50" y1="2.5" x2="50" y2="5.5"/>
+          <line class="designing-loop-wheel-tick" x1="73" y1="8.7" x2="72" y2="11.4"/>
+          <line class="designing-loop-wheel-tick" x1="91.3" y1="27" x2="88.6" y2="28"/>
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="97.5" y1="50" x2="94.5" y2="50"/>
+          <line class="designing-loop-wheel-tick" x1="91.3" y1="73" x2="88.6" y2="72"/>
+          <line class="designing-loop-wheel-tick" x1="73" y1="91.3" x2="72" y2="88.6"/>
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="50" y1="97.5" x2="50" y2="94.5"/>
+          <line class="designing-loop-wheel-tick" x1="27" y1="91.3" x2="28" y2="88.6"/>
+          <line class="designing-loop-wheel-tick" x1="8.7" y1="73" x2="11.4" y2="72"/>
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="2.5" y1="50" x2="5.5" y2="50"/>
+          <line class="designing-loop-wheel-tick" x1="8.7" y1="27" x2="11.4" y2="28"/>
+          <line class="designing-loop-wheel-tick" x1="27" y1="8.7" x2="28" y2="11.4"/>
+          <!-- Clockwise-orbiting accent dot, animates with offset-path. -->
+          <circle class="designing-loop-wheel-dot" cx="0" cy="0" r="2.2"/>
+        </svg>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--ne">↘</span>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--se">↙</span>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--sw">↖</span>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--nw">↗</span>
+        <div class="designing-loop-wheel-center">
+          <span class="designing-loop-wheel-center-label">designing</span>
+          <span class="designing-loop-wheel-center-mark">impeccable</span>
+        </div>
+      </div>
+    </div>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="start">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">01 &middot; Start</span>
+      <h2 class="designing-phase-title">From a blank file to a designed feature.</h2>
+      <p class="designing-phase-sub">Run <code>/impeccable teach</code> once per project to establish PRODUCT.md and DESIGN.md. Then reach for <code>/impeccable craft</code> and describe what you want to build. Shape, build, and iterate happen inside one invocation.</p>
+      <div class="designing-phase-commands">
+        <a class="designing-phase-cmd" href="/docs/teach">/impeccable teach</a>
+        <a class="designing-phase-cmd" href="/docs/craft">/impeccable craft</a>
+        <a class="designing-phase-cmd" href="/docs/shape">/impeccable shape</a>
+      </div>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-start-grid">
+        <div class="docs-viz-file" style="margin:0">
+          <div class="docs-viz-file-header">
+            <span class="docs-viz-file-name">PRODUCT.md</span>
+            <span class="docs-viz-file-status">Written by teach</span>
+          </div>
+          <div class="docs-viz-file-body">
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Register</span>
+              <span class="docs-viz-file-v">Product. Design serves the task.</span>
+            </div>
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Users</span>
+              <span class="docs-viz-file-v">SREs on call, reading fast, often in the dark.</span>
+            </div>
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Voice</span>
+              <span class="docs-viz-file-v">Calm, clinical, no hype.</span>
+            </div>
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Anti-references</span>
+              <span class="docs-viz-file-v">Purple gradients. Glassmorphism. Hype.</span>
+            </div>
+          </div>
+        </div>
+        <div class="designing-start-grid-prose">
+          <p>Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes <code>PRODUCT.md</code> and, if there's code to scan, a <code>DESIGN.md</code>.</p>
+          <p>From that point on, every command reads both files before generating. Craft, polish, critique, live, all of them.</p>
+        </div>
+      </div>
+
+      <aside class="designing-codex">
+        <span class="designing-codex-eyebrow">A note on image-gen</span>
+        <p class="designing-codex-body">Harnesses that can generate images take this further. On Codex and Gemini, craft generates reference visuals first, then implements from them. The mood board is built into the flow, not a separate step you have to remember.</p>
+      </aside>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="iterate">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">02 &middot; Iterate</span>
+      <h2 class="designing-phase-title">Refine what's there.</h2>
+      <p class="designing-phase-sub">Once something exists, you're iterating. There are two paths: specific commands for named dimensions, or Live Mode for visual exploration.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-iterate-split">
+        <div class="designing-iterate-col">
+          <span class="designing-iterate-kind">Command line</span>
+          <h3 class="designing-iterate-name">When the edit has a name.</h3>
+          <p class="designing-iterate-when">Type a command and let the skill encode a specific discipline. Best when you know the word: typography, layout, color, motion.</p>
+          <div class="designing-iterate-terminal" aria-hidden="true">
+            <div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable polish pricing</span></div>
+            <div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable bolder hero</span></div>
+            <div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable typeset checkout</span></div>
+          </div>
+        </div>
+
+        <div class="designing-iterate-col">
+          <span class="designing-iterate-kind">Live Mode</span>
+          <h3 class="designing-iterate-name">When the edit is easier to point at.</h3>
+          <p class="designing-iterate-when">Pick any element in the browser, draw, type, hit Go. Three production-quality variants. Accept one and it writes to source.</p>
+          <div class="designing-iterate-live" aria-hidden="true">
+            <div class="docs-viz-live-frame" style="max-width:100%">
+              <div class="docs-viz-live-chrome">
+                <span class="docs-viz-live-dot"></span>
+                <span class="docs-viz-live-dot"></span>
+                <span class="docs-viz-live-dot"></span>
+                <span class="docs-viz-live-url">localhost:3000</span>
+              </div>
+              <div class="docs-viz-live-stage">
+                <div class="docs-viz-live-target">
+                  <span class="docs-viz-live-kicker">No. 04</span>
+                  <h4 class="docs-viz-live-title">Letters, <em>occasionally</em>.</h4>
+                  <button class="docs-viz-live-btn" type="button">Send me one</button>
+                </div>
+                <div class="docs-viz-live-outline"></div>
+                <div class="docs-viz-live-ctx">
+                  <button class="docs-viz-live-ctx-nav" type="button">‹</button>
+                  <span class="docs-viz-live-ctx-counter">2 / 3</span>
+                  <button class="docs-viz-live-ctx-nav" type="button">›</button>
+                  <span class="docs-viz-live-ctx-divider"></span>
+                  <button class="docs-viz-live-ctx-accept" type="button">Accept</button>
+                </div>
+                <div class="docs-viz-live-gbar">
+                  <span class="docs-viz-live-gbar-brand">/</span>
+                  <span class="docs-viz-live-gbar-btn is-active">Pick</span>
+                  <span class="docs-viz-live-gbar-divider"></span>
+                  <span class="docs-viz-live-gbar-x">✕</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <table class="designing-iterate-table">
+        <caption>When to reach for which</caption>
+        <tbody>
+          <tr>
+            <th scope="row">Fix something "off" that you can't name</th>
+            <td><a href="/live-mode">/impeccable live</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Apply a specific discipline: type, layout, color, motion</th>
+            <td><a href="/docs/typeset">/typeset</a> &middot; <a href="/docs/layout">/layout</a> &middot; <a href="/docs/colorize">/colorize</a> &middot; <a href="/docs/animate">/animate</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Explore three directions side by side</th>
+            <td><a href="/live-mode">/impeccable live</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Ask "is this any good?"</th>
+            <td><a href="/docs/critique">/impeccable critique</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Bring a safe design to life, or tone a shouting one down</th>
+            <td><a href="/docs/bolder">/bolder</a> &middot; <a href="/docs/quieter">/quieter</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="polish">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">03 &middot; Polish</span>
+      <h2 class="designing-phase-title">The pre-ship gauntlet.</h2>
+      <p class="designing-phase-sub">Three commands in sequence before anything ships. They don't redesign; they find what still needs to change.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-polish">
+        <div class="designing-polish-col">
+          <span class="designing-polish-cmd"><a href="/docs/audit">/impeccable audit</a></span>
+          <h3 class="designing-polish-name">Score it.</h3>
+          <p class="designing-polish-desc">Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.</p>
+        </div>
+        <div class="designing-polish-col">
+          <span class="designing-polish-cmd"><a href="/docs/clarify">/impeccable clarify</a></span>
+          <h3 class="designing-polish-name">Rewrite the copy.</h3>
+          <p class="designing-polish-desc">Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.</p>
+        </div>
+        <div class="designing-polish-col">
+          <span class="designing-polish-cmd"><a href="/docs/harden">/impeccable harden</a></span>
+          <h3 class="designing-polish-name">Stress-test reality.</h3>
+          <p class="designing-polish-desc">60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="maintain">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">04 &middot; Maintain</span>
+      <h2 class="designing-phase-title">Design debt is real. Pay it down.</h2>
+      <p class="designing-phase-sub">Features ship, drift happens. Two commands close the gap before it solidifies.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-maintain">
+        <div class="designing-maintain-col">
+          <span class="designing-maintain-label"><a href="/docs/extract">/impeccable extract</a></span>
+          <h3 class="designing-maintain-name">Consolidate drift.</h3>
+          <p class="designing-maintain-desc">Find patterns used three or more times with the same intent. Propose tokens and primitives. Migrate call sites in the same pass.</p>
+          <div class="designing-extract-viz" aria-hidden="true">
+            <div class="designing-extract-before">
+              <span class="designing-extract-btn">Subscribe</span>
+              <span class="designing-extract-btn">Submit</span>
+              <span class="designing-extract-btn">Join</span>
+              <span class="designing-extract-btn">Send</span>
+              <span class="designing-extract-btn">Go</span>
+              <span class="designing-extract-btn">OK</span>
+            </div>
+            <span class="designing-extract-arrow">→</span>
+            <span class="designing-extract-after">Button</span>
+          </div>
+        </div>
+
+        <div class="designing-maintain-col">
+          <span class="designing-maintain-label"><a href="/docs/document">/impeccable document</a></span>
+          <h3 class="designing-maintain-name">Re-capture the system.</h3>
+          <p class="designing-maintain-desc">Scans tokens, components, and rendered output. Writes a spec-compliant DESIGN.md that every other command reads.</p>
+          <div class="designing-designmd-preview" aria-hidden="true">
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">01</span><span>Overview</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">02</span><span>Colors</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">03</span><span>Typography</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">04</span><span>Elevation</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">05</span><span>Components</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">06</span><span>Do's and Don'ts</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase designing-phase--appendix" aria-label="Brand vs product register">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">Before any of this</span>
+      <h2 class="designing-phase-title">Pick a register.</h2>
+      <p class="designing-phase-sub">Brand and product surfaces have different defaults. Impeccable tracks this in <code>PRODUCT.md</code> as a single field, so commands like <code>typeset</code>, <code>animate</code>, and <code>colorize</code> adapt their vocabulary to match.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-register">
+        <div class="designing-register-preview" aria-hidden="true">
+          <div class="designing-register-mini designing-register-mini--brand">
+            <span class="designing-register-mini-label">No. 04 &middot; Dispatch</span>
+            <span class="designing-register-mini-title">Letters, occasionally.</span>
+          </div>
+          <div class="designing-register-mini designing-register-mini--product">
+            <span class="designing-register-mini-label">Newsletter</span>
+            <span class="designing-register-mini-title">Subscribe to updates</span>
+          </div>
+        </div>
+        <div>
+          <p style="font-family:var(--font-body);font-size:0.9375rem;line-height:1.65;color:var(--color-charcoal);margin:0;max-width:52ch">The same element, rendered in brand register (editorial masthead) and product register (utility). Register is answered once during <code>teach</code> and applies to every downstream command.</p>
+          <a class="designing-register-link" href="/tutorials/brand-vs-product">Read the brand-vs-product tutorial &rarr;</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase designing-phase--appendix" aria-label="DESIGN.md interop">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">Interop</span>
+      <h2 class="designing-phase-title">Your system travels.</h2>
+      <p class="designing-phase-sub"><code>DESIGN.md</code> follows <a href="https://stitch.withgoogle.com/docs/design-md/format/" target="_blank" rel="noopener">the format Google Stitch publishes</a>. Not a lock-in. When you outgrow Impeccable or want a second opinion from another tool, the file comes with you.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-interop" aria-hidden="true">
+        <div class="designing-interop-side">
+          <span class="designing-interop-side-label">Writes it</span>
+          <span class="designing-interop-node">Impeccable</span>
+        </div>
+        <div class="designing-interop-node designing-interop-node--center">DESIGN.md</div>
+        <div class="designing-interop-side">
+          <span class="designing-interop-side-label">Reads it</span>
+          <div class="designing-interop-side-list">
+            <span class="designing-interop-node">Google Stitch</span>
+            <span class="designing-interop-node">Other tools</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase designing-phase--appendix" aria-label="What to avoid">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">Common mistakes</span>
+      <h2 class="designing-phase-title">What to avoid.</h2>
+      <p class="designing-phase-sub">An anti-patterns list, for using the anti-patterns tool.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <ul class="designing-avoid">
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Running both Impeccable and Anthropic's frontend-design skill</span>
+            <p class="designing-avoid-desc">Anthropic still promotes their skill in Claude Code, but it's been unmaintained and is now behind on recommended patterns. Run both and they collide on vocabulary, cancelling each other out. Pick one.</p>
+          </div>
+        </li>
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Pinning every command</span>
+            <p class="designing-avoid-desc">Pinning brings back <code>/audit</code>, <code>/polish</code>, <code>/critique</code> as shortcuts. Pin everything and you've re-exploded the <code>/</code> menu the v3.0 consolidation cleaned up. Pin the two or three you reach for daily.</p>
+          </div>
+        </li>
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Skipping <code>teach</code></span>
+            <p class="designing-avoid-desc">Commands still run without PRODUCT.md and DESIGN.md. They default to generic SaaS patterns. The floor is meaningfully higher with context. Run teach once; every later command benefits.</p>
+          </div>
+        </li>
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Treating it like a linter</span>
+            <p class="designing-avoid-desc">Impeccable is an opinionated design partner, not a validator. It has a point of view. Push back with a reason and it'll work with you. Ignore the opinion without a reason and output gets worse, not better.</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <nav class="designing-cta" aria-label="Where to go next">
+    <a class="designing-cta-card" href="/docs/teach">
+      <span class="designing-cta-card-kind">New project</span>
+      <h2 class="designing-cta-card-title">Start with <em>teach</em></h2>
+      <p class="designing-cta-card-desc">Five minutes of discovery, one PRODUCT.md, one DESIGN.md. Every command downstream gets sharper from here.</p>
+    </a>
+    <a class="designing-cta-card" href="/tutorials">
+      <span class="designing-cta-card-kind">Walk a scenario</span>
+      <h2 class="designing-cta-card-title">Open a <em>tutorial</em></h2>
+      <p class="designing-cta-card-desc">Four short walkthroughs of the highest-leverage flows: getting started, Live Mode, critique with the overlay, brand vs product.</p>
+    </a>
+  </nav>
+</div>
+  </main>
+  <script>
+    // Copy buttons on rendered code blocks
+    document.addEventListener('click', (e) => {
+      const btn = e.target.closest('[data-copy]');
+      if (!btn) return;
+      const text = btn.getAttribute('data-copy');
+      if (!text) return;
+      navigator.clipboard.writeText(text).then(() => {
+        btn.classList.add('is-copied');
+        setTimeout(() => btn.classList.remove('is-copied'), 1500);
+      }).catch(() => {});
+    });
+
+    // Mobile sidebar toggle (shown on narrow viewports, hidden on desktop).
+    document.addEventListener('click', (e) => {
+      const toggle = e.target.closest('.skills-sidebar-toggle');
+      if (!toggle) return;
+      const expanded = toggle.getAttribute('aria-expanded') === 'true';
+      toggle.setAttribute('aria-expanded', String(!expanded));
+    });
+
+    // Before/after split-compare: drag on touch, hover OR drag on mouse.
+    // Pointer events attach to the padded .split-comparison wrapper so
+    // there is a ~20px invisible buffer around the visible box. The
+    // divider only snaps back when the pointer leaves that outer buffer.
+    (function initSplitCompare() {
+      const wrappers = document.querySelectorAll('.split-comparison');
+      if (wrappers.length === 0) return;
+      const hasHover = matchMedia('(hover: hover)').matches;
+      const DEFAULT_POSITION = 50;
+
+      for (const wrapper of wrappers) {
+        const container = wrapper.querySelector('.split-container');
+        const splitAfter = wrapper.querySelector('.split-after');
+        const splitDivider = wrapper.querySelector('.split-divider');
+        if (!container || !splitAfter || !splitDivider) continue;
+
+        const tanAngle = Math.tan(10 * Math.PI / 180);
+        let skewOffset = 8;
+        const recalcSkew = () => {
+          const r = container.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            skewOffset = 50 * r.height * tanAngle / r.width;
+          }
+        };
+        recalcSkew();
+        window.addEventListener('resize', recalcSkew, { passive: true });
+
+        let targetX = DEFAULT_POSITION;
+        let currentX = DEFAULT_POSITION;
+        let rafId = null;
+
+        const paint = (pct) => {
+          const x = Math.max(-skewOffset, Math.min(100 + skewOffset, pct));
+          splitAfter.style.clipPath =
+            `polygon(${x + skewOffset}% 0%, 100% 0%, 100% 100%, ${x - skewOffset}% 100%)`;
+          splitDivider.style.left = `${x}%`;
+        };
+
+        const step = () => {
+          currentX += (targetX - currentX) * 0.2;
+          if (Math.abs(targetX - currentX) < 0.1) {
+            currentX = targetX;
+            rafId = null;
+          } else {
+            rafId = requestAnimationFrame(step);
+          }
+          paint(currentX);
+        };
+
+        const setTarget = (pct) => {
+          targetX = pct;
+          if (rafId === null) rafId = requestAnimationFrame(step);
+        };
+
+        paint(DEFAULT_POSITION);
+
+        // Percentage is always relative to the VISIBLE .split-container,
+        // not the padded .split-comparison wrapper. The pointer event
+        // target is the wrapper but the clip-path math uses the inner box.
+        const pctFromClientX = (clientX) => {
+          const rect = container.getBoundingClientRect();
+          return ((clientX - rect.left) / rect.width) * 100;
+        };
+
+        let hovering = false;
+        let dragging = false;
+
+        wrapper.addEventListener('pointerenter', (e) => {
+          if (hasHover && e.pointerType === 'mouse') {
+            hovering = true;
+          }
+        });
+
+        wrapper.addEventListener('pointerdown', (e) => {
+          dragging = true;
+          wrapper.setPointerCapture(e.pointerId);
+          setTarget(pctFromClientX(e.clientX));
+        });
+
+        wrapper.addEventListener('pointermove', (e) => {
+          if (dragging || hovering) {
+            setTarget(pctFromClientX(e.clientX));
+          }
+        });
+
+        const endDrag = (e) => {
+          if (dragging) {
+            dragging = false;
+            try { wrapper.releasePointerCapture(e.pointerId); } catch {}
+          }
+        };
+
+        wrapper.addEventListener('pointerup', endDrag);
+        wrapper.addEventListener('pointercancel', endDrag);
+
+        wrapper.addEventListener('pointerleave', (e) => {
+          endDrag(e);
+          if (hovering) {
+            hovering = false;
+            setTarget(DEFAULT_POSITION);
+          }
+        });
+      }
+    })();
+  </script>
+</body>
+</html>
diff --git a/public/index.html b/public/index.html
index 69beea2ba..86989c01a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -58,6 +58,7 @@
     <div class="site-header-right">
       <nav class="site-header-nav" aria-label="Primary">
         <a href="/" data-nav="home" aria-current="page">Home</a>
+        <a href="/designing" data-nav="designing">Designing</a>
         <a href="/docs" data-nav="docs">Docs</a>
         <a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
         <a href="/live-mode" data-nav="live">Live</a>
@@ -1152,6 +1153,7 @@
     <div class="footer-row">
       <span class="footer-logo">Impeccable</span>
       <nav class="footer-links" aria-label="Footer">
+        <a href="/designing">Designing</a>
         <a href="/docs">Docs</a>
         <a href="/anti-patterns">Anti-Patterns</a>
         <a href="/live-mode">Live Mode</a>
diff --git a/public/live-mode/index.html b/public/live-mode/index.html
index bb1b826b2..a3544e649 100644
--- a/public/live-mode/index.html
+++ b/public/live-mode/index.html
@@ -30,6 +30,7 @@
   <div class="site-header-right">
     <nav class="site-header-nav" aria-label="Primary">
       <a href="/" data-nav="home">Home</a>
+      <a href="/designing" data-nav="designing">Designing</a>
       <a href="/docs" data-nav="docs">Docs</a>
       <a href="/anti-patterns" data-nav="anti-patterns">Anti-Patterns</a>
       <a href="/live-mode" data-nav="live" aria-current="page">Live</a>
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index eb8fd57ba..36ca8a383 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -840,6 +840,391 @@ function renderLiveModeMain() {
 </div>`;
 }
 
+/**
+/**
+ * Render the /designing page.
+ *
+ * Editorial orientation: four-phase loop (start → iterate → polish →
+ * maintain) as the spine, plus three appendix sections (register,
+ * interop, avoid) and a CTA climax. Cards are rare: most sections
+ * rely on typography, hairline rules, and whitespace for structure.
+ */
+function renderDesigningMain() {
+  const loopNodes = [
+    { id: 'start',    num: '01', name: 'Start',    hint: 'From a blank file, through a brief, to a designed feature.' },
+    { id: 'iterate',  num: '02', name: 'Iterate',  hint: 'Refine in place. Command line or in the browser.' },
+    { id: 'polish',   num: '03', name: 'Polish',   hint: 'The pre-ship gauntlet. Audit, clarify, harden.' },
+    { id: 'maintain', num: '04', name: 'Maintain', hint: 'Pay down design debt before it solidifies.' },
+  ];
+  const nodeHtml = loopNodes.map((n) => `
+      <a class="designing-loop-node designing-loop-node--${n.id}" href="#${n.id}">
+        <span class="designing-loop-num">${n.num}</span>
+        <span class="designing-loop-name">${n.name}</span>
+        <span class="designing-loop-hint">${escapeHtml(n.hint)}</span>
+      </a>`).join('');
+
+  return `
+<div class="designing-page">
+  <section class="designing-hero">
+    <header class="designing-page-header">
+      <span class="designing-page-eyebrow">The core loop</span>
+      <h1 class="designing-page-title">Designing <em>with Impeccable</em></h1>
+      <p class="designing-page-lede">Shipping a real interface is a loop. Four phases, each with one place to begin.</p>
+    </header>
+
+    <div class="designing-loop-wrap" aria-label="The four-phase loop">
+    <span class="designing-loop-wrap-eyebrow">The core loop</span>
+    <div class="designing-loop">
+      ${nodeHtml}
+      <div class="designing-loop-wheel" aria-hidden="true">
+        <svg class="designing-loop-wheel-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+          <circle class="designing-loop-wheel-ring" cx="50" cy="50" r="46"/>
+          <!-- 12 tick marks at 30° increments. Cardinals (0/90/180/270) stronger. -->
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="50" y1="2.5" x2="50" y2="5.5"/>
+          <line class="designing-loop-wheel-tick" x1="73" y1="8.7" x2="72" y2="11.4"/>
+          <line class="designing-loop-wheel-tick" x1="91.3" y1="27" x2="88.6" y2="28"/>
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="97.5" y1="50" x2="94.5" y2="50"/>
+          <line class="designing-loop-wheel-tick" x1="91.3" y1="73" x2="88.6" y2="72"/>
+          <line class="designing-loop-wheel-tick" x1="73" y1="91.3" x2="72" y2="88.6"/>
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="50" y1="97.5" x2="50" y2="94.5"/>
+          <line class="designing-loop-wheel-tick" x1="27" y1="91.3" x2="28" y2="88.6"/>
+          <line class="designing-loop-wheel-tick" x1="8.7" y1="73" x2="11.4" y2="72"/>
+          <line class="designing-loop-wheel-tick designing-loop-wheel-tick--cardinal" x1="2.5" y1="50" x2="5.5" y2="50"/>
+          <line class="designing-loop-wheel-tick" x1="8.7" y1="27" x2="11.4" y2="28"/>
+          <line class="designing-loop-wheel-tick" x1="27" y1="8.7" x2="28" y2="11.4"/>
+          <!-- Clockwise-orbiting accent dot, animates with offset-path. -->
+          <circle class="designing-loop-wheel-dot" cx="0" cy="0" r="2.2"/>
+        </svg>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--ne">↘</span>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--se">↙</span>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--sw">↖</span>
+        <span class="designing-loop-wheel-arrow designing-loop-wheel-arrow--nw">↗</span>
+        <div class="designing-loop-wheel-center">
+          <span class="designing-loop-wheel-center-label">designing</span>
+          <span class="designing-loop-wheel-center-mark">impeccable</span>
+        </div>
+      </div>
+    </div>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="start">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">01 &middot; Start</span>
+      <h2 class="designing-phase-title">From a blank file to a designed feature.</h2>
+      <p class="designing-phase-sub">Run <code>/impeccable teach</code> once per project to establish PRODUCT.md and DESIGN.md. Then reach for <code>/impeccable craft</code> and describe what you want to build. Shape, build, and iterate happen inside one invocation.</p>
+      <div class="designing-phase-commands">
+        <a class="designing-phase-cmd" href="/docs/teach">/impeccable teach</a>
+        <a class="designing-phase-cmd" href="/docs/craft">/impeccable craft</a>
+        <a class="designing-phase-cmd" href="/docs/shape">/impeccable shape</a>
+      </div>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-start-grid">
+        <div class="docs-viz-file" style="margin:0">
+          <div class="docs-viz-file-header">
+            <span class="docs-viz-file-name">PRODUCT.md</span>
+            <span class="docs-viz-file-status">Written by teach</span>
+          </div>
+          <div class="docs-viz-file-body">
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Register</span>
+              <span class="docs-viz-file-v">Product. Design serves the task.</span>
+            </div>
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Users</span>
+              <span class="docs-viz-file-v">SREs on call, reading fast, often in the dark.</span>
+            </div>
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Voice</span>
+              <span class="docs-viz-file-v">Calm, clinical, no hype.</span>
+            </div>
+            <div class="docs-viz-file-row">
+              <span class="docs-viz-file-k">Anti-references</span>
+              <span class="docs-viz-file-v">Purple gradients. Glassmorphism. Hype.</span>
+            </div>
+          </div>
+        </div>
+        <div class="designing-start-grid-prose">
+          <p>Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes <code>PRODUCT.md</code> and, if there's code to scan, a <code>DESIGN.md</code>.</p>
+          <p>From that point on, every command reads both files before generating. Craft, polish, critique, live, all of them.</p>
+        </div>
+      </div>
+
+      <aside class="designing-codex">
+        <span class="designing-codex-eyebrow">A note on image-gen</span>
+        <p class="designing-codex-body">Harnesses that can generate images take this further. On Codex and Gemini, craft generates reference visuals first, then implements from them. The mood board is built into the flow, not a separate step you have to remember.</p>
+      </aside>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="iterate">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">02 &middot; Iterate</span>
+      <h2 class="designing-phase-title">Refine what's there.</h2>
+      <p class="designing-phase-sub">Once something exists, you're iterating. There are two paths: specific commands for named dimensions, or Live Mode for visual exploration.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-iterate-split">
+        <div class="designing-iterate-col">
+          <span class="designing-iterate-kind">Command line</span>
+          <h3 class="designing-iterate-name">When the edit has a name.</h3>
+          <p class="designing-iterate-when">Type a command and let the skill encode a specific discipline. Best when you know the word: typography, layout, color, motion.</p>
+          <div class="designing-iterate-terminal" aria-hidden="true">
+            <div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable polish pricing</span></div>
+            <div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable bolder hero</span></div>
+            <div class="designing-iterate-terminal-line"><span class="designing-iterate-terminal-prompt">$</span><span>/impeccable typeset checkout</span></div>
+          </div>
+        </div>
+
+        <div class="designing-iterate-col">
+          <span class="designing-iterate-kind">Live Mode</span>
+          <h3 class="designing-iterate-name">When the edit is easier to point at.</h3>
+          <p class="designing-iterate-when">Pick any element in the browser, draw, type, hit Go. Three production-quality variants. Accept one and it writes to source.</p>
+          <div class="designing-iterate-live" aria-hidden="true">
+            <div class="docs-viz-live-frame" style="max-width:100%">
+              <div class="docs-viz-live-chrome">
+                <span class="docs-viz-live-dot"></span>
+                <span class="docs-viz-live-dot"></span>
+                <span class="docs-viz-live-dot"></span>
+                <span class="docs-viz-live-url">localhost:3000</span>
+              </div>
+              <div class="docs-viz-live-stage">
+                <div class="docs-viz-live-target">
+                  <span class="docs-viz-live-kicker">No. 04</span>
+                  <h4 class="docs-viz-live-title">Letters, <em>occasionally</em>.</h4>
+                  <button class="docs-viz-live-btn" type="button">Send me one</button>
+                </div>
+                <div class="docs-viz-live-outline"></div>
+                <div class="docs-viz-live-ctx">
+                  <button class="docs-viz-live-ctx-nav" type="button">‹</button>
+                  <span class="docs-viz-live-ctx-counter">2 / 3</span>
+                  <button class="docs-viz-live-ctx-nav" type="button">›</button>
+                  <span class="docs-viz-live-ctx-divider"></span>
+                  <button class="docs-viz-live-ctx-accept" type="button">Accept</button>
+                </div>
+                <div class="docs-viz-live-gbar">
+                  <span class="docs-viz-live-gbar-brand">/</span>
+                  <span class="docs-viz-live-gbar-btn is-active">Pick</span>
+                  <span class="docs-viz-live-gbar-divider"></span>
+                  <span class="docs-viz-live-gbar-x">✕</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <table class="designing-iterate-table">
+        <caption>When to reach for which</caption>
+        <tbody>
+          <tr>
+            <th scope="row">Fix something "off" that you can't name</th>
+            <td><a href="/live-mode">/impeccable live</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Apply a specific discipline: type, layout, color, motion</th>
+            <td><a href="/docs/typeset">/typeset</a> &middot; <a href="/docs/layout">/layout</a> &middot; <a href="/docs/colorize">/colorize</a> &middot; <a href="/docs/animate">/animate</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Explore three directions side by side</th>
+            <td><a href="/live-mode">/impeccable live</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Ask "is this any good?"</th>
+            <td><a href="/docs/critique">/impeccable critique</a></td>
+          </tr>
+          <tr>
+            <th scope="row">Bring a safe design to life, or tone a shouting one down</th>
+            <td><a href="/docs/bolder">/bolder</a> &middot; <a href="/docs/quieter">/quieter</a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="polish">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">03 &middot; Polish</span>
+      <h2 class="designing-phase-title">The pre-ship gauntlet.</h2>
+      <p class="designing-phase-sub">Three commands in sequence before anything ships. They don't redesign; they find what still needs to change.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-polish">
+        <div class="designing-polish-col">
+          <span class="designing-polish-cmd"><a href="/docs/audit">/impeccable audit</a></span>
+          <h3 class="designing-polish-name">Score it.</h3>
+          <p class="designing-polish-desc">Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.</p>
+        </div>
+        <div class="designing-polish-col">
+          <span class="designing-polish-cmd"><a href="/docs/clarify">/impeccable clarify</a></span>
+          <h3 class="designing-polish-name">Rewrite the copy.</h3>
+          <p class="designing-polish-desc">Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.</p>
+        </div>
+        <div class="designing-polish-col">
+          <span class="designing-polish-cmd"><a href="/docs/harden">/impeccable harden</a></span>
+          <h3 class="designing-polish-name">Stress-test reality.</h3>
+          <p class="designing-polish-desc">60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase" id="maintain">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">04 &middot; Maintain</span>
+      <h2 class="designing-phase-title">Design debt is real. Pay it down.</h2>
+      <p class="designing-phase-sub">Features ship, drift happens. Two commands close the gap before it solidifies.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-maintain">
+        <div class="designing-maintain-col">
+          <span class="designing-maintain-label"><a href="/docs/extract">/impeccable extract</a></span>
+          <h3 class="designing-maintain-name">Consolidate drift.</h3>
+          <p class="designing-maintain-desc">Find patterns used three or more times with the same intent. Propose tokens and primitives. Migrate call sites in the same pass.</p>
+          <div class="designing-extract-viz" aria-hidden="true">
+            <div class="designing-extract-before">
+              <span class="designing-extract-btn">Subscribe</span>
+              <span class="designing-extract-btn">Submit</span>
+              <span class="designing-extract-btn">Join</span>
+              <span class="designing-extract-btn">Send</span>
+              <span class="designing-extract-btn">Go</span>
+              <span class="designing-extract-btn">OK</span>
+            </div>
+            <span class="designing-extract-arrow">→</span>
+            <span class="designing-extract-after">Button</span>
+          </div>
+        </div>
+
+        <div class="designing-maintain-col">
+          <span class="designing-maintain-label"><a href="/docs/document">/impeccable document</a></span>
+          <h3 class="designing-maintain-name">Re-capture the system.</h3>
+          <p class="designing-maintain-desc">Scans tokens, components, and rendered output. Writes a spec-compliant DESIGN.md that every other command reads.</p>
+          <div class="designing-designmd-preview" aria-hidden="true">
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">01</span><span>Overview</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">02</span><span>Colors</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">03</span><span>Typography</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">04</span><span>Elevation</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">05</span><span>Components</span></div>
+            <div class="designing-designmd-preview-line"><span class="designing-designmd-preview-num">06</span><span>Do's and Don'ts</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase designing-phase--appendix" aria-label="Brand vs product register">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">Before any of this</span>
+      <h2 class="designing-phase-title">Pick a register.</h2>
+      <p class="designing-phase-sub">Brand and product surfaces have different defaults. Impeccable tracks this in <code>PRODUCT.md</code> as a single field, so commands like <code>typeset</code>, <code>animate</code>, and <code>colorize</code> adapt their vocabulary to match.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-register">
+        <div class="designing-register-preview" aria-hidden="true">
+          <div class="designing-register-mini designing-register-mini--brand">
+            <span class="designing-register-mini-label">No. 04 &middot; Dispatch</span>
+            <span class="designing-register-mini-title">Letters, occasionally.</span>
+          </div>
+          <div class="designing-register-mini designing-register-mini--product">
+            <span class="designing-register-mini-label">Newsletter</span>
+            <span class="designing-register-mini-title">Subscribe to updates</span>
+          </div>
+        </div>
+        <div>
+          <p style="font-family:var(--font-body);font-size:0.9375rem;line-height:1.65;color:var(--color-charcoal);margin:0;max-width:52ch">The same element, rendered in brand register (editorial masthead) and product register (utility). Register is answered once during <code>teach</code> and applies to every downstream command.</p>
+          <a class="designing-register-link" href="/tutorials/brand-vs-product">Read the brand-vs-product tutorial &rarr;</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase designing-phase--appendix" aria-label="DESIGN.md interop">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">Interop</span>
+      <h2 class="designing-phase-title">Your system travels.</h2>
+      <p class="designing-phase-sub"><code>DESIGN.md</code> follows <a href="https://stitch.withgoogle.com/docs/design-md/format/" target="_blank" rel="noopener">the format Google Stitch publishes</a>. Not a lock-in. When you outgrow Impeccable or want a second opinion from another tool, the file comes with you.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <div class="designing-interop" aria-hidden="true">
+        <div class="designing-interop-side">
+          <span class="designing-interop-side-label">Writes it</span>
+          <span class="designing-interop-node">Impeccable</span>
+        </div>
+        <div class="designing-interop-node designing-interop-node--center">DESIGN.md</div>
+        <div class="designing-interop-side">
+          <span class="designing-interop-side-label">Reads it</span>
+          <div class="designing-interop-side-list">
+            <span class="designing-interop-node">Google Stitch</span>
+            <span class="designing-interop-node">Other tools</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="designing-phase designing-phase--appendix" aria-label="What to avoid">
+    <header class="designing-phase-head">
+      <span class="designing-phase-num">Common mistakes</span>
+      <h2 class="designing-phase-title">What to avoid.</h2>
+      <p class="designing-phase-sub">An anti-patterns list, for using the anti-patterns tool.</p>
+    </header>
+
+    <div class="designing-phase-body">
+      <ul class="designing-avoid">
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Running both Impeccable and Anthropic's frontend-design skill</span>
+            <p class="designing-avoid-desc">Anthropic still promotes their skill in Claude Code, but it's been unmaintained and is now behind on recommended patterns. Run both and they collide on vocabulary, cancelling each other out. Pick one.</p>
+          </div>
+        </li>
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Pinning every command</span>
+            <p class="designing-avoid-desc">Pinning brings back <code>/audit</code>, <code>/polish</code>, <code>/critique</code> as shortcuts. Pin everything and you've re-exploded the <code>/</code> menu the v3.0 consolidation cleaned up. Pin the two or three you reach for daily.</p>
+          </div>
+        </li>
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Skipping <code>teach</code></span>
+            <p class="designing-avoid-desc">Commands still run without PRODUCT.md and DESIGN.md. They default to generic SaaS patterns. The floor is meaningfully higher with context. Run teach once; every later command benefits.</p>
+          </div>
+        </li>
+        <li>
+          <span class="designing-avoid-x" aria-hidden="true">×</span>
+          <div>
+            <span class="designing-avoid-title">Treating it like a linter</span>
+            <p class="designing-avoid-desc">Impeccable is an opinionated design partner, not a validator. It has a point of view. Push back with a reason and it'll work with you. Ignore the opinion without a reason and output gets worse, not better.</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <nav class="designing-cta" aria-label="Where to go next">
+    <a class="designing-cta-card" href="/docs/teach">
+      <span class="designing-cta-card-kind">New project</span>
+      <h2 class="designing-cta-card-title">Start with <em>teach</em></h2>
+      <p class="designing-cta-card-desc">Five minutes of discovery, one PRODUCT.md, one DESIGN.md. Every command downstream gets sharper from here.</p>
+    </a>
+    <a class="designing-cta-card" href="/tutorials">
+      <span class="designing-cta-card-kind">Walk a scenario</span>
+      <h2 class="designing-cta-card-title">Open a <em>tutorial</em></h2>
+      <p class="designing-cta-card-desc">Four short walkthroughs of the highest-leverage flows: getting started, Live Mode, critique with the overlay, brand vs product.</p>
+    </a>
+  </nav>
+</div>`;
+}
+
 /**
  * Render a tutorial detail page main content.
  */
@@ -928,6 +1313,7 @@ export async function generateSubPages(rootDir) {
     tutorials: path.join(rootDir, 'public/tutorials'),
     visualMode: path.join(rootDir, 'public/visual-mode'),
     liveMode: path.join(rootDir, 'public/live-mode'),
+    designing: path.join(rootDir, 'public/designing'),
   };
 
   // Fresh output dirs each time so stale files don't linger.
@@ -1053,6 +1439,22 @@ export async function generateSubPages(rootDir) {
     generated.push(out);
   }
 
+  // Designing: orientation page about the core loop.
+  {
+    const html = renderPage({
+      title: 'Designing with Impeccable',
+      description:
+        'The core loop: start, iterate, polish, maintain. How to use Impeccable end-to-end, from a blank file to shipped feature to paid-down design debt.',
+      bodyHtml: renderDesigningMain(),
+      activeNav: 'designing',
+      canonicalPath: '/designing',
+      bodyClass: 'sub-page designing-page-body',
+    });
+    const out = path.join(outDirs.designing, 'index.html');
+    fs.writeFileSync(out, html, 'utf-8');
+    generated.push(out);
+  }
+
   // Tutorial detail pages.
   for (const tutorial of data.tutorials) {
     const sidebar = renderDocsSidebar(data.skillsByCategory, data.tutorials, { kind: 'tutorial', slug: tutorial.slug });
diff --git a/server/index.js b/server/index.js
index 0e0327167..a802204e7 100644
--- a/server/index.js
+++ b/server/index.js
@@ -56,6 +56,8 @@ const server = serve({
     },
     "/anti-patterns": () => serveGenerated(path.join(ROOT_DIR, "public/anti-patterns/index.html")),
     "/visual-mode": () => serveGenerated(path.join(ROOT_DIR, "public/visual-mode/index.html")),
+    "/live-mode": () => serveGenerated(path.join(ROOT_DIR, "public/live-mode/index.html")),
+    "/designing": () => serveGenerated(path.join(ROOT_DIR, "public/designing/index.html")),
     "/tutorials": () => serveGenerated(path.join(ROOT_DIR, "public/tutorials/index.html")),
     "/tutorials/:slug": (req) => {
       const slug = req.params.slug.replace(/[^a-z0-9-]/gi, "");