Design system
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
Last updated
Was this helpful?
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
Last updated
Was this helpful?
A design system is a series of reusable elements and guidelines that allow teams to design and develop a product following predetermined standards.
Style guides contain specific implementation guidelines, visual references, and for creating interfaces or other design deliverables. The most-common style guides tend to focus on branding (colors, typography, trademarks, logos, and print media), but style guides also offer guidance on content (such as and language recommendations) and visual- and interaction-design standards (also known as ). These guidelines are sometimes incorporated into the component library as well, to provide relevant guidance in context.
Component libraries (also known as design libraries) are what many people associate with design systems: these thorough libraries house predetermined, reusable UI elements and serve as a one-stop shop for designers and developers alike to learn about and implement specific UI elements. Creating these libraries takes significant time and resources. In addition to visual examples of components, they include:
Component name: a specific and unique UI component name, to avoid miscommunication between designers and developers
Description: a clear explanation for what this element is and how it is typically used, occasionally accompanied by do’s and don’ts for context and clarification
Attributes: variables or adjustments that can be made to customize or adapt the component for specific needs (i.e., color, size, shape, copy)
State: recommended defaults and the subsequent changes in appearance
Code snippets: the actual code excerpt for the element (some design systems go as far as sharing multiple examples and offering a “sandbox” environment to try out different component customizations)
Front-end & backend frameworks to implement the library (if applicable), to avoid painful and unnecessary debugging
Sometimes, the terms ‘component library’ and ‘pattern library’ are used synonymously; however, there is a distinction between these two types of libraries. Component libraries specify individual UI elements, while pattern libraries feature collections of UI-element groupings or layouts. Pattern libraries are often thought of as less robust compared to component libraries, but they can be as thorough or as high-level as needed. They typically feature content structures, layouts, and/or templates. Much like the components, the patterns are meant to be reused and adapted.
by Apple
by Google
by IBM
by the U.S. Digital Service
by Atlassian
by The Goldman Sachs
by Microsoft
by Salesforce