Theme presets that scale across marketing and product
How FlutterSeed keeps landing pages, dashboards, and auth screens aligned using CSS variables and shared shadcn tokens.
Most templates treat marketing and app UI as separate design systems. FlutterSeed uses one token pipeline: preset CSS files define --primary, --background, and sidebar tokens, and both the external landing and internal dashboard consume them.
Preset switching without flash
Preferences boot from cookies before hydration so SSR and client renders match. Layout-critical options like sidebar variant stay server-readable; theme preset and mode apply through data attributes on the document root.
Practical takeaway
When you add a new section — blog cards, pricing, charts — reach for bg-card, text-muted-foreground, border-border, and primary accents. The UI stays coherent when users switch from Graphite to another preset.