Design system
Toge Design System
Sprout’s shared toolkit of building blocks, styles and rules, now on its fifth major version. More than eighty documented components, one token layer under all of them, and a design agent that knows the rules.
- Client
- Sprout
- Year
- 2026
- Role
- Design systems
- Link
- Official website
A design system is working when nobody has to ask. Toge is what Sprout’s product teams reach for: components, tokens and the conventions around them, published as one Storybook that designers and engineers both read from.
Colour still goes by produce. Kangkong is the brand green, tomato is danger, carrot is caution, mango is pending, blueberry is information, wintermelon is the accent, and ubas marks anything the AI agent touches. Those primitives sit under a semantic layer, so a component asks for a brand fill or a danger border and gets the right value in light and dark without ever seeing a hex code.
Type is Geist at three weights on a numeric scale, with a 14px body as the default. The rules are written down as component classes instead of being left to whoever is holding the file, which is what keeps screens from different hands looking like one product.
The system ships as source, not a package. Teams install the component code into their own project and own it from there, so every piece has to be readable and light enough to live in someone else’s codebase. The same rules power a chat kit for Sidekick, Sprout’s in-product assistant, and a design agent for Claude Code that runs research, journeys, prototypes and QA the Toge way.
The system also went on stage at UX+ in Manila, in a talk on Project Wayfinder and how Toge carried the build.
