When I joined MontyCloud, me and another senior designer joined on the same day. We were the first designers there. No design system, no component library — every screen was slightly different. Different button styles, inconsistent spacing, colours that almost matched but didn't.
We built Vision UI from scratch.
Token-based. Everything — colours, spacing, typography, border radius, shadows — defined as tokens before a single component was drawn. Light mode and dark mode weren't an afterthought. They were baked into the architecture from day one. We pulled from open source design systems to move fast, built it in three phases, and published the whole thing as a proper case study.
What I learned: the hardest part of a design system isn't building it. It's the conversation around it.
Why does this button look like this and not that? Why is this spacing token 8px and not 12px? Why did we decide against this pattern another product uses? The answers to those questions are how well you understand the system for which the designs are built. The files are just the artifact.
And the one thing I'd tell anyone starting from scratch: understand the use case of your users to answer the 'Why' it needs to be designer that way. Discuss with PM's deeply on use cases to understand problem deeply. Ask why something's is build in that way before jumping to solutions and involve engineering early, not at handoff.
Tokens aren't a Figma feature. They're a shared language. Get engineering into that conversation early.
Credits & further reading
- shadcn/ui — the open source component system we pulled from most heavily. What makes it useful as a foundation is that it's unstyled enough to customize and well-structured enough to build on. ui.shadcn.com
- Preline UI — Tailwind-based component library with solid documentation. Useful for the structure and pattern vocabulary, even when you're overriding the visual layer. preline.co
- Nathan Curtis, EightShapes — the most practical writing on token-based design system architecture. His articles on building, maintaining, and governing design systems from a real team perspective are worth reading before you start any system from scratch. medium.com/eightshapes-llc
- Design Tokens — the concept of separating design decisions into a semantic token layer (color.primary vs #3B82F6) was formalized by Jina Anne and the Salesforce Lightning Design System team. The Theo/Style Dictionary toolchain that makes tokens cross-platform came out of that work.
- Figma Variables documentation — tokens in Figma moved from plugin-land to native Variables in 2023. Understanding the relationship between Figma Variables, design tokens, and CSS custom properties is foundational to any modern token-based system.