[{"data":1,"prerenderedAt":91},["ShallowReactive",2],{"navigation":3,"/blog/how-i-built-my-own-design-system-from-scratch":26,"/blog/how-i-built-my-own-design-system-from-scratch-surround":86},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":27,"title":14,"author":28,"body":32,"date":77,"description":78,"extension":79,"image":80,"meta":81,"minRead":82,"navigation":83,"path":15,"seo":84,"stem":16,"__hash__":85},"blog/blog/how-i-built-my-own-design-system-from-scratch.md",{"name":29,"avatar":30},"Emma Thompson",{"src":31,"alt":29},"https://images.unsplash.com/photo-1701615004837-40d8573b6652?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",{"type":33,"value":34,"toc":73},"minimark",[35,39,42,45,48,64,67,70],[36,37,38],"p",{},"After years of starting each project with a blank Figma file, I finally took the plunge and created my own comprehensive design system. The process was both challenging and incredibly rewarding, and I wanted to share my approach for other designers considering the same journey.",[36,40,41],{},"I started by auditing five of my recent projects, identifying common patterns and components that appeared across different designs. This revealed inconsistencies in my work that I hadn't noticed before—seven slightly different button styles, inconsistent spacing rules, and text styles that varied without clear purpose.",[36,43,44],{},"Rather than creating a rigid system upfront, I built it iteratively through a real client project. For the EcoTrack app, I documented each component as I designed it, creating a living system that evolved with the project's needs.",[36,46,47],{},"The core of my system includes:",[49,50,51,55,58,61],"ul",{},[52,53,54],"li",{},"A flexible color system with semantic naming conventions",[52,56,57],{},"Typography scales based on the golden ratio",[52,59,60],{},"Component variants with clear usage guidelines",[52,62,63],{},"Spacing and layout rules that maintain consistency across devices",[36,65,66],{},"The biggest challenge wasn't technical but psychological—learning to trust the system instead of reinventing solutions for each new problem. But the payoff has been enormous: my design process is now 40% faster, client revisions have decreased significantly, and handoff to development is much smoother.",[36,68,69],{},"If you're considering building your own system, my advice is to start small with core elements, test them on real projects, and document as you go. A good design system should feel like a trusted collaborator, not a set of restrictions.",[36,71,72],{},"I've attached a template of my component documentation method below—feel free to adapt it for your own workflow!",{"title":74,"searchDepth":75,"depth":75,"links":76},"",2,[],"2025-03-05T00:00:00.000Z","A practical guide to creating your own design system, from initial audit to implementation, and the lessons learned along the way.","md","https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,true,{"title":14,"description":78},"L3tQ8WIvJmQKbR3liq3QK4vdU0umEVM1CgmVCN_vxTA",[87,89],{"title":10,"path":11,"stem":12,"description":88,"children":-1},"A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.",{"title":18,"path":19,"stem":20,"description":90,"children":-1},"Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.",1775914639960]