SandoDesign System

A modern, accessible, token-based design system with a powerful three-layer token architecture

Get Started

Explore Tokens

GitHub

🎨

Token-Based Architecture ✅

Three-layer token system (Ingredients → Flavors → Recipes) fully implemented and production-ready.

⚡

Web Components ✅

Button component available now! Built with Lit for framework-agnostic use. Works with React, Vue, Angular, or vanilla JS. More components coming soon.

♿

Accessibility First

WCAG 2.1 AA compliance baked into token system. Color contrast testing ensures accessible designs.

🧪

Fully Tested ✅

2,200+ tests covering token structure, references, values, accessibility, and build output. 99.8% pass rate.

📦

Monorepo Architecture ✅

🎭

Flexible Theming ✅

Flavor system fully functional. Original and Strawberry flavors available. Create custom themes by defining new flavor tokens.

🚀

Developer Experience ✅

TypeScript support, hot module replacement, comprehensive documentation, and automated builds.

📊

Style Dictionary ✅

Automated token transformation to CSS. Build once, use everywhere. Smart caching for instant rebuilds.

Quick Example

html

<!-- Install the package -->
<script type="module">
  import '@sando/components/button'
</script>

<!-- Use the component -->
<sando-button variant="solid" flavor="strawberry">
  Click me
</sando-button>

Philosophy

Sando is inspired by the Japanese "katsu sando" sandwich. Just like a sandwich has layers that work together to create something delicious, our design system has three layers:

Ingredients - Raw, atomic values (colors, spacing, typography)
Flavors - Semantic tokens that give meaning and context
Recipes - Component-specific tokens that bring it all together

This architecture ensures consistency while allowing complete flexibility through theming.