Design system rigor, out of the box
Sugarcube turns design tokens into CSS variables, utilities, and component styles.
Change a token, everything updates.
Built on the W3C DTCG token standard. Works with Vite or as a standalone CLI.
$ pnpm dlx @sugarcube-sh/cli
init ##Features
Single source of truth for your styles
Define your design decisions as tokens. Sugarcube generates CSS variables and utility classes from them — change a token and everything updates.
Starter kits
Don't have tokens? We'll add a complete starter kit on initialization. Yours to learn from, use as-is, or customize.
Portable token format
Tokens use the newly stable DTCG format — ready for any tool that does the same, so you're not locked in.
Just-in-time utilities
Utility classes are generated on demand. Only the classes you use end up in your CSS.
Components
Copy from the registry as source files. Yours to fully customize. Built for token-driven front ends.
CSS architecture
Structure your styles with CUBE CSS — a methodology that keeps your HTML clean and your CSS organized.
Maximum themeability
Manage and generate multiple modes, themes, or brands all by overriding a handful of tokens.
Flexible tooling
Generate CSS with the CLI, or use the Vite plugin for hot reloading during dev.
##Help & Support
Sugarcube is actively developed, and feedback is welcome.
If you have questions, ideas, or run into problems:
##Acknowledgments
Built on the work of Andy Bell (CUBE CSS & Every Layout), Heydon Pickering (Every Layout), and the Design Tokens Community Group.
