Design systems are far from a new concept. They are the modern manifestation of brand books and style guides. In the past, many of us can recall spending countless hours meticulously defining elements such as colors, typography, tone of voice, and image manipulation to create a flawlessly designed printed brand book. These efforts resulted in beautifully crafted PDFs that were widely shared across the organization.
Fast forward to the present day, design systems have become not only immensely popular but also the preferred method for digital product teams to ensure a cohesive user experience across an organization's entire ecosystem.
Taking on the task of creating a design system from the ground up or planning the next phase of your design system can be daunting to say the least. As with any significant endeavor, thorough research is essential, and drawing inspiration from the best is incredibly valuable. To support you in creating a design system that perfectly aligns with your organization's needs, we have handpicked some excellent examples to guide you through the process.
Design System Examples
Before we dive into the individual examples, it’s a good idea to explain that most design systems have commonality and there is a general framework that you’ll soon recognise. For example, most design systems will consist of Tokens, Components, Patterns, Templates, Resources and Guidelines. Let’s dive in and start looking at the big hitters.
Lightning by Salesforce
The Lightning team had a huge influence on popularizing the concept of tokens, so it’s no surprise to see a link to the tokens page as soon as you scroll to their first area of content: “Design System Fundamentals”. Like many other design systems, Lightning focuses on the fundamentals (or foundations), and in response to user feedback has curated the most valuable content in this section, encompassing Component Blueprints, Tokens, Design Guidelines, and Tools. Immediately following this, Lightning brings great emphasis to their values and principles. The values and principles of your design system are immensely important as they not only set an expectation of the design system itself but also the way in which you should consume and deliver experiences when interacting and using it.
Lightning also offers a "What's new" section. Within this space, they document their product release notes, ensuring all users are well-informed and up-to-date with the latest developments in the design system. This transparency and communication help users stay in the loop and make the most of the design system's capabilities.
"Getting Started" guides in design systems consistently remain a popular and highly utilized resource. They play a crucial role in enabling designers, engineers, and product owners – the most common user types – to quickly familiarize themselves with the system and efficiently deliver their work using its resources. Lightning takes a light-touch approach here by directing users to more in-depth sections of the design system for exploration. One standout feature is their searchable icon library, providing great utility as users effortlessly download the icons and seamlessly integrate them into Figma. As with all the big hitters, Lightning has a solid framework and as their name suggests, it’s like lightning to get started.
By exploring the typical design system framework, diving into the Lightning design system, and reading this review, you should now have a well-rounded understanding of the key elements that constitute a design system thus far.
Now that you have an understanding, let's compare a few features of IBM's Carbon and Atlassian's design system. By examining these two prominent design systems, we can gain further insights into the unique approaches they take and the benefits they offer to their respective users.
Carbon by IBM vs. Atlassian Design
Both Carbon and Atlassian Design have been highly influential and had a tremendous impact on the design systems community. They have set a high standard for all of us to strive for. At Knapsack, it's rare for us to encounter teams that haven't dedicated time to research and review these prestigious examples of design systems.
The first thing to note is that Carbon breaks down the user experience beautifully. The division of content based on user types is a simple yet highly effective way to cater to the needs of the organization and its partners. With dedicated sections for designing, developing, contributing, and migrating, the design system becomes immediately relatable to individuals in their respective job roles. This thoughtful organization ensures that users can quickly find the information and resources most relevant to their tasks and responsibilities. On the other hand, Atlassian takes a more common framework approach, starting with Brand and featuring Foundations, Tokens, Components, Content, Patterns and Resources in the top primary navigation.
Content is an often overlooked area of design systems and Atlassian has put a great deal of time and effort into it. They offer definitions, guides and styles exclusively for it. Without an approach defined for content, components and patterns could feel unfinished or used incorrectly with the wrong tone of voice. In contrast, Carbon takes a lighter approach to content, making it less visible and prominent in their system. While they do cover important subjects like accessibility, content takes a bit of a back seat in the Carbon design system.
Contribution is undoubtedly one of the most widely discussed topics in the design system landscape. When comparing Carbon and Atlassian, their approaches couldn't be more polar opposite. Carbon can be seen as a community-driven and open design system, embracing contributions from various sources. On the other hand, Atlassian takes a deliberately strict and governed approach, maintaining tight control over the contributions to their design system.
Carbon's commitment to "Working in the open" is made clear through a dedicated section, which leverages the power of GitHub issues serving as one of the best ways to encourage and manage various types of contributions. Although some might consider GitHub a potential barrier to entry for those unfamiliar with it, setting up an account is straightforward and allows contributors to dive right in and start contributing. This inclusive approach fosters a collaborative and transparent environment, empowering individuals from diverse backgrounds and skill levels to actively participate in shaping the design system.
Atlassian takes a more restrictive approach to contribution, limiting it exclusively to Atlassians. They acknowledge that currently, it is difficult to contribute to the design system, but they mention their ongoing efforts to improve this situation. While they do provide some explanation for their approach, it remains more of a behind closed doors and closed book process, offering limited transparency to external contributors.
Both Carbon and Atlassian's design systems are incredibly mature and influential, yet they have very different approaches. Their differing strategies reflect the diverse philosophies and priorities that organizations adopt when it comes to managing and evolving their design systems. These remarkable examples demonstrate the adaptability and flexibility of design systems, allowing each organization to tailor their approach to best suit their specific needs and goals.
Nord Health Design
It's always worth researching and reviewing lesser-known design systems because they can be just as impressive. Let's take Nord Health Design, for example. You may have never heard of them, but they've crafted an incredible experience that doesn't shy away from perfection. The first thing you’ll feel when you land on the Nord Health design system is welcome, comfortable and familiar with your surroundings.
The main focus initially is to "Get started," and upon navigating to that section, you are immediately presented with a well-organized list of guidelines and development packages. It's evident that they truly understand their audience. A delightful subtle addition is the tiny section about browser support, which adds a nice touch to the overall experience.
We love seeing a design system roadmap, and Nord Health Design truly delivers with their "What's New" section. Not only does it feature an essential changelog that every design system should have, but it overdelivers by including monthly updates, migration guidelines, and a roadmap that clearly marks completed items. It may seem simple, but it's undeniably effective in keeping users informed and engaged. This level of transparency and communication undoubtedly enhances the user experience and contributes to the success of their design system.
One last thing to mention about Nord Health Design is the component pages. The provision and segregation of the content is in a class of its own. The dedicated team has gone above and beyond, ensuring that these pages include not only the components themselves but also important details such as content guidelines, dependencies, and integration guidelines. This comprehensive approach adds immense value and usability to their design system, catering to the diverse needs of designers, developers, and stakeholders.
Conclusion
These design systems are just some examples of the wide range of design systems that exist today. If you're looking to build a design system for your team or brand, researching different systems that align with your design philosophy can be beneficial. Studying these design systems and concepts can help in creating an extensive and cohesive design system that works for your brand. From accessibility to scalability, these design systems offer comprehensive libraries of design elements, best practices, tools, and guidelines to help build cohesive design systems.
