Working with Styleguides

Breaking Down a Web Design into Bite-Sized Components

With the rapid growth and expansion of our team at Switch & Mattaki, we found the need for us to begin exploring options for styleguide integration into our current and future projects.

A styleguide for the web is generally quite similar to the traditional brand styleguide. Its main job is to inform the viewer what the brand looks like and define how brand elements should or shouldn’t be used.

In the case of a website, the styleguide also allows us to break down a complicated website into bite-sized elements. This gives the team and our clients a collective overview of the websites colours, UI elements and other components utilised throughout the website. Once the styleguide has been formed, it is essentially utilised as a guideline or reference for all parties - whether they are a designer or developer here at Switch, or a content editor writing creating new pages and media on the website. The styleguide helps ensure that future additions to the website remain consistent. And as we know, consistency is key to a better user experience.


The styleguide is a collaborative tool that helps our clients and team throughout the entire project development process.

Our Plans

Here at Switch, we are planning on using our styleguides as an internal pattern and UI library that we can build upon as we continue growing the team. All the work we add to our styleguides can be ported over to other projects and re-used so we can spend our time and energy on the issues that matter most.

Styleguides not only make us more efficient internally, but they are also a great resource for our clients on many levels. Clients require styleguides early on in the project so they can prepare their teams to write and/or migrate content into their new website. They can also use it as a point of reference as they continue to develop their brand.

Benefits of a Styleguide

For the Client

With many of our clients, we have noticed they do not utilise the CMS to its full potential or are only using a few of the styled elements that our team have setup. With a styleguide in place, it will show them the full range of styles available. Which in turn, helps them produce exciting and conforming layouts on their websites to improve the success for customers.

The styleguide also acts as a great communication tool for our Project Management team. When in the early or development stages of the website, sometimes it is quite difficult to explain how parts of the website will work without getting the designer to create an array of mockups for you. Providing a styleguide along with some example pages keeps the client on-brand, helps them visualise how the CMS works and how content can be pieced together.

These two examples are only two of many advantages that a styleguide can provide. Major issues such as HTML and search engine optimised markup come to mind, and don’t forget WCAG accessibility concerns.

For the Team

If you break down a website it is made up of many smaller modules - which is what a styleguide is comprised of. Brad Frosts book on Atomic Design explains it a lot better than we can... But if we look at a website this way, it makes sense to design and code our modules so they’re isolated pieces of code. This means they could be used almost anywhere on the website, this approach gives us much more flexibility when putting together different pages on a website.

After integrating a styleguide, it would be the first port of call when the team are creating new content pages or designing a new feature. Having this resource alongside the website will let us see the new feature in context, making it much easier to match its style with existing elements.

Most importantly, the use of the styleguide allows us to create a solid foundation. Rather than reinventing the wheel for each new project, the styleguide saves us time and energy. We can create common coding patterns that we can reuse, plus generate common naming conventions that our team can become familiar with.

What We’re After

Right now, we’re in the process of evaluating our options and planning how we can integrate the styleguide into our workflow. The design & front-end team here at Switch came up with a list of requirements that we wanted out of our styleguide:

  • It should not bottleneck us into changing our design/front-end workflow just to meet the styleguides requirements
  • The styleguide should not introduce too much additional work for our team
  • Be a living styleguide - it should update automatically if we update our SCSS variables in the project
  • Make it easily accessible to the client via a subdomain or staging website that we host here at Switch
  • Looks professional and makes browsing the website’s styles easy and intuitive

With these points in mind, we did some research and came up with a few contenders that we could use.

Future Updates

The team here will continue exploring options on the styleguide generation process, we hope to use it on our next project and build it up from there. Although it seems styleguides are all positive, we are yet to see whether designing modular elements will create a disjointed and fragmented design or UX - we will see in due time.

Once our styleguide process is down-pat we will provide an update on how we went. Make sure you check back later so you don’t miss it!

Further Reading

If you’re interested in seeing some styleguides out in the wild, styleguides.io provides a whole repository of links such as the comprehensive Lightning Design System from Salesforce to the styleguide for the US HealthCare system.

Want more?

Back to the Blog