fix(ui): typography polish — 27px hero, Mono-Only-Uppercase, mono-weight no-ops, verbatim table heads (0.8.4)

[helebest]

Fourth /impeccable critique → polish round (after 0.8.1/0.8.2/0.8.3), scoped to fonts & font sizes across all routes. The two isolated assessments (source design review + detector/browser computed-style sweep) found the type system is genuinely strong (serif honesty, closed 6-role px ladder, 11px floor) — the remaining drift is peripheral edge-discipline on auth/hover/MB/state-gated surfaces the passive invariant sweeps never render. Score 32/40.

Fixed (all src/styles.css / src/mb/mb.css)

• Hero metric 30px → documented 27px. A token-migration override silently pinned .metric-card__value to 30px over the 27px base rule; DESIGN.md §3 documents the hero-number as 27px twice. Dropped the override.
• Mono-Only-Uppercase. .wiki-info-grid dt (siblings already mono), .wiki-preview__header, and MB-Web .mb-lab (the twin of the mono .bi-colhead span) moved from sans-uppercase "eyebrows" to the mono label voice at 0.04em.
• font-weight: 600 no-ops → 500. IBM Plex Mono ships only 400/500, so 600 rendered as 500 anyway: .bi-colhead span, .import-step__marker, .trace-invocation__dur now declare 500 (zero visual change, honest CSS).
• Verbatim user table headers. .markdown-table-wrap th no longer force-uppercases the author's header row (content-fidelity breach — pH/mRNA was mangled — and a sans-eyebrow tell). Distinct by weight + surface, not case. DESIGN.md §3 now distinguishes "table heads" (workbench data-table labels, mono) from user markdown headers (verbatim).
• .wisdom-dialog__header h2 tokenized to the title role (was untokenized 17px inheriting UA bold 700; now sans 600, parity with .wisdom-card h2).
• .markdown-chart__caption 0.85em → body-sm token (on the role ladder).

Tests

New typography.spec.ts guards — "type-system rules hold on sweep-unreachable surfaces (workbench)" + "MB-Web column labels use the mono uppercase voice" — inject the minimal DOM for each gated selector so the stylesheet's own rule is asserted directly (auth/data-independent). Genuine RED→GREEN on every fix.

Verification

• npm run verify green — lint + format:check + typecheck + coverage + build + e2e (57 passed, no flake).
• Live browser computed-style sweep (light + dark) confirms all 10 fixes render identically per theme; document.fonts confirms IBM Plex Mono 400/500 load (no fallback) and no 600 face exists.
• Independent code review: ship, no actionable findings (verified the 27px base intact, no reintroduced uppercase, mono token in scope for MB, .wiki-preview__header wraps an i18n chrome label not user content).

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Improved typography consistency across charts, tables, labels, dialogs, and metric displays.
  • Markdown table headers now preserve their original casing, and several UI labels now use the correct mono styling and weight.
  • Fixed size/weight alignment in hero metrics, preview headers, captions, and trace/import labels.

• Documentation

  • Updated the changelog and design guidance to reflect the latest typography rules.

• Tests

  • Added end-to-end coverage for key typography behaviors to prevent regressions.

[coderabbitai]

Warning

Review limit reached

@helebest, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 54 minutes and 8 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c765cfe1-474b-48f5-93d9-700f21e15f29

📥 Commits

Reviewing files that changed from the base of the PR and between 78074ec and b20d62c.

📒 Files selected for processing (6)

• CHANGELOG.md
• DESIGN.md
• package.json
• src/mb/mb.css
• src/styles.css
• tests/e2e/typography.spec.ts

📝 Walkthrough

Walkthrough

Version 0.8.4 corrects typography token overrides across multiple UI surfaces: normalizes mono label weights from 600 to 500, switches .mb-lab to the mono font, removes forced uppercase from Markdown table headers, retokenizes wiki-info-grid, wiki-preview, wisdom dialog, and chart captions to shared token variables, and removes a hardcoded 30px hero metric size. Two new E2E tests guard these invariants.

Changes

Typography Token Normalization v0.8.4

Layer / File(s)	Summary
Type role design rules DESIGN.md	Documents the distinction between workbench table head styling (mono label, uppercase) and user-authored Markdown table headers (verbatim), and records mono label weight as 500.
CSS token and weight corrections src/mb/mb.css, src/styles.css	Switches .mb-lab to mono font; normalizes .bi-colhead span, .import-step__marker, and .trace-invocation__dur weights to 500; removes forced uppercase from markdown-table-wrap th; narrows .wiki-info-grid dt local rule to muted color only (moved to shared eyebrow role list); retokenizes .wiki-preview__header, .wisdom-dialog__header h2, and .markdown-chart__caption to shared type tokens; removes explicit 30px override from .metric-card__value.
E2E guards for sweep-unreachable surfaces tests/e2e/typography.spec.ts	Two new Playwright tests inject fixture DOM on /#overview and /#MB-Web, read computed font-family, font-weight, text-transform, and font-size, and assert token-driven values for hero metrics, mono uppercase labels, verbatim Markdown table headers, chart captions, and .mb-lab tracking.
Version bump and changelog package.json, CHANGELOG.md	Version bumped to 0.8.4; changelog documents all fixed typography behaviors and new e2e guard additions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• OpenDIKW/dikw-web#134: This PR directly continues the typography-token system work from PR #134, updating the same src/styles.css/src/mb/mb.css surfaces and extending tests/e2e/typography.spec.ts coverage.
• OpenDIKW/dikw-web#135: Both PRs modify the same typography token/ladder normalization paths in src/styles.css and extend E2E assertions in tests/e2e/typography.spec.ts.
• OpenDIKW/dikw-web#136: This PR builds directly on PR #136's MB-Web token migration by further adjusting src/mb/mb.css .mb-lab label behavior and src/styles.css metric sizing.

Poem

🐇 Hop hop, the tokens align,
No more 600 on mono — 500 is fine!
Markdown tables keep their case intact,
pH and mRNA rendered exact.
The hero metric drops its hard-coded size,
And the rabbit checks the CSS… twice! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the PR’s main typography polish changes and references several key fixes included in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ui-polish-084

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}