[{"data":1,"prerenderedAt":91},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch":26,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch-surround":86},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","\u002Fblog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-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\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch.md",{"name":29,"avatar":30},"Emma Thompson",{"src":31,"alt":29},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-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-05","A practical guide to creating your own design system, from initial audit to implementation, and the lessons learned along the way.","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F196644\u002Fpexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,true,{"title":14,"description":78},"v4KwBTVJ90ic2ZwJ_5bpusUulPf4DMyWsNxXMwW-oUQ",[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.",1776764139625]