From d69a3abc3b1f0c482d7f5f56049f802fb075f9b0 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 6 May 2026 08:58:39 +0200 Subject: [PATCH] docs(personas): fix stale brand data in ui_expert persona MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update hex values → CSS var references, fix font (Merriweather→Tinos), card pattern (border-brand-sand→border-line, bg-white→bg-surface), and contrast table to remove hardcoded hex in favour of --palette-* names. Addresses Leonie's review blocker on PR #446. Co-Authored-By: Claude Sonnet 4.6 --- .claude/personas/ui_expert.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/.claude/personas/ui_expert.md b/.claude/personas/ui_expert.md index f8839e4c..ea13a3cf 100644 --- a/.claude/personas/ui_expert.md +++ b/.claude/personas/ui_expert.md @@ -38,10 +38,10 @@ Screen readers and search engines rely on landmarks to navigate. Every page need 2. **Use CSS custom properties for all brand colors** ```css -/* layout.css */ ---color-ink: #002850; ---color-accent: #A6DAD8; ---color-surface: #E4E2D7; +/* layout.css — semantic tokens backed by CSS variables (see --palette-* for raw values) */ +--color-ink: var(--c-ink); +--color-accent: var(--c-accent); +--color-surface: var(--c-surface); ``` ```svelte
@@ -103,9 +103,9 @@ unsaved work without warning. 1. **Enforce WCAG AA contrast ratios** ``` -brand-navy (#002850) on white: 14.5:1 -- AAA pass -brand-mint (#A6DAD8) on navy: 7.2:1 -- AAA pass for large text -Gray-500 on white: check >= 4.5:1 -- AA minimum for body text +brand-navy (--palette-navy) on white: ~14.5:1 -- AAA pass (verify exact value in layout.css) +brand-mint (--palette-mint) on navy: ~7.2:1 -- AAA pass for large text +Gray-500 on white: check >= 4.5:1 -- AA minimum for body text ``` Always verify contrast with a tool. AA is the floor (4.5:1 normal text, 3:1 large text). Target AAA (7:1) for body copy. @@ -134,8 +134,8 @@ Color-blind users (8% of men) cannot distinguish status by color alone. Always p /* Silver #CACAC9 on white = 1.5:1 -- fails all WCAG levels */ .caption { color: #CACAC9; } -/* brand-mint on white = 2.8:1 -- fails AA for normal text */ -.label { color: #A6DAD8; } +/* brand-mint on white = ~2.8:1 -- fails AA for normal text */ +.label { color: var(--palette-mint); } ``` Test every text color against its background. Decorative palette colors are for borders and backgrounds, not text. @@ -338,7 +338,7 @@ Test at 320px (small phone), 768px (tablet), and 1440px (desktop). Review diffs - +
Section titletext-xs font-bold uppercase tracking-widest 12px / 700Most commonly undersized
Card containerbg-white shadow-sm border border-brand-sand rounded-sm p-6
Card containerbg-surface shadow-sm border border-line rounded-sm p-6 padding 24px—
@@ -376,10 +376,10 @@ await page.setViewportSize({ width: 1440, height: 900 }); ## Domain Expertise ### Brand Palette -- **Primary**: brand-navy `#002850` (text, buttons, headers), brand-mint `#A6DAD8` (accents, hover), brand-sand `#E4E2D7` (backgrounds, borders) -- **Typography**: `font-serif` (Merriweather) for body/titles, `font-sans` (Montserrat) for labels/UI chrome -- **Card pattern**: `bg-white shadow-sm border border-brand-sand rounded-sm p-6` -- **Section title**: `text-xs font-bold uppercase tracking-widest text-gray-400 mb-5` +- **Primary**: `brand-navy` (`--palette-navy`) — text, buttons, headers; `brand-mint` (`--palette-mint`) — accents, hover; sand (`--palette-sand`) — page background (use `bg-canvas` or `bg-surface` as Tailwind utilities, not `bg-brand-sand`) +- **Typography**: `font-serif` (Tinos) for body/titles, `font-sans` (Montserrat) for labels/UI chrome +- **Card pattern**: `bg-surface shadow-sm border border-line rounded-sm p-6` +- **Section title**: `text-xs font-bold uppercase tracking-widest text-ink-3 mb-5` ### Dual-Audience Design (25-42 AND 60+) - Seniors: 16px minimum body text (prefer 18px), 44px touch targets (prefer 48px), redundant cues, calm layouts, persistent navigation, no timed interactions