After researching and learning more about design systems thanks to the Invision Blog (Inside Design), I knew I wanted to create one for the PCC website redesign project. As the lead on the project, I would have close to 10 other people helping develop web pages. I needed an online version of the design system. This would allow other designers to easily find the styles I built for components on the website.
I started by designing using Adobe XD. Once I had all the components designed, I developed an interactive design system with HTML/CSS using Bootstrap as the CSS framework. For several of the popular components, I added code snippets and an option to copy the code to make it as easy as possible for others to grab the components for their own pages.
The design system proved to be a great help for the project. Check it out!
Not optimized for mobile devices as this was for internal purposes. For the best viewing experience please view on a desktop or laptop size screen.