Repository navigation
feat(ui): reskin entire site to Apple web design language (ADR-0022) - #20
AnikaWilliams wants to merge 3 commits into
Conversation
Founder direction: rebuild the whole site in Apple's web design language. Comprehensive reskin (styling only) superseding ADR-0019's Trust & Authority system. - foundation: Apple token set (label #1d1d1f, secondaryLabel #6e6e73, accent #0071e3, surface #f5f5f7, separator #d2d2d7), SF SYSTEM-FONT stack (EB Garamond + Lato retired -> no web-font fetch), generous spacing, rounded cards, pill primary buttons; tailwind.config + global.css + BaseLayout + Footer/Disclaimer/ConsentBanner restyled. ADR-0022 records it. - pages: home, corridor page + no-JS static guide, the plan island (CorridorApp.tsx: intake, disclaimer modal, journey map, canton panel, task cards, momentum, sidebar), and legal/about/contact all reskinned to match the approved Apple-web mockups. - a11y: contrast lifted to AA (tertiaryLabel #6b6b70 5.30:1; placeholders -> secondaryLabel 5.07:1), 44px hit targets, scalable type ramp (no hardcoded micro-px). Dark mode deferred (tokens dark-ready). Styling only: zero content/copy/YAML/provenance/logic changes. All trust UI preserved (Verified badge, Source + last-verified lines, disclaimer modal gate, journey map, canton panel, Sources & legal-notes fold, Impressum, route-not-covered + Russia notices). Verified: astro check 0; build + provenance gate (15 pages); 281/281 tests; apple-hig design-reviewer PASS; confirmed live (Playwright). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8b6c798dbf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div | ||
| aria-hidden="true" | ||
| className="absolute inset-0 backdrop-blur-md" | ||
| style={{ backgroundColor: 'rgba(29, 29, 31, 0.48)' }} |
There was a problem hiding this comment.
When backdrop-filter is unsupported or disabled, this 48%-opaque scrim is the only visual barrier over the plan; dark plan text remains high-contrast and readable through it, contrary to this disclaimer gate's stated requirement. Retain an opaque-enough fallback background (such as the previous 70% scrim) and use blur only as an enhancement.
Useful? React with 👍 / 👎.
Restore the pre-redesign 70%-opaque scrim (rgba(29,29,31,0.70)) so the plan beneath the disclaimer gate stays unreadable even when backdrop-filter is unsupported or disabled. Blur remains as a progressive enhancement only.
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 22cd6d5b4e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| --color-separator: #d2d2d7; | ||
|
|
||
| /* Feedback */ | ||
| --color-success: #248a3d; /* systemGreen, darkened for AA text on white */ |
There was a problem hiding this comment.
The new #248a3d success token has only about 4.40:1 contrast against white and roughly 4.0:1 against bg-surface, despite the comment claiming AA compliance. Normal-sized status text now uses this token, including “Completed,” “You're on the list,” and chapter milestone messages, so these states fail WCAG AA's 4.5:1 text requirement; use a darker success text value while retaining the current green as a fill if needed.
Useful? React with 👍 / 👎.
#1a7431 raises --color-success from 4.40:1 to 5.86:1 on white, 5.38:1 on surface, 5.17:1 on brand-50 — clearing the 4.5:1 AA threshold in both text directions (text-on-white and white-on-fill).
2 participants
What
Founder direction: rebuild the entire site in Apple's web design language. Comprehensive styling-only reskin — ADR-0022 supersedes ADR-0019 (Trust & Authority).
#1d1d1f, secondaryLabel#6e6e73, accent#0071e3, surface#f5f5f7, separator#d2d2d7), the SF system-font stack (EB Garamond + Lato retired → no web-font fetch, GDPR-friendly, slightly faster), generous whitespace, rounded cards, pill primary buttons. Tailwind config + global CSS + BaseLayout + Footer/Disclaimer/ConsentBanner restyled; reusable component recipes.#6b6b705.30:1; placeholders → secondaryLabel 5.07:1), 44px hit targets, scalable type ramp (no hardcoded micro-px). Dark mode deferred (tokens dark-ready).Styling only — trust architecture untouched
Zero content/copy/YAML/provenance/logic changes (
git diff src/contentis empty). Preserved: the "Verified against official sources" badge, every Source + last-verified line, the required disclaimer modal gate, the journey map, canton panel + office links, the "Sources & legal notes" fold, Impressum, and the route-not-covered + Russia-sanctions notices.Verification
astro check0 errors · build + provenance gate (15 pages) · 281/281 tests (route + plan-correctness tripwires hold) · apple-higdesign-reviewerPASS (HIG + a11y, after a fix pass) · confirmed live with Playwright (home + plan screenshots reviewed).Notes
Stack & sequencing
Stacked on
feat/plain-language. Merge order: #16 cantonal notes → #17 calmer-UI (lawyer hold) → #18 journey map → #19 plain language → this.develop → mainis yours.🤖 Generated with Claude Code