UX Fix Spec

Issue 1: FAQ accordions mimic primary buttons [Severity: high]

Problem: The FAQ items are styled as solid blue rectangles, making them visually identical to primary CTA buttons. This confuses users regarding which elements are interactive for conversion versus information.

Required Change: Remove the solid blue background from unexpanded FAQ items and use a standard text-based accordion style with a simple chevron and light borders.

Issue 2: Insufficient contrast on secondary copy [Severity: high]

Problem: Secondary text across the page uses light gray colors that fail accessibility standards, making important context difficult to read for many users.

Required Change: Darken all secondary gray text to a hex value like #595959 to ensure a minimum 4.5:1 contrast ratio against the background.

Issue 3: Competing CTAs in pricing cards [Severity: medium]

Problem: Both the free and paid pricing tiers use identical solid blue buttons, which fails to guide users toward the preferred paid subscription tier.

Required Change: Use a ghost button (outline only) for the free tier 'Try a story' action while keeping the paid tier button solid blue to create a clear visual hierarchy.

Issue 4: Disconnected state in tabbed interface [Severity: medium]

Problem: Descriptive text between the age selection tabs and the feature cards floats ambiguously, weakening the visual connection between the user's selection and the resulting content.

Required Change: Wrap the age-specific cards and subtext in a contained visual area or light gray background that physically connects to the active tab.

Issue 5: Unedited AI-generated illustrations [Severity: low]

Problem: The spot illustrations exhibit generic AI-generation hallmarks which detracts from the otherwise premium and professional feel of the brand's typography.

Required Change: Replace or refine the generic AI characters (rabbit and astronaut) with custom brand assets that match the specific art direction of the UI.

Issue 6: Tiny touch targets in UI mockup [Severity: low]

Problem: Small carousel dots and arrows in the product mockup violate touch target standards, creating friction if the element is meant to be interactive.

Required Change: If the carousel is interactive, increase the size of the navigation arrows and dots; if static, remove these UI elements to reduce visual noise.

Issue 7: Clinical 'Register' navigation copy [Severity: low]

Problem: The word 'Register' in the top navigation is too clinical and does not align with the empathetic, value-driven language used throughout the rest of the page.

Required Change: Update the navigation button copy to 'Start for free' to better reflect the service's low-friction entry point.

Issue 8: Misaligned 'Most Popular' pricing badge [Severity: low]

Problem: The 'Most Popular' badge intersects the pricing card's border awkwardly, creating a cluttered look and inconsistent padding.

Required Change: Re-anchor the badge clearly to the top edge of the card or position it as a floating element above the card header to fix spacing.