alouette

Build screen structure: Box / InteractiveBox / SafeAreaBox for containers, raised with the surface utilities (surface, surface-{size}, lowered, surface-flat, surface-popover), View with flex classes and Separator to arrange them, ScreenCenterLayout and the screen scroll containers (ScreenScrollView / ScreenFlatList / ScreenSectionList, whose safe-area edges are declared through SafeAreaScope) for the page itself, the application shell around every screen (AppLayout + AppHeader and its brand / navigation / actions / account slots, or AppShell + AppShellSidebar + AppShellMain when the shell is composed per route; AppSidebarLayout + AppSidebar for an app navigated from a fixed sidebar), and GradientBackground / GradientScrollView for a tinted ground. Space, round and raise everything with the alouette spacing, radius and shadow scale rather than raw Tailwind numbers. Load when building screen structure, an app header or shell, cards, spacing, or backgrounds.