diff --git a/.okf/design/course-landing-components.md b/.okf/design/course-landing-components.md new file mode 100644 index 000000000..4d8f4e5d3 --- /dev/null +++ b/.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`, +`
`: *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) diff --git a/.okf/design/index.md b/.okf/design/index.md index bac55cdfa..358ead348 100644 --- a/.okf/design/index.md +++ b/.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 diff --git a/.okf/log.md b/.okf/log.md index dabd34705..3fd2858ea 100644 --- a/.okf/log.md +++ b/.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` `
`) + 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" diff --git a/.okf/workflows/visual-scroll-gate.md b/.okf/workflows/visual-scroll-gate.md index 7335d7e3d..951a0d24f 100644 --- a/.okf/workflows/visual-scroll-gate.md +++ b/.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 diff --git a/content/course/tech-for-non-technical-founders-2026/_index.md b/content/course/tech-for-non-technical-founders-2026/_index.md index b25cb3a1a..7c91e62f3 100644 --- a/content/course/tech-for-non-technical-founders-2026/_index.md +++ b/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. + ## 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.
diff --git a/docs/workflows/visual-scroll-gate.md b/docs/workflows/visual-scroll-gate.md index de12528e3..e61958882 100644 --- a/docs/workflows/visual-scroll-gate.md +++ b/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 diff --git a/themes/beaver/assets/css/pages/course-list.css b/themes/beaver/assets/css/pages/course-list.css index ce6495af5..957fa924c 100644 --- a/themes/beaver/assets/css/pages/course-list.css +++ b/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; +}