Establishing a Design System

At Torstar we’ve been working on our Design System and new visual language for a couple of years now. Putting something like this together is all about establishing process.

When we began the project, the product itself was in real flux so it took a while to establish the visual language in order to even think about creating a system. We began by establishing guiding principles using sharable standard sticker sheets created using Sketch. It was only once we transitioned to using Figma which is sharable design software with version control that we started to make real headway.

Once we had completed a larger site audit on things like colour and typography we held a 2-day Design Jam to lay the foundation. We adjusted our design process to include rigour around adding new elements and we are strict about using the established elements.

We have designed our Toronto Star flagship site and app to be a white label solution that can be adapted for our other regional daily sites. The Hamilton Spectator, The Waterloo Record and The Peterborough Examiner (plus three Niagara area dailies) all use the original Star design with simple logo and colour updates. The development team migrated these sites all on to the same code stack as the Star so now articles can easily be shared and published across all properties and any design changes we make on thestar.com gets mirrored out across all the other dailies.

Toronto Star Design System
(work in progress/never finished)

Today we have a working, usable design system that has already saved lots of time and confusion. Developers, Designers and Marketers are able to collaborate and communicate so much more easily now that we have an established DSM.