emdash/fair-teeth-fold-5h9sd

.okf/design/course-landing-components.md

@@ -0,0 +1,65 @@
+---
+type: Design System
+title: Course-landing component rules
+description: One loud element per viewport, max 3 dark zones, soft-card dialect - and the post-hero slot is for the argument, not a router menu.
+resource: docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/course-landing-components-2026-08.md
+tags: [css, design, course, landing]
+status: stable
+generated:
+  by: claude/opus-5
+  at: 2026-08-13T00:00:00Z
+verified:
+  - by: human:pftg
+    at: 2026-08-13T00:00:00Z
+---
+
+# Composition rules
+
+| Rule | Detail |
+|---|---|
+| One loud element per viewport | The ruby CTA. Everything else grayscale + obsidian islands. |
+| Dark appears exactly 3x | Hero card, mistake-grid CTA cell, endcap. Dark-as-island, never dark-as-theme. |
+| One dialect: soft card islands | `background:#f8f8fa` / `border:1px solid #e5e7eb` / `radius:12px` / `padding:20px 22px` - shared by `.mistake-list > li`, `.scope-card`, `.module-card`. |
+| Links inside components | Body-text `#1f2937`, ruby on hover only (`item16 T6`). Rows of default-blue links read as a wall. |
+| Type scale | 12 uppercase eyebrows -> 24 card titles -> 36-44 section H2s -> 48-72 hero. Nothing between. |
+
+CSS lives in `themes/beaver/assets/css/pages/course-list.css` (landing-only
+bundle). The `.course-landing .post-content` 3-track grid gives prose a 720px
+measure and lets component grids span the full 1080px middle track.
+
+# The post-hero slot is for the argument, not a router
+
+Ruled 2026-08-13 after a 3-row "Where to start" router table (`.start-router`,
+`<dl>`: *Ready to start* / *Prefer a map first* / *Already building*) shipped
+there and was rejected on sight. A four-critic panel (ICP-reader, CRO,
+visual-design, IA) plus a Codex refutation pass converged:
+
+* **The hero owns the start CTA.** Restating `Start Lesson 1.1` ~250px below the
+  hero button, *as one of three options*, converts an unconditional instruction
+  into a conditional one. It demotes, it does not reinforce.
+* **Labels that ask the reader to self-classify fail.** "Ready to start" - by
+  what standard? The reader cannot answer before the page has earned anything.
+* **Count the exits.** Three rows carried six links, offered *before* the "Why
+  this course exists" argument. Hick's Law; the mistake grid got pushed a fold
+  down on mobile.
+* **Hairline rows + a fixed label column = spec-sheet semantics.** The only
+  ruled table on a soft-card page reads as reference data, so it gets skipped.
+* **Equal weight for a minority branch is the tell.** At 390px the
+  already-building row rendered taller than the primary path.
+
+The surviving shape is one asymmetric callout, `.start-note`: bold lead-in +
+one link + a ruby left rule, ~79px desktop / 130px mobile, carrying only the
+route the hero does *not* cover (already building or paying a shop -> the
+Lesson 4.2 ownership audit). Wayfinding links (How This Course Works, FAQ)
+moved to the module-map intro, where the reader is actually choosing a route.
+
+**Generalization:** before adding a navigational component to a landing page,
+count how many times each destination is already reachable. On this page only
+2 of 6 router links were unique - the rest duplicated the hero, the
+mistake-grid CTA, or a module card.
+
+# Citations
+
+* [Component library + the shuffle2 reference](../../docs/projects/2605-tech-for-non-technical-founders/30-39-architecture-design/course-landing-components-2026-08.md)
+* [Visual scroll gate](../workflows/visual-scroll-gate.md)
+* [ICP profile](../content-strategy/icp-primary-website-target.md)

.okf/design/index.md

@@ -4,3 +4,4 @@
 * [House visual spec](house-visual-spec.md) - paper tones, semantic colors, hand-drawn identity
 * [Cover pipeline](cover-pipeline.md) - rebuilding course covers from the design spec
 * [Course typography](course-typography.md) - the course-scoped reading scale and the specificity trap
