Living styleguide

March 2017 - May 2017

The pricing tool, showing a slider to let the user select the number of services and different checkboxes underneath to select from. The total price resulting from the user's selection is showed at the bottom.
A screenshot of the pricing tool.

About the project

This is a frontend component library and living style guide for the website of an application monitoring software. The website itself was implemented by the customer. Although the website got a visual redesign by now, many of the components are still in use.

Scope & Architecture

The base structure of the system was handed over to me by my fellow developers. The system follows the Atomic Design methodology. I developed and documented the whole system from color palettes and typography to components of all levels including JavaScript functionality until the final page templates. I also made sure to keep the components accessible.

Challenges

  • As the actual designs were page based, I split the design into different components according to the Atomic Design principle before I started implementing them.

Tech Stack

  • KSS (Knyle Style Sheets)
  • Gulp