/observations/ header styling drift — parked 2026-05-15
DARE.CO.UK · PARKED SKETCH · 2026-05-18
Mirrored from ~/.claude/.../memory/project_observations_header_styling_parked.md. This is a design sketch parked for future build — read for context, not as a current deliverable.
/observations/ (and likely the 10 other section-index pages built 2026-05-15 morning) renders the canonical header with slightly different styling than methods-archive — Dan flagged “the header is different” without specifying. Past the 96% parity threshold of the canonical-rollout but still visibly off. Park until a focused styling-audit session.
Flagged 2026-05-15 16:58 by Dan:
“https://www.dare.co.uk/observations/ Header is different on this page but park it as a to-do fix.”
Context
The 11 section-index pages built earlier today (/observations/, /cinema/, /architecture/, etc.) use a different CSS palette than the article + methods-archive pages:
| Layer | Section indexes | Article pages / methods-archive |
|---|---|---|
| Body font | Georgia serif | Helvetica sans (via --sans) |
| Body background | --cream: #fbf8f3 (was #f5f0e8 before alignment) |
--bg: #fbf8f3 |
| Color tokens | --dark / --mid / --light / --accent / --border |
--ink / --ink-soft / --line / --accent |
The canonical CSS has fallback values for the missing tokens, so colours render correctly. Font-family is explicitly set on the header (Helvetica Neue system stack) so the wordmark doesn’t inherit Georgia.
But Dan sees a visible difference. Possible remaining gaps:
- Padding around the header — section-index
<body>may have different margins/padding than article body - Header bar height — the canonical bar’s
padding: 1rem clamp(1.25rem, 4vw, 3rem)may resolve to different pixel values on section indexes vs articles (different parent widths) - Border-bottom colour subtlety — fallback
rgba(10, 10, 10, 0.08)vs methods’s--line: rgba(10, 10, 10, 0.08)— IDENTICAL by value, but different inheritance chain may cause slight contrast difference - Letter-spacing inheritance —
body { font-family: Georgia, ... }may carry differentletter-spacingdefaults thanbody { font-family: var(--sans); }even though canonical pins font-family on.brandand.top-nav a - Box-shadow / position differences — section indexes don’t have the sticky/frosted header CSS; canonical is static. No difference expected, but worth confirming.
How to investigate
- Open both pages in Chrome side-by-side
- Use the Eyedropper to compare wordmark colour, kicker colour, nav-link colour
- Use the Inspector to compare computed styles on
.top,.brand,.top-nav a - If pixel-perfect parity is the goal, may need to add
--ink,--ink-soft,--linedefinitions to the section-index palette so it matches token-for-token (vs relying on canonical fallbacks)
Why parked
End-of-Friday-afternoon scope. Dan said “park it as a to-do fix” — not blocking, just on the list. The 691/691 canonical sweep + the JS-DOM coupling fix + the dashboard toggle landed in the same session; this is the last 4% of polish.
On resume
- Pair this with the Phase 3 work (
dare_migrate_articles.pytemplate patch) and the dare_section_indexes_build.py template work - The “right” fix is probably to add the canonical token-set to the section-index template so they inherit the same palette declarations, not just the same RGB values
- Could pair with the
feedback_visual_regression_pixel_diff_parkedif THAT tool exists by then — would catch this kind of subtle drift automatically
Linked memories
project_dare_canonical_header_rollout— the rollout this completesproject_visual_regression_pixel_diff_parked— the tool that would catch thisfeedback_audit_js_dom_coupling_before_canonical_patches— the meta-lesson from today’s rollout
The aphorism
The last 4% of any rollout is the 80% of total effort. Park gracefully, or it eats next Friday too.