+* [Course-landing component rules](course-landing-components.md) - one loud element, 3 dark zones, and why the post-hero slot is not a router

.okf/log.md

@@ -1,5 +1,39 @@
 # Bundle Update Log
 
+## 2026-08-13 (visual gate) - a new component needs cold eyes, not the implementer's
+
+* **Update**: `docs/workflows/visual-scroll-gate.md` §Design-quality pass gains
+  item 7; `.okf/workflows/visual-scroll-gate.md` mirrors it.
+* **The finding**: the UI-gatekeeper rule was followed to the letter - screenshot
+  taken, read, judged "much better than before" - and the component was still
+  rejected on sight, later scoring 3/10 from a design critic. Two blind spots the
+  implementer cannot self-detect: the **wrong anchor** (better than the thing you
+  just replaced, when that was also bad) and **solving the symptom** (a
+  link-density complaint that was really "this element does not belong in this
+  slot" - a prettier wrong element still fails).
+* **The rule**: tweak to an existing pattern = self-review OK; a pattern NEW to
+  the page = one cold-eyes critic on the render before handback. Cheapest form:
+  render 2-3 variants, screenshot at 1280x800 + 390x844, let the owner pick from
+  images rather than prose - that took ~6 minutes and ended the debate.
+
+## 2026-08-13 (course landing) - the post-hero slot is not a router
+
+* **New concept**: `.okf/design/course-landing-components.md` - the landing's
+  composition rules (one loud element, 3 dark zones, soft-card dialect) plus a
+  ruling on the entry block.
+* **The finding**: a 3-row "Where to start" router table (`.start-router` `<dl>`)
+  shipped under the hero and was rejected on sight. Four independent critics
+  (ICP-reader, CRO, visual-design, IA) all recommended deleting it; a Codex
+  refutation pass then caught that "delete to prose" would ignore the stated
+  intent (a visual component) AND silently drop the page's only links to How
+  This Course Works and the FAQ. Only 2 of 6 router links were unique.
+* **The fix**: `.start-note` - one asymmetric callout carrying only the
+  already-building -> Lesson 4.2 fork (~79px desktop / 130px mobile, down from
+  ~200px). Wayfinding moved to the module-map intro. The first mistake card now
+  lands at y~643 instead of ~760 on desktop.
+* **Reusable rule**: before adding a navigational component to a landing page,
+  count how many times each destination is already reachable elsewhere on it.
+
 ## 2026-08-13 (first full SEO review) - the GA4 traffic number was never real
 
 * **Update**: `.okf/workflows/analytics-access.md` gains a "Reading the numbers"

.okf/workflows/visual-scroll-gate.md

@@ -48,6 +48,15 @@ banned-string text ratchet).
 - **Visual verification gate** for any new media element: score
   against look/functional/scroll-earning/helpfulness; any NO/MIXED on
   the latter two = rollback or redesign before commit.
+- **Cold-eyes pass on a NEW component** (2026-08-13): a tweak to an
+  existing pattern may be self-reviewed; a pattern that did not exist on
+  the page before needs one independent critic on the render before
+  handback. The implementer cannot see two failure modes in their own
+  work - the wrong anchor ("better than the thing I just replaced" when
+  that was also bad) and solving the symptom (a legibility complaint that
+  was really a purpose problem, where a prettier wrong element still
+  fails). Cheapest form: render 2-3 variants and let the owner pick from
+  screenshots. Worked example: [course-landing entry fork](../design/course-landing-components.md).
 
 # Citations
 

content/course/tech-for-non-technical-founders-2026/_index.md

