diff --git a/.okf/design/site-palette.md b/.okf/design/site-palette.md index 3749bf556..7dae842a5 100644 --- a/.okf/design/site-palette.md +++ b/.okf/design/site-palette.md @@ -7,7 +7,7 @@ tags: [design, palette, css, tokens, adr] generated: by: claude/opus-5 at: 2026-08-20T00:00:00Z -timestamp: 2026-08-21T02:05:49Z +timestamp: 2026-08-21T02:51:33Z --- # Resolved: LIGHT (ADR-0003, 2026-08-20) @@ -83,6 +83,40 @@ AA (`#0066d6` is 4.78:1). Phase 1a.3 retires that rule for its late-cascade specificity, NOT for its colour choice — any replacement must land at AA or better. `--ink-900` on white clears it comfortably. +# Ruby fails AA on the dark surfaces — unresolved, and it gates two phases + +Measured 2026-08-21 in the rendered production build: + +| Token | on `#000` | on `--surface-ink` `#14110f` | +|---|---|---| +| `--color-ruby` `#cc342d` | 4.10 **FAIL** | 3.67 **FAIL** | +| `--color-ruby-hover` `#e04a42` | 5.23 pass | 4.68 pass (thin) | +| `--ruby-700` `#9e2620` | 2.75 **FAIL** | 2.46 **FAIL** | + +Two consequences, and the second is the one that is easy to miss: + +1. **A single site-wide eyebrow style is not possible as specified.** The + canonical eyebrow (`--color-ruby`, 12px) was designed against LIGHT + surfaces. Applied site-wide it drops `home-services-eyebrow` and + `home-clients-eyebrow` to 4.10:1 - below AA for normal text, which 12px + unambiguously is. A full 41-rule sweep was written, measured and reverted + on 2026-08-21 for exactly this. +2. **Migrating the dark bands to `--surface-ink` makes it WORSE**, because + `#14110f` is lighter than `#000`: ruby-on-dark falls 4.10 -> 3.67. So the + footer/dark-surface migration cannot ship before the on-dark accent is + decided, or it degrades contrast on every band it touches. + +Only `--color-ruby-hover` clears AA on both grounds, and it is named for a +hover state - semantically wrong as a static accent. The ramp has `--ruby-700` +for "text-on-light where AA needs more" and **no counterpart for dark**. +Naming one is a design decision; tracked in +`docs/projects/2608-site-design-system/README.md` under Outstanding. + +**Until it is named: do not apply a ruby text token to any surface in the +section below.** Neither of the two automated gates catches this - those +homepage sections carry no contrast test, and the screenshot suite passes a +colour change of this size. + # Where dark is still deliberate Light is the default, not a monopoly. Three surfaces keep dark **by design** — diff --git a/.okf/log.md b/.okf/log.md index b33dc88a4..ba6babc44 100644 --- a/.okf/log.md +++ b/.okf/log.md @@ -28,6 +28,34 @@ make it green: restructure same-day entries under one heading, and add `timestamp` to the 23 concepts missing it (anchored to each file's last commit time, which is verifiable - never invented). +## 2026-08-21 - ruby fails AA on dark surfaces, and it gates two phases + +Measured, not estimated: `--color-ruby` is **4.10:1 on #000 and 3.67:1 on +`--surface-ink`** - below AA for normal text both times. `--ruby-700` is worse +(2.75 / 2.46). Only `--color-ruby-hover` clears AA on both, and it is named for +a hover state. + +Synced into [design/site-palette.md](design/site-palette.md) rather than left in +the project README, because the README is not on the path a session reads. The +concept now carries the table and a standing instruction: **until an on-dark +ruby is named, do not apply a ruby text token to any of the three deliberate +dark surfaces.** + +Two phases are blocked by the same unnamed token, which nothing in the plan +connected: + +* "ONE eyebrow style" cannot be one style - the canonical form was designed + against LIGHT surfaces, and applying it site-wide drops two homepage eyebrows + to 4.10:1. A full 41-rule sweep was written, measured and REVERTED for this. +* Migrating the dark bands to `--surface-ink` makes contrast WORSE, not better + (`#14110f` is lighter than `#000`), so the footer work cannot ship first + either. + +Neither automated gate catches it: those homepage sections have no contrast +test, and the screenshot suite passes a colour change of this magnitude. The +only reason it surfaced is that the eyebrow sweep was contrast-measured before +being accepted. + ## 2026-08-21 - the --rr-* aliases are gone; 1a.4's other half is blocked **Done:** all 18 `--rr-*` consumer references migrated to canonical names and diff --git a/Rakefile b/Rakefile index 8a3aaee07..e7363b3ee 100644 --- a/Rakefile +++ b/Rakefile @@ -28,7 +28,7 @@ namespace :test do CRITICAL_TESTS = "/homepage|blog_index|blog_post$|visit_blog_post|course_|old_blog_url|" \ "test_services($|_menu)|contact_us|free_consultation|not_found|" \ - "hamburger|color_system|mermaid|codeblock_language/" + "hamburger|color_system|mermaid|codeblock_language|friday_report/" Rake::TestTask.new(:critical) do |t| t.libs << "test" diff --git a/docs/projects/2608-site-design-system/README.md b/docs/projects/2608-site-design-system/README.md index 363c41022..cf8345a45 100644 --- a/docs/projects/2608-site-design-system/README.md +++ b/docs/projects/2608-site-design-system/README.md @@ -116,6 +116,36 @@ themes sit as sub-sections beneath ONE `## YYYY-MM-DD` heading. That is a whole-file restructure, not a find-and-replace, and it conflicts with every parallel session appending to that file — do it when the repo is quiet. +**Decide the ruby-on-dark token — it blocks BOTH remaining 1a.4 items.** +Measured 2026-08-21 in the rendered production build: + +| Token | on `#000` | on `--surface-ink` `#14110f` | +|---|---|---| +| `--color-ruby` `#cc342d` | 4.10 FAIL | **3.67 FAIL** | +| `--color-ruby-hover` `#e04a42` | 5.23 pass | 4.68 pass (thin) | +| `--ruby-700` `#9e2620` | 2.75 FAIL | 2.46 FAIL | + +Two consequences, and the second is the one that is easy to miss: + +1. **"ONE eyebrow style" is self-contradictory as written.** The canonical + eyebrow (`--color-ruby`, 12px) was designed against the blog's LIGHT + surfaces. Applying it site-wide drops `home-services-eyebrow` and + `home-clients-eyebrow` to 4.10:1 on their dark band - below AA for normal + text, which 12px is. The style needs a dark-surface variant. +2. **Migrating the dark bands to `--surface-ink` makes this WORSE, not + better.** `#14110f` is lighter than `#000`, so ruby-on-dark falls from + 4.10 to 3.67. The footer/dark-surface work therefore cannot ship before + the on-dark accent is decided, or it degrades contrast on every band it + touches. + +Only `--color-ruby-hover` clears AA on both grounds, and it is named for a +hover state - using it as a static on-dark accent is semantically wrong. The +ramp has `--ruby-700` for "text-on-light where AA needs more" and no +counterpart for dark. **The decision is whether to name one** (e.g. +`--ruby-on-ink`, seeded at `#e04a42` or lighter for more margin), which is a +design call rather than a sweep. `technologies.css:10` already gestures at +the problem in a comment. + ## Working notes Coordinator/session reports do not belong in this directory — write them to diff --git a/test/fixtures/screenshots/macos/desktop/friday_report.png b/test/fixtures/screenshots/macos/desktop/friday_report.png new file mode 100644 index 000000000..a6e36882c Binary files /dev/null and b/test/fixtures/screenshots/macos/desktop/friday_report.png differ diff --git a/test/fixtures/screenshots/macos/desktop/services/_overview.png b/test/fixtures/screenshots/macos/desktop/services/_overview.png index 1697dbb9b..d594ac1d0 100644 Binary files a/test/fixtures/screenshots/macos/desktop/services/_overview.png and b/test/fixtures/screenshots/macos/desktop/services/_overview.png differ diff --git a/test/fixtures/screenshots/macos/desktop/services/_services.png b/test/fixtures/screenshots/macos/desktop/services/_services.png index 81874f03e..a992cad7a 100644 Binary files a/test/fixtures/screenshots/macos/desktop/services/_services.png and b/test/fixtures/screenshots/macos/desktop/services/_services.png differ diff --git a/test/fixtures/screenshots/macos/mobile/friday_report.png b/test/fixtures/screenshots/macos/mobile/friday_report.png new file mode 100644 index 000000000..3d8120741 Binary files /dev/null and b/test/fixtures/screenshots/macos/mobile/friday_report.png differ diff --git a/test/fixtures/screenshots/macos/mobile/services.png b/test/fixtures/screenshots/macos/mobile/services.png index 67ab0de81..4b72deb83 100644 Binary files a/test/fixtures/screenshots/macos/mobile/services.png and b/test/fixtures/screenshots/macos/mobile/services.png differ diff --git a/test/system/desktop_site_test.rb b/test/system/desktop_site_test.rb index 4216154db..ed4732235 100644 --- a/test/system/desktop_site_test.rb +++ b/test/system/desktop_site_test.rb @@ -312,8 +312,11 @@ def test_friday_report # promised a report, this one has to promise the next step. assert_link "Get a free code audit", minimum: 2 - # No screenshot baseline yet: the 2608 site-wide recolour is mid-flight and - # would churn it immediately. Record with the bundle's first visual PR. + # Baseline recorded 2026-08-21: this is the bundle's first visual PR + # (2608 1a.4 moved .friday-eyebrow onto the canonical eyebrow style), which + # is the trigger the deferral named. It will churn again when the dark-surface + # recolour lands - that is what a baseline is for. + assert_stable_screenshot "friday_report" end def test_free_consultation diff --git a/test/system/mobile_site_test.rb b/test/system/mobile_site_test.rb index ac859fe6a..e89ff0dd2 100644 --- a/test/system/mobile_site_test.rb +++ b/test/system/mobile_site_test.rb @@ -189,7 +189,8 @@ def test_friday_report assert_text "This is a composite example, not a real client's report" assert_link "Get a free code audit", minimum: 2 - # No screenshot baseline yet - see the desktop test for why. + # Baseline recorded 2026-08-21 - see the desktop test. + assert_stable_screenshot "friday_report" end def test_free_consultation diff --git a/themes/beaver/assets/css/components/content-block.css b/themes/beaver/assets/css/components/content-block.css index fc29d72d9..789ac54b3 100644 --- a/themes/beaver/assets/css/components/content-block.css +++ b/themes/beaver/assets/css/components/content-block.css @@ -113,8 +113,12 @@ * Common in eyebrow text, labels, and highlights */ .c-content-block--eyebrow { + /* 2608 1a.4: one eyebrow style - matches pages/blog-list.css .blog-eyebrow */ color: var(--color-ruby); - font-weight: 600; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; } /* diff --git a/themes/beaver/assets/css/critical/services-critical.css b/themes/beaver/assets/css/critical/services-critical.css index a3985479d..b1c117165 100644 --- a/themes/beaver/assets/css/critical/services-critical.css +++ b/themes/beaver/assets/css/critical/services-critical.css @@ -177,7 +177,12 @@ } .fl-builder-content .services-eyebrow .fl-rich-text, .fl-builder-content .services-eyebrow .fl-rich-text *:not(b, strong) { - font-weight: 600; + /* 2608 1a.4: one eyebrow style - matches the blog's canonical eyebrow + (pages/blog-list.css .blog-eyebrow), which shipped in Phase 2. */ + font-size: 12px; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; text-align: center; } diff --git a/themes/beaver/assets/css/pages/friday-report.css b/themes/beaver/assets/css/pages/friday-report.css index 517c90138..9dd36ce9b 100644 --- a/themes/beaver/assets/css/pages/friday-report.css +++ b/themes/beaver/assets/css/pages/friday-report.css @@ -43,11 +43,13 @@ } .friday-eyebrow { - font-weight: 600; - font-size: 13px; - letter-spacing: 0.18em; + /* 2608 1a.4: one eyebrow style - matches pages/blog-list.css .blog-eyebrow. + Was 13px/600/0.18em on --ruby-700; margin is page rhythm and stays. */ + font-size: 12px; + font-weight: 700; + letter-spacing: 0.14em; text-transform: uppercase; - color: var(--ruby-700); + color: var(--color-ruby); margin: 0 0 16px; }