Building a Design System with CMS-Controlled Tokens
How we built a theme system where colors, fonts, and spacing are controlled from the CMS admin.
From Hardcoded Styles to CMS-Controlled Design
Traditionally, changing a button color meant editing CSS, committing, building, and deploying. In Sattva, you change a hex value in the admin panel and the next visitor sees the new color.
How It Works
The Theme Setting single type stores 20+ design tokens (colors, fonts, border radius, spacing). When the frontend loads, the ThemeProvider fetches these values and applies them as CSS custom properties. Tailwind v4 utility classes read these properties via the @theme inline directive.
The result: instant design changes without touching code.