@@ -41,9 +41,7 @@ hero_secondary_text: "3-minute Quickstart"
 
 The first checkpoint comes fast: two to three weeks in, at an evenings-and-weekends pace, you get a go/iterate/kill verdict on your **Founding Hypothesis** (the one-sentence version of your idea: who the customer is, what problem you solve, why they'd pick you) from real demand data instead of polite nods from friends.
 
-Two ways in: [Start Lesson 1.1 →](/course/tech-for-non-technical-founders-2026/form-your-founding-hypothesis-90-minute-sprint/) or [see the full syllabus ↓](#module-map). *Prefer a map first? [How This Course Works](/course/tech-for-non-technical-founders-2026/how-this-course-works/) (10 minutes) and the [FAQ](/course/tech-for-non-technical-founders-2026/faq/) cover the route and the most common blockers.*
-
-Already building, or paying someone to build for you? Start at the [ownership audit in Lesson 4.2](/course/tech-for-non-technical-founders-2026/github-aws-database-ownership-checklist/) - the [Already started building? side-path](/course/tech-for-non-technical-founders-2026/how-this-course-works/#already-started-building) explains the fork.
+<aside class="start-note"><strong>Already building, or paying someone to build for you?</strong> Start at the <a href="/course/tech-for-non-technical-founders-2026/github-aws-database-ownership-checklist/">ownership audit in Lesson 4.2 →</a> - check you actually own your accounts, code, and data first.</aside>
 
 ## Why this course exists
 
@@ -60,7 +58,7 @@ The five mistakes below sink more first products than bad code does - we have wa
 
 ## Module map
 
-Read the modules in order - each module's output is the next module's input, and each card's **"You leave with"** line names its output. The artifacts bundle into a single Google Drive folder - your **Founder OS** ([printable pack index](/course/tech-for-non-technical-founders-2026/founder-os-pack/)).
+Read the modules in order - each module's output is the next module's input, and each card's **"You leave with"** line names its output. The artifacts bundle into a single Google Drive folder - your **Founder OS** ([printable pack index](/course/tech-for-non-technical-founders-2026/founder-os-pack/)). New here? [How This Course Works](/course/tech-for-non-technical-founders-2026/how-this-course-works/) walks the whole route in 10 minutes, and the [FAQ](/course/tech-for-non-technical-founders-2026/faq/) covers the most common blockers.
 
 <div class="module-rail">
 

docs/workflows/visual-scroll-gate.md

@@ -79,6 +79,18 @@ goal is "premium", run a dedicated critic pass with these properties:
 6. Mermaid renders client-side: text validators never see it. Theme-level
    problems (edge weight, label chips, font-to-node ratio) repeat across
    every diagram - diagnose once at the theme, not per diagram.
+7. **NEW component: the implementer's own screenshot read is not the
+   gate** (2026-08-13 lesson). A *tweak* to an existing pattern you can
+   self-review; a pattern that did not exist on the page before needs ONE
+   cold-eyes critic on the render before handback. Two failure modes the
+   implementer cannot see in their own work: (a) the **wrong anchor** -
+   "better than before" is worthless when the before was also bad; anchor
+   on what good looks like, and on whether the component's PURPOSE fits
+   its slot, not on the thing you just replaced; (b) **solving the
+   symptom** - a legibility complaint can be a purpose problem wearing a
+   formatting costume, and a prettier version of the wrong element still
+   fails. Cheapest form: render 2-3 variants, screenshot each at 1280x800
+   and 390x844, and let the owner pick from images rather than from prose.
 
 ## Per-view checklist
 

themes/beaver/assets/css/pages/course-list.css

@@ -674,3 +674,33 @@
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(204, 52, 45, 0.23);
 }
+
+/* Entry fork - the one route the hero does not already cover: readers who
+   are mid-build or paying a shop. Bold lead-in + one link, so the hero
+   keeps the only "start" CTA and a minority branch stays subordinate.
+   Wayfinding (How This Course Works, FAQ) lives with the module map, where
+   the reader is actually choosing a route. */
+.blog .start-note {
+  max-width: 720px;
+  margin: 26px 0 8px;
+  padding: 14px 20px;
+  border-left: 4px solid var(--color-ruby);
+  border-radius: 0 12px 12px 0;
+  background: #f8f8fa;
+  font-size: 16px;
+  line-height: 1.6;
+}
+.blog .start-note strong {
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  color: #0d1117;
+}
+.blog .start-note a {
+  color: #1f2937 !important;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: #d1d5db;
+}
+.blog .start-note a:hover {
+  color: var(--color-ruby) !important;
+  text-decoration-color: currentColor;
+}