Pickaxe Design System
Design Process
I began by studying best in class case studies, like those from Shopify, Atlassian, and Mailchimp. I also found some more great examples on the Design Systems Repo and skimmed through the Design Systems Handbook from InVision. Now that I saw what some of the greats looked like, I could take bits and pieces from them and build something that would serve us well.
Utilizing Atomic Design
I utilized Brad Frost's Atomic Design fundamentals to organize assets from atoms to templates (with this being the design system, the pages step is not necessary). I took elements from some of our most recent projects, such as buttons, fields, tables, bar charts and our standard wrapper. I collaborated with our front-end development team to ensure that I was using the most recent components, and getting them as close to pixel-perfect as possible.
Once I had the basics, I added other sections to cover typography, iconography, and standard colors. I made sure that my components matched our published applications by poking around in the inspect panel in my browser.
Next Steps
Once the basic building blocks were finished, I reached the Organisms and Templates stage, where I put together commonly used templates for bar graphs, tables, and our standard wrapper. My goal was to be able to drag and drop these elements so that only some minimal tweaking needed to be done for each project.
