Design Systems Part 1

Screen Shot 2018-04-13 at 3.03.53 PM.png

The problem

The larger the project, the more governance is needed to keep the brand identity consistent across platforms. On smaller projects you may be able to get away with a simple static style guide to keep as a reference to the design team. This would likely identify the color pallet, header and button sizes. Since the team and application are small there isn’t much need for extensive documentation. However, for larger entities brand consistency across platform can become difficult. Multi national design teams, websites, apps, and micro sites all need to have the same on brand look & feel. To add to the confusion, code releases every few weeks that build upon the existing code base can quickly make an existing style guide out of date.

The Solution

A design system allows the design team to have a single, up to date, web based source of truth available for the entire company. For example, a designer in Monterrey building a micro site can use the same design patterns and code snippets as a designer in DC. Add to this a modular pattern library and now you have a consistent, cross platform, brand identity that needs minimal maintenance.

Design System vs. Style Guide vs. Pattern Library

A design system is a complete compilation of reusable design resources and patterns that encompass a brands’ digital identity. What sets a design system apart from a style guide is that a design system houses real “living” code along with UI toolkits and brand guidelines. Think of a design system as encompassing both a living style guide and a pattern library. A style guide is typically static in nature and provides guidelines on brand elements such as color, iconography, and typography. A pattern library is also a subset of a design system that houses design patterns available for use within a certain brand identity.