Main Pillars of a Design System
Purpose and shared values
Right from the start, it’s important to understand and align the design team with a set of clear goals. Where are you actually going, and why? Make sure the team understands the values of the brand or product in order to stick to the brand objectives. Not only will this keep consistency with the product, but it will also bring the designers together for a more cohesive group.
Design principles
Next, you need to explore your design principles. What exactly are you wanting to make, and what should it look like? Put together guides on the purpose of the product to ensure your team really understands what you are creating, so they can make more meaningful design decisions.
Brand language and identity
Essential elements of a style guide include colors, fonts, icons, shapes, animation, voice, the use of the company logo, and more. It’s important to document these and establish rules and guidelines so that teams use the right combination of elements. They all represent your brand and help it to be unique and instantly recognizable. Creating a consistent visual design among your range of products — whether it’s a desktop version, mobile app, or a voice interface — will lead to a better customer experience.
Components
Components can be seen as LEGO blocks that are built out of all the other parts covered above. They’re the interface and UI elements — for example, call-to-action-buttons, form fields, and checkboxes — that make up the heart of the design system. Created by designers and coded by developers, they minimize the effort required to build a product. By reusing as many parts as possible, you can speed up the workflow, save time, and avoid duplication, as interface elements don’t need to be recreated from scratch. Components are also great for rapid prototyping but their functional behavior must always be specified.
Patterns
Design patterns, meanwhile, are the building instructions or recommendations that you need to use the components effectively across all your products. Standardized patterns also create familiarity, which means things will be quicker and easier for users. It helps them understand your services and establishes trust.
For example, the same sign-up form containing two fields and a call-to-action button can be used in a range of products, both on the desktop and on mobile.
Documentation
Finally, you need some documentation, which describes the design system itself. It includes what the product should look and feel like, use cases for UI patterns, correct typographic scales, code standards, and best practices, and more.
Consider bringing design and implementation together in the documentation, as it’ll help designers to know about the implementation and engineers about design guidelines, which ensures both parties make better decisions for the product and its users.
Documentation, which can vary in terms of comprehensiveness and detail, helps the product team use the styles, components, and patterns correctly. Shopify’s Polaris documentation, for example, features accessibility guidelines to improve readability and provide structure to screen reader users.
