It’s deceptively hard to start a front-end project well.

You can scaffold a new app in seconds — running create astro@latest is one of life’s great pleasures — but laying the groundwork for a maintainable, adaptable UI is another story.

You (ideally) want:

1. A way to make key design values explicit, preferably in a form understood by both designers and developers (e.g. design tokens).
2. A way to convert those tokens to CSS that makes it easily inspectable, changeable, themable, and extensible.
3. Components that are easy to use, accessible, and loosely coupled to specific technologies.
4. A way to organise your styles that is structured, easy to understand, pragmatic, and consistent.
5. A way to write your styles that harnesses the power of the cascade and that works with the browser, not against it.
6. A way to approach layouts consistently so they aren’t improvised on every screen.

That’s a lot. And it’s probably not the full list, either.

The point is: developing solid ground for your front end is a considerable undertaking.

That’s why I’m building sugarcube — a small but powerful toolkit for better front-end foundations.

Sugarcube uses W3C-compliant design tokens as the foundation of your design system. This isn’t just about future-proofing or interoperability — it’s about creating a shared language between designers and developers.

Tokens are converted to CSS custom properties, making them:

• Easily inspectable in browser dev tools
• Simple to override and extend
• Powerful for theming (change your whole brand with a few dozen token updates!)
• Accessible to anyone who knows CSS

Sugarcube leans into native web technologies rather than framework abstractions. This means:

• Using CSS custom properties for theming
• Leveraging the cascade and inheritance
• Working with the browser, not against it
• Fewer dependencies in your project

Sugarcube provides foundations, not constraints. This means:

• No prescribed component APIs
• Freedom to implement variants as needed
• Choice between static and fluid dimensions
• Control over your CSS architecture
• Access to underlying component APIs when needed (e.g., Radix UI for complex components)

Through CUBE CSS, sugarcube provides a consistent approach to layout problems. This means:

• No more improvising layouts on every screen
• Clear patterns for composition
• Separation of concerns

Sugarcube works with any build tool or framework. This means:

• Components available in multiple formats (React, Astro, Web Components)
• Choice of (optional)build tool integration (Vite, PostCSS)
• Freedom to use the right amount of JavaScript
• No framework lock-in

Rather than installing components as packages, sugarcube components are copy-to-use. This means:

• You control the code
• Fewer dependencies
• Freedom to modify and extend
• No versioning headaches

Sugarcube is suitable for any project, but it’s particularly powerful for:

• Small teams who want design system practices without the overhead
• Projects that need to scale from simple to complex
• Teams that value flexibility and control
• Developers who prefer working with native technologies