- ComparisonTabCard: width 210 → 235; recommended badge switched to
filled brand + StarRoundedIcon matching the desktop
ComparisonColumnCard treatment; removed glow + active glow shadow in
favour of the standard shadow-sm; border colour brand-500 → brand-600;
pt 2.4 → 3.5.
- ComparisonPackageCard: verified badge replaced with inline
VerifiedOutlinedIcon to the left of the provider name (matches
desktop pattern); warm tint confined to the header (Card body now
explicitly white); 2px brand-600 border when recommended; header
padding px 2.5 → 3, pt 2.5 → 3, pb 2 → 4; spacing pass across the
provider identity / package info / sections groups — Divider my
1.5 → 3, section mb 3 → 5, item py 1.5 → 2, heading→first-item 1.5
→ 2.5.
- ComparisonPage mobile: Divider between page header and tab rail;
"Choose a package to view" h2 heading (user-centric copy), used as
aria-labelledby for the tablist; dot indicator below the rail
(8px grey, active 24×8 brand-600 pill) — aria-hidden and tabIndex=-1
so the tab rail above remains the canonical accessible navigation.
Also leaves the Figma capture script in preview-head.html for future
page captures.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- @storybook/addon-a11y: real-time axe-core accessibility panel per story
- @storybook/addon-storysource: story source code panel in addons bar
- @playwright/mcp: browser automation for visual screenshot feedback loop
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Promote all 11 atoms, 6 molecules, 1 organism from review → done
- Navigation: grey bg (surface.subtle), real FA logo SVGs, add Provider Portal
- Navigation: remove mobileTrailing prop and MobilePriceTracker story
- Add staticDirs to Storybook config for brand assets
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
