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
 <div class="text-ink bg-surface border-line">
@@ -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
   <table>
     <tr><td>Section title</td><td><code>text-xs font-bold uppercase tracking-widest</code></td>
         <td>12px / 700</td><td>Most commonly undersized</td></tr>
-    <tr><td>Card container</td><td><code>bg-white shadow-sm border border-brand-sand rounded-sm p-6</code></td>
+    <tr><td>Card container</td><td><code>bg-surface shadow-sm border border-line rounded-sm p-6</code></td>
         <td>padding 24px</td><td>—</td></tr>
   </table>
 </div>
@@ -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