Today we talk about design systems, but back in 2016 we had style guides. Which are kind of like baby design systems. At FastPay we needed a style guide to keep developers on track without re-inventing the wheel on a daily basis, so I worked with developers and marketing to craft something simple for the development team of 15 or so to use.
Because the company’s software was built in Angular, I built out the style guide myself in Angular so there would not be a need to translate plain HTML (or worse, flat images) to Angular. They could simply copy and paste the code.
As a new feature was being developed by the product team, once we go to the point where we knew what it would look like I would add the component to the style guide before the first meeting to scope out the story.
In addition to the guidelines and components for the developers, there was also a section on written style. I also provided the users personas here for reference.
The FastPay style guide I created is still available online. I’ve also added a screenshot of the component section below.
Image: Unsplash, Guillaume Jaillet