# Sprout implementation guide

Read DESIGN.md. Match demo/index.html for the app direction and demo/system.html for its building blocks.

- Keep Plus Jakarta Sans, cream/evergreen neutrals, pink/lilac/butter/mint accent panels and large rounded geometry.
- Use the textured editorial course illustrations in demo/assets, discreet shadows and clear typography. Preserve the 3:2 cover framing and embedded WebP data URLs. Use the transparent gouache hero and sidebar assets with contain framing; UI icons and the small brand mark remain code-native. No glass, clay, harsh black outlines or rotated cards.
- Import shadcn.css after Tailwind; set data-design="sprout" on html, preserve provider behaviour/data-slot, and map data-variant where required. Load the font and retain FONT-LICENSE.txt with redistributed font data.
- Keep the app responsive at 360 px, tablet and desktop. Do not hide core actions when collapsing navigation.
- Preserve accessible labels, keyboard states, semantic forms/dialogs, reduced motion and theme support.
- Sample lesson, filter, chart and leaderboard controls must work. Keep demo data local, and do not send notifications, create accounts or sell courses.
- Verify the shared CSS, DESIGN.md and both previews remain consistent after edits.