Some of the best design systems in the industry
10 Most interesting design systems in the industry
Anyone who remembers the path of recognition and affirmation of the theme of design systems in recent years, certainly can’t help but be amazed (and amazed) when any online search can find so many and such good examples of systems. In addition to the massive increase in articles on the subject in the design communities, the amount of design systems, public and available for consultation that you can find online cannot fail to amaze any curious person.
As well as the quantity, the quality of many of the available design systems is also very evident. In addition to an important contribution to the community that each team makes by sharing their system publicly (we are all inspired by something) all these examples are also a valuable contribution to anyone who may be starting this work at this time.
Some of the most interesting examples
The amount of available examples makes it difficult to understand, at least at first glance, which design systems are more interesting, if we look exclusively at the technical quality and extension of the system. It is certain that at some point the election of the “most interesting” will have everything to do with the personal criteria of those trying to make this selection. Even so, comparing the choices made by one and the other, it won’t be difficult to find some examples that are repeated and that’s where there may be an interesting pattern to watch out for.
Personally, if I had to answer the question “What are the most interesting design systems you know today?”, I confess that the answer would be some work. In addition to the recurring references when we talk about design systems, there are some other examples that I believe should not be forgotten in a similar list.
Trying to list some of the most interesting examples of design systems currently in the industry, some better known than others, the list could very well include:
- Material Design (Google)
- Carbon Design System (IBM)
- Atlassian Design System (Atlassian)
- Polaris (Shopify)
- Global Experience Language (BBC)
- Spectrum (Adobe)
- Goldman Sachs Design System (Goldman Sachs)
- Fiori Design Guidelines (SAP)
- Backpack (Skyscanner)
- Garden (Zendesk)
- Momentum Design (Cisco)
- Oxygen (Repsol)
- Lightning Design System (Salesforce)
- Lexicon (Liferay)
- Predix Design System (GE)
The most interesting of each example
Among so many, complete and interesting examples, it may also be important to try to understand in each design system reference, which are its most relevant assets. All these references are very complete systems and offer those who consult them very evolved views of what a design system can be.
Even so, analyzing in more detail, it is possible to find in each of the references, aspects that make each design system unique and differentiate it from the others.
Material Design (Google)
- Historically it was one of the industry’s first major design systems;
- It is one of the most complete design systems out there with all public documentation;
- Provides additional resources, plugins and materials to the system (icons, color palette creator, etc.);
- Specific instructions for creating different themes within the design system, also providing examples of themes;
- Excellent documentation for specific areas such as usability and accessibility.
Carbon Design System (IBM)
- Documentation and use of related scales for different system components (grids, typography, spacing, etc.);
- Excellent guidelines for data visualization components;
- Very complete onboarding documentation for designers and development;
- Definition and sharing of collaboration models and sending contributions to the evolution of the design system;
- Excellent documentation of each of the system components.
Atlassian Design System (Atlassian)
- Structural relationship between the brand and the design system;
- Very solid and concrete guidelines for the theme of accessibility;
- Recommendations for the design and use of illustrations;
- Excellent guidelines for writing and creating content;
- Very complete but very simple component documentation.
Polaris (Shopify)
- Guidelines for the work and definition of the information architecture of products;
- Useful information for defining and creating content;
- Relevant best practices documentation for data visualization components;
- Recommendations for using sound in experiments;
- Interactive models of each of the design system components.
Global Experience Language (BBC)
- Publication of thematic articles about the day-to-day challenges of building and using the design system and its relationship with the UX discipline;
- Simple and useful component documentation template;
- Excellent guidelines related to grids and their construction logic;
- Use of own typographic family throughout the system;
- Provision of “how to” practical guides for certain tasks or activities.
Spectrum (Adobe)
- Detailed description of the system evolution roadmap;
- Incorporation and documentation of the tokens design concept;
- Guidelines for the bi-directional design of components;
- Documentation of the responsive solution and grids used in the design system;
- Suggestions and checklists of good practices for the theme of accessibility.
Goldman Sachs Design System (Goldman Sachs)
- Guidelines for writing messages;
- Excellent recommendations and documentation on the use of grids;
- Documentation detail of each system component;
- Recommendations for using the design system with Figma;
- Practical examples of using spacing definitions in components.
Fiori Design Guidelines (SAP)
- Onboarding information and general overview of the entire design system proposal;
- Documentation and clarification of the system architecture;
- Definition of different themes (theming);
- Detailed guidelines and examples for the motion design dimension;
- Description of navigation models and variations.
Backpack (Skyscanner)
- Definitions and examples of using the tone of voice;
- Detailed inventory of all system design tokens;
- Availability of several versions of components (web, react, etc.);
- Accessibility guidelines for developers;
- Pretty complete and free iconographic family;
Garden (Zendesk)
- Quite simple but interesting documentation solution for more circumscribed systems;
- Guidelines for writing and creating content;
- Complete listing of specific words used in writing content and messages;
- Interactive models of each component of the design system;
- Detail of the button component documentation template.
Momentum Design (Cisco)
- Information on the principles and characteristics of the design system;
- Definition of the “personality” of the design system itself;
- Documentation of system tokens design;
- Library and iconography options;
- Rules for using each of the system components.
Oxygen (Repsol)
- Very simple and functional documentation model;
- Presentation of essential concepts and system architecture;
- Organization and documentation of the color palette;
- Different versions and documentation of components for web and app;
- Interactive models of each system component.
Lightning Design System (Salesforce)
- Detailed description of design system updates;
- Complete listing of all system design tokens;
- Documentation of good practices and recommendations for accessibility;
- Different types and models of iconography;
- Sketch plugin development.
Lexicon (Liferay)
- Recommendations for writing messages;
- Definition of transversal patterns for similar actions;
- Very simple and complete documentation of each system component;
- Concrete examples of pages using the design system;
- Evolution status of each part of the system.
Predix Design System (GE)
- Visual mosaic showing the various components of the system;
- Documentation of possible layout models and grids;
- Recommendations for creating “empty states”;
- Interactive model and with the various options of each component;
- Documentation of the various applications of color.
More examples to explore
Anyone who works in any of the areas of design knows that research work is a “never ending story”. A permanent and persistent task to try to find and systematize the best and most complete references in each of the topics, very relevant to everyday challenges.
In the case of design systems, even though the sharing of this list can provide plenty of references, it is essential not to limit the research to just these suggestions. To complete all the design system references suggested here, you can consult this Pinterest collection where you can find many more examples of systems.
Read and share more about at www.dxd.pt
