Polaris | Design System

I've been the leading design from digital service, responsible for collaborating with designers from other areas of Sky.com and the broader digital space to create, iterate and moderate our design system. 

I worked on producing and updating the baseline grid system, and the typography styles to meet a 4px system. The baseline grid was added into our design template files, with improved typography styles being pushed out across the website

A baseline grid is an underlying structure that guides the vertical spacing in a design. 'It's used primarily for horizontal alignment and for hierarchy. Similar to how you would use columns and modules as guides in your design, you can use a baseline grid to build consistency in your layout. Using this type of grid is akin to writing on a ruled piece of paper — the grid ensures that the bottom of each line of text (its baseline) aligns with the vertical spacing. This makes a baseline grid not only an excellent typographic tool but also extremely helpful when 'you're laying out elements on the page because you can quickly check whether something on the page is missing a row of space.

Additionally, I've helped inform our design process going forward, how we work with developers, and how we introduce new designs. 

Screenshot 2019-07-21 at 17.01.27Screenshot 2019-07-21 at 17.01.27
Screenshot 2019-07-21 at 17.04.05Screenshot 2019-07-21 at 17.04.05
Spec sheet templateSpec sheet template