W3: Visual System V3-A - Module 1 exhibits redrawn flat-vector (O2) - #433
Merged
Conversation
…rubric Append a v3 exhibit spec section to .okf/design/house-visual-spec.md per ADR 30.09 Phase A. Covers all 6 demanded components (12-col grid @ 720 viewBox, 8px spacing scale, connector spec, data-viz rules, aspect-ratio, 5-rung type scale) with the >=9px @390px floor as a formula (basis 17px @ W=720 -> 9.21px; O1 x1.15 for Caveat x-height). Adds exhibit grammar and an O1-vs-O2 scoring rubric so the T2 A/B pair scores both on the same axes. Hand-drawn spec untouched (O1 still needs it). OKF log entry appended. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Read-only audit of the 5 M1 SVGs against the v3 exhibit spec (.okf/design/house-visual-spec.md), ahead of T5 style conversion. Per-SVG element classification (CONVERT / KEEP-AS-IS / REVIEW), consolidated keep list, and off-spec-today findings (legibility floor, non-canonical viewBox, threshold-line style, stroke inconsistency) that apply regardless of the O1/O2 outcome. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace the landscape module-pipeline.svg (1100x340, ~5.5px text on a phone) with a portrait program-map rendered to the v3 exhibit spec: W=720 viewBox, 5-module spine, action title / one message / basis line, green reserved for the paid-pilot money endpoint, all text >=17px so the basis rung clears the >=9px @390px floor (9.20px). Rewrites the page's one image reference + alt text to describe the idea -> paid pilot journey. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Renders the 1.4 cold-traffic signal meter BOTH ways against the v3 exhibit spec (grid W=720, 8-scale spacing, fill=data/stroke=structure, 5-rung type scale, exhibit grammar). Style gate for ADR 30.09 Phase A - Paul's eye-test picks O1 (hand-drawn-normalized, Caveat/paper, basis 20px) vs O2 (flat-vector, Space Grotesk+system-ui, 4px radius, basis 17px). Same message both variants. Gates (both PASS): grammar checklist, ruby-for-signal on the 6% go line, fill/stroke rule, and the >=9px @390px floor MEASURED in real webfonts - O1 basis 10.83px, O2 basis 9.21px. Comparison doc scores both neutrally and flags the gauge tone-scale vs single-ruby/green-money spec tension (applied identically to both, so it does not bias the A/B). Lesson SVG untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…s O1/O2/mix decision Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Redraw hypothesis-mad-libs.svg to the O2 premium-editorial flat-vector style (v3 exhibit spec + 40.30 exemplar): 720 viewBox, Space Grotesk title/label + system-ui basis, white card on cream, 4px radius, >=9px @390 floor (basis 17px -> 9.21px). Five blanks become outlined placeholder chips (neutral per 40.31 REVIEW: red/purple grouping dropped); the customer blank filled vague->specific in ruby is the one actionable reading and fulfils the alt's promised filled example. Labels stay inside shapes; dashes stay '-'. Alt text rewritten to the new message. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Redraw page-anatomy.svg to O2 flat-vector (v3 spec + exemplar grammar): 720 viewBox, one action title / one message / one basis line. Four stacked copy blocks are neutral stroked structure with labels inside; the CTA is the ruby DATA/action mark (40.31 KEEP-AS-IS: ruby = the one click-target). Fixes the off-spec .note 8.29px floor failure - smallest text now 17px (9.21px @390). Alt text rewritten to the new message. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Redraw tracking-snippets.svg to O2 flat-vector (v3 spec + exemplar): 720x405 flow diagram, orthogonal collector rail (2px ink, filled 9x7 triangle) from three neutral tool boxes into the page head tag. Event tokens (page_view / cta_click / form_submit) KEEP monospace per 40.31; the three categorical tool colors flattened to neutral (40.31 REVIEW); wireframe CTA stays ruby (action). Fixes the sub-9px floor failures - smallest text now 17px mono (9.21px @390). Alt text rewritten. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace smoke-test-signal.svg with the finalized 40.30 O2 exemplar (this was the worst floor-failer: 7 of 8 text classes sub-9px, and the spec's own cited archetype). 720x300 signal meter: filled bands (data), stroked axis + ticks (structure), ruby 6% go-line as the one actionable reading, dashed-free labeled ticks. Basis line corrected to the lesson's own definition 'form submits / page views' (not the exemplar's 'ad-campaign visits'). Floor: basis 17px -> 9.21px @390. Alt rewritten. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Redraw stripe-payment-link.svg to O2 flat-vector (v3 spec + exemplar): 720x300 comparison, two neutral stroked cards, both waitlist buttons ruby (40.31 KEEP-AS-IS: same button = same action). Amber risk card and purple callout flattened to neutral (40.31 REVIEW); stays uncoloured (not the money signal). One action title / message / basis; dropped the redundant bottom callout for grammar. Fixes the 6-of-7 sub-9px floor failures - smallest text now 17px (9.21px @390). Alt rewritten. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (10)
📒 Files selected for processing (11)
📝 WalkthroughWalkthroughThe PR adds the v3 exhibit specification, records O1/O2 exemplar evaluation and the O2 style decision, and updates course illustration references and alt text. ChangesVisual system v3
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
pftg
added a commit
that referenced
this pull request
Aug 1, 2026
…ng coverage gap, O8 for W4 slot Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
W3: Visual System V3-A — Module 1 exhibits redrawn flat-vector (O2)
Executes ADR 30.09's Visual System v3 pilot on Module 1. Content-scoped (SVGs + one
.okfspec doc + review artifacts) — no shared CSS, no templates, campaign-safe. Groomed → T1 spec → parallel A/B + program-map + audit → Paul's O2 style call → T5 redesigns.The style decision (recorded in ADR 30.09)
A fair A/B exemplar was produced first — lesson 1.4's signal exhibit rendered both ways, same message, only style differs (
40.30-exemplar-1.4-O1.svgvs-O2.svg, side-by-side40.30-exemplar-ab-sidebyside.png). Both passed the ≥9px@390px legibility floor (O1 10.83px, O2 9.21px, measured in-browser). Paul chose O2 (flat-vector) — it answers the original "old-time / lacks infographic quality" note and scales consistently across all 81 SVGs.What shipped
T1 — v3 exhibit spec (
.okf/design/house-visual-spec.md, appended; hand-drawn spec kept for reference): the 6 ADR components (grid W=720, 8-spacing scale, connector spec, data-viz FILL=data/STROKE=structure, aspect-ratios, 5-rung type scale) + the exhibit grammar + a measured ≥9px@390px floor formula + the O1/O2 rubric.T5 — 5 Module-1 SVGs redrawn to O2 (1.1 mad-libs, 1.2 page-anatomy, 1.3 tracking-snippets, 1.4 signal, 1.5 stripe-link): one consistent template — Space Grotesk title, white card on #faf7f2, 4px radius, filled=data/stroked=structure, ruby=the one action. Fixes the 4-of-5 mobile-floor failures Sprint-Y found (the signal SVG went from 5.7px to 9.21px smallest text). Alt text rewritten per exhibit = full-gated body edits. Keep-as-is list honored (mono event tokens in 1.3; ruby/green/amber kept to their meanings; Sweller labels-inside-shapes).
T3 — program map v1 (
how-this-course-works/program-map.svg): the 5-module idea→paid-pilot journey as a clean vertical spine; replaced the old landscape diagram (which had ~5.5px phone text) and removed the orphan duplicate. Judged independently of the style call.Sprint-Y audit (
40.31): the classify-first keep-as-is list + the off-spec-today findings that drove T5.Verification
img/picture, so these<img>-embedded SVGs are NOT captured by the pixel suite — verification is rendered-review + source-consistency, documented here (same masking on Linux, so dtest won't move course baselines).bin/hugo-build8/8 every commit; all SVGs render in_dest;/okf:validateconformant. Honestbin/dtestfrom main: clean - only the 7 known mobile-codeblock emulation diffs (green on CI-native amd64), zero course/M1 regression (confirms the img-masking; no course baseline moved, so no CI baseline record needed).Next (deferred, on the board): the remaining ~76 SVGs (M2–M5) roll to O2 in a later wave; per ADR the wider rollout follows this M1 pilot.
🤖 Generated with Claude Code
Summary by CodeRabbit
Accessibility
Documentation