[{"data":1,"prerenderedAt":80},["ShallowReactive",2],{"blog-building-design-systems-at-scale":3},{"id":4,"title":5,"body":6,"date":67,"description":68,"extension":69,"meta":70,"navigation":71,"path":72,"seo":73,"stem":74,"tags":75,"__hash__":79},"blog\u002Fblog\u002Fbuilding-design-systems-at-scale.md","Building Design Systems at Scale",{"type":7,"value":8,"toc":59},"minimark",[9,13,18,26,29,33,36,39,43,46,49,53,56],[10,11,12],"p",{},"After two years of building and maintaining a design system with over 120 components, I've collected a set of hard-won lessons about what works — and what quietly falls apart.",[14,15,17],"h2",{"id":16},"start-with-the-spec-not-the-code","Start with the spec, not the code",[10,19,20,21,25],{},"The single biggest unlock was writing engineering specs ",[22,23,24],"em",{},"in Figma"," before touching any code. Each component gets a page that defines every prop, state, slot, and edge case. When the spec is tight enough, implementation becomes almost mechanical.",[10,27,28],{},"This flips the usual workflow. Instead of designers handing off a static mockup and engineers interpreting it, the spec becomes a shared contract. Ambiguity drops. Review cycles shrink.",[14,30,32],{"id":31},"tokens-are-the-foundation","Tokens are the foundation",[10,34,35],{},"Every visual decision — color, spacing, radius, shadow, motion — flows from tokens. Not from Tailwind classes, not from hardcoded values. Tokens.",[10,37,38],{},"In practice this means a single source of truth in Figma variables that maps 1:1 to CSS custom properties. When the brand evolves, you change the token. Everything downstream updates.",[14,40,42],{"id":41},"test-what-matters","Test what matters",[10,44,45],{},"Full coverage sounds good on paper. In practice, 85% line coverage with focused tests on interaction, accessibility, and edge cases catches more real bugs than 100% coverage that tests implementation details.",[10,47,48],{},"We use Vitest with Vue Testing Library. The rule is simple: test what the user sees and does, not how the component is wired internally.",[14,50,52],{"id":51},"ship-incrementally","Ship incrementally",[10,54,55],{},"A design system is never done. The best approach is to ship small, stable increments. Each component goes through: spec → implementation → review → docs → release. No batching. No big-bang launches.",[10,57,58],{},"This keeps the system honest. If a component is hard to document, it's probably too complex. If it's hard to test, the API needs work.",{"title":60,"searchDepth":61,"depth":61,"links":62},"",2,[63,64,65,66],{"id":16,"depth":61,"text":17},{"id":31,"depth":61,"text":32},{"id":41,"depth":61,"text":42},{"id":51,"depth":61,"text":52},"2025-04-10","Lessons learned from creating and maintaining a 120+ component design system across Figma and Vue 3.","md",{},true,"\u002Fblog\u002Fbuilding-design-systems-at-scale",{"title":5,"description":68},"blog\u002Fbuilding-design-systems-at-scale",[76,77,78],"Design Systems","Vue","Figma","mH54WOowtdttF6S6aV3Ew2hDmQ39ndg4XTAXLtCYVhQ",1779807608792]