- Jan 23, 2022
- 4 min read

Best design systems in the industry

I originally published this article on Medium when I worked at GetYourGuide. Almost a decade has passed and in the tech world that means much can change.

Living style guides

Have my thoughts changed on style guides or design systems? How have component library tools evolved? What are the latest and greatest resources for streamlining Dev<>Designer collaboration?

Explore some best practices and the design system examples below.

Summary

Don’t have time to read all the amazing facts below? No problem.

The days of exporting red lines and specs to a PDF are gone. By the time you finish the basic principles, it’s outdated. These style guides are typically done unilaterally with one discipline in mind and therefore, they are ineffective for a multi-functional team.
Creating a Living Guide will take some time in the beginning. However, It pays off with faster build times for new components and pages. Anyone joining an ongoing project can refer to the style guide because it’s made with multiple disciplines in mind and highly usable for non-tech folk.
A style guide allows standardization of CSS. By using the style guide as an inventory of components and code, both Designers and Developers can quickly see if new designs deviate from current standards, and decide as a team if it’s worth expanding the code and visual language. With the absence of a style guide, this is impossible — new styles are written, resulting in bloated CSS and a messy brand or product.
Features must automatically update, ensuring that the style guide is current. Use a framework that complies with the team process and testing environment.
Consistency is easier to maintain with code and visual language.

What is a Style Guide?

The Designer takes ownership of a product’s visual language and this person collaborates with the Front-end Developer(s) to maintain the design components and code standards from conception to execution. This takes maintenance. A style guide is one way to maintain the visual language and code standards throughout print marketing and web platforms.

In the past, a style guide was something that was built with one discipline in mind ie. Developers create code standards and libraries to make their lives easier, while designers create interface libraries to establish consistent design patterns. The goal of the style guide is to increase team proficiency and to tell the world that this brand is special, here are its assets — respect them or die.

Often, the process involved meant building red lines and setting rules for margin constraints, color states, user flows or style tiles and storyboards, depending on the product, respectively. All of which, is very time-consuming to set up so you can understand why the creator(s) would be crossed if a rule was broken. Once the principles were defined and finalized, an amazing PDF was created and shared internally or with third-party individuals. Overall, the process of building a style guide could take up to 2 months of diligent work.

Today, that same style guide would be outdated within 2 weeks after its conception. The reason for this is because there’s a high demand for products to online and the technologies that evaluate their success have improved significantly in the span of just 5 years. Style guides have to be dynamic, cross-disciplinary and compatible with current design software and developer frameworks.

What is a Living Style Guide?

A style guide is a living document of code, which details all the various elements and coded modules of the site or application. Beyond its use in consolidating the front-end code, it also documents the tone of voice and visual language; such as copy guidelines, user-centric language, header styles and color palettes. According to Jina Bolton, Senior Designer in Salesforce’s UX department, living style guides need to have a clear vision that are aligned with design iterations within testing environments.

A modern design system must support multiple platforms and devices. It must maintain design quality and consistency across various devices. The goal for a style guide today is to create a tool that’s useful for Designers, Developers, Project Managers, business owners and new employees.

How to build a style guide

If you work in an A/B testing environment and you are a Designer taking ownership of this project, then the first thing you want to do is research the foundation of living style guides and create documentation, much like this article, to lay the groundwork.

The second thing you want to do is dive into your internal UI inventory and decide what are the finalized basic principles. Figure out which framework suits your team needs and collaborate with your Front-end Developer to nail down the first steps. Overall, everyone should agree that the file naming conventions should be agnostic ie. _slider versus _product-details_slider. And in order to maintain consistency the assets should be stored in a repository that automatically updates the style guide when changes are made. When building the style guide in the initial phases it’s important to design it for scalability and configuration.

One of the best benchmarks for style guides is Lonely Planet. They managed to create a guide that is well integrated with their product environment. By syncing the library with the QA environment, they are able to keep the style guide up-to-date and perform more grounded quality assurance across multiple devices. This is a very good example why a style guide today must be cross-disciplinary. A team with a Designer, Product Manager and Developers need to define their workflow and from there, the style guide framework will fall into place.