# Landing page rebuild — "The Standard" (Blueprint spec-sheet)

Date: 2026-06-07
Branch: `feat/landing-page-blueprint-rebuild`
Skills: brainstorming (gate), design-taste-frontend, impeccable (register: brand)

## Goal

Rebuild `docs/landing/index.html` (the GitHub Pages homepage for the `continuous-improvement`
plugin) to a high design bar, fixing the banned patterns in the current page and correcting
stale 7-Laws copy against the canonical source.

One observable outcome: a visitor lands on a page that reads like an adoptable engineering
standard, with accurate law names, zero AI-slop tells, and a working install copy button.

## Why the current page fails

The shipped page violates both invoked design skills:

- Purple `#a78bfa` accent: the "AI Lila" ban (impeccable absolute ban + design-taste Rule 2).
- Emojis throughout (logo, badges, copy button, every feature): hard anti-emoji ban in both.
- Centered hero: design-taste anti-center bias at variance > 4.
- 3-equal-card feature grid: explicitly banned in both.
- Stale 7-Laws copy: law names/numbering disagree with `commands/discipline.md`.

## Decisions (confirmed with user)

1. Target: rebuild `docs/landing/index.html` (same product, far higher bar).
2. Tech: static single self-contained HTML file. No framework, no build step, no new deps.
3. Direction: Blueprint / spec-sheet. Light warm-paper, ink, one signal accent, editorial, asymmetric.

## Canonical content (source: `commands/discipline.md`)

| # | Law | Check | Red flag |
|---|-----|-------|----------|
| 1 | Research Before Executing | Did I search for existing solutions? | "I'll just quickly..." |
| 2 | Plan Is Sacred | Did I state WILL / WILL NOT / VERIFY? | "Let me also add..." |
| 3 | One Thing at a Time | Am I finishing before starting? | "While I'm here..." |
| 4 | Verify Before Reporting | Did I check the ACTUAL output? | "This should work..." |
| 5 | Reflect After Sessions | Did I note what worked/failed? | "I'll remember..." |
| 6 | Iterate One Change | Am I changing one thing at a time? | "And also..." |
| 7 | Learn From Every Session | Did I capture this as an instinct? | "Next time I'll..." |

The Loop: Research -> Plan -> Execute -> Verify -> Reflect -> Learn -> Iterate.

Enforcement mechanisms (real, accurate to the repo):

- Gateguard: PreToolUse hook, blocks Edit/Write/Bash until a fact-list investigation is shown.
- Verification Loop: per-project ladder (typecheck/test/build) before "done".
- Goal-Drift Stop gate: Stop hook, fires goal-check, refuses "Done" on DRIFT.
- Mulahazah instinct engine: instinct packs capture lessons so the same mistake never repeats.

Real numbers only: 26 bundled skills, 7 Laws, zero runtime deps, MIT, v3.13.0.

## Design system

- Color (OKLCH, Restrained, one accent <= 10%): paper `oklch(0.985 0.006 85)`,
  ink `oklch(0.20 0.012 55)`, muted `oklch(0.52 0.012 60)`, line `oklch(0.90 0.006 80)`,
  signal vermilion `oklch(0.60 0.19 33)`. Never `#000`/`#fff`.
- Type: Space Grotesk (display/body) + JetBrains Mono (numbers, labels, install, doc-no). No Inter.
- Layout: asymmetric, CSS Grid. No centered hero, no card grids.

## Section build order

1. Header: slim, solid paper, 1px bottom rule, SVG buckle mark, nav + Install.
2. Hero: asymmetric split (~58/42). Left kicker/headline/subhead/install callout; right 7-law index.
3. The 7 Laws: hairline-divided spec clauses (border-t, not cards): number, name, Check, Red-Flag.
4. The Loop: full-width horizontal band of mono nodes joined by rules.
5. Enforcement: 2-column zig-zag (not a 3-card grid), mechanism-id + accurate one-liner each.
6. CTA: "Adopt the standard", install command, npm + Quickstart, CSS crop-mark motif.
7. Footer: `DOC. CI-7L · REV 3.13.0 · MIT` + GitHub/npm.

## Motion (CSS only, gated on prefers-reduced-motion)

IntersectionObserver scroll-reveal (opacity + translateY, ease-out-quint, staggered by --index).
Hero headline one-time vermilion underline draw. Tactile :active on buttons. No bounce, no
layout-property animation, no JS animation libraries.

## Interactive states

Install copy button: idle -> "copied" -> revert (2s), aria-live. Focus-visible rings on all
interactive elements. Hover/active on rows and buttons.

## Accessibility

Semantic landmarks, h1 -> h3 order, contrast-checked vermilion, reduced-motion path,
keyboard-focusable copy/nav, SVG favicon (replaces emoji data-URI), updated title/OG/twitter meta.

## Deliverable

Single self-contained `docs/landing/index.html`. Fonts via Google Fonts link + preconnect.
Vanilla JS for clipboard + IntersectionObserver only.

## Verification

1. `npm run typecheck` (asset-only floor per CLAUDE.md).
2. Playwright: load `file://` URL, desktop (1440) + mobile (390) screenshots, console clean.
3. Multi-lens review: design-taste pre-flight, impeccable absolute-bans + AI-slop test,
   accessibility, performance, content-truth. Fix findings, re-verify.

## Process note

Gateguard (this repo's own PreToolUse hook) blocked Write because the harness Write schema rejects
the `_gateguard_facts_presented` flag param. Facts were presented in-session; files created via the
hook's allowed Bash route. Superpowers ceremony scaled to a single static asset per
instruction-priority. No commit/PR until the user asks.

## Addendum 2026-06-07 — custom domain continuous-improvement.dev

GitHub Pages here is a **workflow** deploy (`.github/workflows/pages.yml`) that uploads `docs/landing/`
as the site root. So the custom-domain file lives at `docs/landing/CNAME` (it lands at the deployed
root). Changes in this shipment:

- `docs/landing/CNAME` = `continuous-improvement.dev` (apex).
- `docs/landing/index.html`: `og:url` -> `https://continuous-improvement.dev/` + a `rel=canonical`.
- `package.json` `homepage` -> `https://continuous-improvement.dev`.
- `README.md` landing link + `CHANGELOG.md` Unreleased entry point at the new domain.

### Operator action required BEFORE merge (Cloudflare DNS)

Merging the CNAME makes the Pages deploy set the custom domain, after which GitHub redirects the
`github.io` URL to `continuous-improvement.dev`. If DNS is not pointed yet, the live site is
unreachable until it resolves. Configure DNS first:

- Apex `continuous-improvement.dev` -> GitHub Pages. Either four A records
  (185.199.108.153 / 109.153 / 110.153 / 111.153) and the matching AAAA records, or a Cloudflare
  CNAME-flattened `@` -> `naimkatiman.github.io`.
- Keep the records **DNS-only (grey cloud)** until GitHub provisions the Let's Encrypt cert
  (Cloudflare's proxy intercepts the ACME challenge otherwise). Once Pages shows the cert and
  "Enforce HTTPS", the proxy can be re-enabled with SSL mode Full (strict).
- After DNS resolves and the PR merges, confirm the domain in repo Settings -> Pages and enable
  Enforce HTTPS.
