Introduction

Sugarcube is a toolkit for building front ends on strong, reusable foundations using design tokens, generated CSS, and optional components.

Why sugarcube exists

While it’s easy to spin up a new application with your favorite framework, building a solid front end remains a real challenge.

Teams often reinvent these foundations on every project, leading to inconsistency, duplication, and systems that are difficult to evolve.

Depending on the project, you might need:

• A platform-agnostic single source of truth for key design decisions (design tokens)
• A way to transform that source of truth into CSS (CSS variables and utility classes)
• A way to organize your styles that is structured, easy to understand, and tool-agnostic
• A way to approach layouts consistently so they aren’t improvised on every screen
• Component code that is flexible and that can be used to build your own component library

Many of these problems can be solved individually with existing tools. But few tools address them together, as parts of a single system.

Sugarcube brings these pieces into alignment. It allows teams to define their foundations once, and build on them consistently over time.

Why “sugarcube”?

The name originally came from my desire to make CUBE CSS a little sweeter to work with. While sugarcube is now much more than a tool for adopting CUBE, the idea of making front end development a little more sweet still felt apt.

Acknowledgments

Sugarcube wouldn’t exist without the work of many in the web development community.

• Andy Bell for CUBE CSS, the design-tokens-to-CSS workflow, and his overall approach to building for the web. Sugarcube is largely tooling built around his methods. Andy has also been kind enough to answer questions and provide advice throughout the development of this project.
• Heydon Pickering for Every Layout, co-created with Andy. The layout primitives that ship with CUBE CSS come directly from their work (with small tweaks here and there).
• The Design Tokens Community Group for establishing the design tokens specification that makes cross-platform design systems possible.

While I have learned and borrowed from many, all mistakes are mine alone.

About the creator

Sugarcube was created by Mark Tomlinson.

I built sugarcube because of friction I kept experiencing as a developer working in startups and agencies.

I wanted a way for any team — especially ones without the budget for a dedicated design system team — to build with rigor, confidence, and speed.