• 8 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 1/13/20

Use design systems and style guides as a reference library

Log in or subscribe for free to enjoy all this course has to offer!

As the design and development teams of an organization grow, there are increasingly more elements that need to be managed, shared, and communicated across teams. These shared resources help ensure work is efficient and consistent across platforms.

Style guides, pattern libraries, and design systems

Style guides have long been used by graphic designers as a way to create and maintain a cohesive visual style. A style guide may include:

  • Brand colors

  • Fonts

  • Logo 

  • Guidelines on usage

Logos, color, typography and usage to show how the visual system looks.
Mash Creative reimagined the Royal Mail branding system for ICON magazine. Style guides show logos, color, and typography. It's helpful to see the logo in context.

Usage guidelines are important with logo design so you know how - and how not - to use the logo. This way you can theoretically share the logo with anyone else and they'll use it correctly. Slack shares theirs online.

Includes black and white and color variations of logo, and icon only options.
Variations of the Slack logo. It should only be used in these combinations.
Visual representations of the logo used in correctly to show how it should be used.
How not to use the Slack logo from their brand guidelines.

Similarly, pattern libraries and UI kits provide user interface components to help lead to more consistent elements like buttons, navigation, and standard features used across projects. The goal of pattern libraries is to break down elements into reusable building blocks. (There's no need to reinvent the wheel each time!). Like style guides, pattern libraries help speed up the design process and foster consistency across work. They're beneficial when new team members come onboard. New employees don’t have to be trained on how to do something, as it should be clear through these resources.

As the field of UX has developed, the concept of design systems has emerged. Design systems unify teams around a common visual language by providing a collection of reusable design components and standards, which include typography, color, icons, and more. It takes style guides a step forward, providing more use and context cases.

Design systems allow teams to create a consistent, cohesive user experience across pages and interfaces. Teams save time by working towards standards that link designers and developers as well as ensure a global vision, look, and style for a product.

A picture of nachos, and all the categories related to design and component standards on the left navigation.
Trello Design named their design system Nachos. It includes their design principles, as well as how to handle style aspects, and components (buttons, cards, etc.).

A separate website devoted to different elements to manage the brand image.
Shopify's design system, "Polaris," includes guidelines for how to use components, visuals, resources, and more.

Many companies will build a website devoted to these resources, including anything from design elements to code, accessibility standards, and even research approaches. Every workplace has a different way of adapting design systems, so it's interesting to be inspired by what others are doing.

These design systems can help designers and developers navigate the visual and code language of a product. They help provide standards across a product from spacing between buttons, to the HEX color codes used in the branding and look of a product. Making changes becomes much easier and more consistent. As you can see, there's no one correct approach, and design systems are something we can expect to see continually refined and developed. Chances are, if you check these links six months from now, you'll probably discover some new additions or updates.

Let's recap!

  • Design systems, style guides, and pattern libraries are ways that teams can maintain standards in order to work faster, and have more consistent output.

  • Many companies choose to share their design systems publicly as a way of teaching and inspiring others.

  • Design systems are also a way to capture the spirit and communicate the personality of a brand through the elements that make it up. 

Example of certificate of achievement
Example of certificate of achievement