Pandora
Rhthm

A Living Style Guide

Our living style guide, Pandora Rhythm, is currently being built for our web product. Once written within the React framework for the web app, each component is automatically generated within the style guide page.

Responsive Layout

When we began redesigning Pandora.com in 2015, I established a grid system with 10 breakpoints across devices, including mobile web pages. The system adapts its number of columns to accommodate a screen’s proportions, with fixed margins and gutters. By 2016, we had reduced that to 6 breakpoints, which included full ad displays for web.

In 2017, with the help of several product designers, we further reduced that to just 5 breakpoints — extra small to extra large — and adjusted margins to accommodate our new Pandora Premium mobile app. The result was a fluid, responsive grid system which adapts to device widths from our smallest phone (320 units wide) to our largest monitors (2560 units and counting). All our teams now design features and responsive components using this grid system across our products on phones, tablets, desktop machines, and televisions.

Designing a Universal Resource

As the living style guide is being developed, we plan to design and update documentation to cater to the needs of everyone, not just designers and engineers.

Rhythm has quickly become a resource for product managers and QA team members, complimenting our existing documentation tools. Ultimately it helps reduce the amount of work involved in design specifications, redlines, and design FAQs.