7 best design systems to inspire your organization
A design system is an online toolkit that contains reusable components, patterns, guidelines, and code for building websites, products, and apps. If your organization doesn’t have a design system — or needs to revitalize an existing one — here are seven inspiring examples from leading brands.
Key takeaways
-
A great design system should be comprehensive, accessible within your organization, and scalable to grow with your company, serving as a living resource that facilitates consistency and efficiency across branding and user experience efforts.
-
Great design systems like those from Apple, Atlassian, BBC, Pinterest, Salesforce, Telefónica, and Thumbtack demonstrate that effective design systems should be comprehensive, accessible, and scalable.
-
They include detailed documentation, user-friendly interfaces, and support for multiple brands, empowering organizations to maintain brand consistency, foster collaboration, and enhance usability across all digital platforms.
What makes a great design system?
Successful design systems empower your organization and help you uphold a consistent brand and user experience. There are several hallmarks of an engaging design system, and the best ones check all these boxes:
- Comprehensive: The perfect design systems contain many reusable components and patterns. They also provide detailed guidelines to help users understand when and how to use various assets. An extensive system shows that the organization is well aware of the digital elements its teams will need to replicate and has invested time in creating these reusable assets to avoid duplicate work.
- Open: While your design system doesn’t need to be open to the whole world, it should be easily accessible within your organization. Don’t make it impossible to find or require new users to jump through hoops to engage with it. Otherwise, there’s a high chance people won’t use it, which means they won’t get value from it.
- Scalable: A great design system grows with your organization, and you should be able to add components for sub-brands and new products easily. Think of it as a living resource rather than something you create once and never revisit.
The examples below do all this very well. Additionally, they all have unique aspects, components, and principles that make their design system stand out.
Design system examples to inspire you
Apple Human Interface Guidelines
Apple’s Human Interface Guidelines contain guidelines and reusable components to help teams design a great experience for any Apple platform. They can be used by Apple’s designers and anyone creating apps or games for the Apple ecosystem.
Key features of the Apple design system
- New and updated resources and assets are highlighted at the top of the design system
- Guidelines, best practices, and resources organized by platform
- Reusable components and patterns organized into categories by use case
- A clean and organized left-hand menu makes it easy to navigate
- Components with detailed information and examples illustrate how and when to use it
- A changelog for reusable components and patterns allows users to check that they’re working with the latest version
Why the Apple design system inspires
- Guidelines are organized by platform, so users can access the correct resources, whether they’re designing for iPhone, Apple Watch, Mac, or any other Apple product.
- A specific section on privacy shows that Apple keeps up with user needs and priorities.
- Guideline sections on inclusion and accessibility help UX and UI developers create experiences that work for everyone.
Top lessons from the Apple design system
- Consider how to organize patterns, components, and guidelines within your design system.
- Create areas within your design system for different platforms, such as one area for app design and one for website design.
- Provide detailed guidance alongside each component or pattern — not just the reusable code snippets.
Atlassian
Atlassian’s design system provides a one-stop shop for its team to design and develop on-brand product experiences. It documents the company’s UI and UX foundational guidelines and houses reusable components, patterns, and standards.
Key features of the Atlassian design system
- Content design guidelines on the Atlassian voice and tone, UI patterns, and inclusive language
- A dedicated section on the Atlassian brand
- Guidelines for contributing to the design system
- Indicators to show when elements are outdated (marked as deprecated), in progress (marked as beta), or near their end of life (marked to be used with caution)
Why the Atlassian design system inspires
- Contribution guidelines help Atlassian teams embrace the collaborative and ever-evolving nature of a design system.
- A whole section on the brand ensures UX and UI developers create digital experiences that feel like an authentic representation of the Atlassian brand.
- Reusable components all provide visual examples, usage guidelines, code snippets, and a changelog.
BBC
The BBC’s GEL (Global Experience Language) is part design system and part blog that allows people to learn about UI and UX design. It not only houses reusable design patterns and components but also shares articles about how to create a design system and lists some of the key skills and qualities that make a good UI/UX designer.
Key features of the BBC design system
- Articles from the design system team
- Playbooks to help users solve common challenges that come up when working as a UI or UX designer
- How-to guides for designing for different platforms and experiences
- Reusable design patterns and components for web and app development
- Examples of reusable patterns in action (links to site or app) to understand their function and appearance
Why the BBC design system inspires
- Education on user experience and design — it’s more than just a collection of components and resources.
- How-to guides are a helpful resource, whether you’re a member of the BBC team or an external designer or developer working on a different project.
- The pattern-in-action section of the components library is more useful than simply showing a few screenshots of examples.
Top lessons from the BBC design system
- Include links to live examples of your components, patterns, or other elements.
- An open design system (that isn’t password protected) can be a valuable resource that other organizations look to as an example for their teams to learn from.
Pinterest’s design system includes component documentation and guidelines to enable the creation of harmonious digital experiences. It’s built for cross-functional team members — such as designers, engineers, and product managers — and in close collaboration with the brand team to maintain Pinterest’s identity and aesthetic.
Key features of the Pinterest design system
- Library of reusable components for web, Apple, and Android, which can be organized alphabetically or by category
- Components have a quality checklist to see if they’re reactive, accessible, and adaptive
- The area dedicated to team support offers resources and guidelines on using the design system — including making contributions, requesting support, and asking for components
- Roadmap showing future work of the design system team
Why the Pinterest design system inspires
- Clear guidelines for how Pinterest team members can foster the collaborative nature of the design system.
- Dedicated sections show the roadmap and illustrate what’s recently changed and what’s coming up.
- Reusable components have information on accessibility so you can check if the components you’re using have been tested against the latest accessibility standards.
Top lessons from the Pinterest design system
- Add a quality checklist to your components to give users an at-a-glance overview of the components that are ready to use.
- Consider different ways to search through components — how you organize elements may not be how users search for them.
- Offer lots of resources for team members to use your design system successfully and contribute to improving it.
Salesforce
The Salesforce Lightning Design System provides guidelines, resources, and reusable components to help users create consistent and high-quality digital experiences across all Salesforce products.
Key features of the Salesforce design system
- A full section on moving design elements — not just for static elements
- A tools area linking to everything relevant to working with the Salesforce Lightning Design System, including a validator to help users write design system-compliant code
- Reusable patterns, components, icons, and design tokens
Why the Salesforce design system inspires
- A getting-started section provides guidelines tailored for developers and designers, showing a great awareness of who uses the design system and their specific needs.
- A full section on accessibility includes straightforward explanations to help users understand how to use the design system to create accessible systems and experiences.
- The downloadable icons library is an additional element not seen in many other design systems, but it acknowledges that designers and developers will use these elements frequently. Bringing them into the central space saves time switching between tools.
Top lessons from the Salesforce design system
- Understand how your users work and what they need, and adapt your design system to those needs — for example, by linking to UI kits for Sketch or Figma or adding a library of commonly used assets like logos and icons.
- Add an FAQ section if your design system team gets asked the same questions often.
- Offer guidelines and resources for different users, such as front-end and back-end developers, designers, or product managers.
Telefónica
The Telefónica design system provides resources and reusable components for designers and developers to create digital experiences for any of its 16 brands in their ecosystems.
Key features of the Telefónica design system
- A get-started section with dedicated onboarding information and resources for designers and developers
- A one-click switch to adapt components and patterns to each of Telefónica’s different brands
- A components library with an overview of the status of each item in the library to see what’s ready to use and what’s in progress
- Clear guidelines for how users can contribute to the design system
Why the Telefónica design system inspires
- Telefónica demonstrates how a multi-brand organization can create a design system with reusable components that work for all its brands.
- A get-started section provides different guidelines for developers and designers, showing a strong understanding of who uses the design system and their needs.
- The platform encourages users to join their design system community and promotes a company-wide culture of engagement.
Top lessons from the Telefónica design system
- Create a design system for multiple brands — you don’t need separate ones for each brand.
- Look for common patterns and components that can be reused across brands rather than focusing on the differences between the brands.
- Offer guidelines and resources for different user types.
Thumbtack
Thumbprint is the design system for Thumbtack products. It includes guidelines, components, and tokens to help users streamline the design and development process at Thumbtack.
Key features of the Thumbtack design system
- A components library with an overview of the item status (e.g., ready, in progress, or deprecated) of each item in the library
- Information and resources for product designers, developers, and content designers to help them use the design system to create consistent digital experiences
- A library of downloadable icons
- Clear guidelines on different ways users can contribute to the Thumbtack design system
Why the Thumbtack design system inspires
- Users can learn about the different ways to contribute to the design system — from fixing small bugs to suggesting new components.
- A full section on content design shows an understanding that a product is more than just how it looks and works — the words on the page matter, too.
- Updates are shared in release notes, which are detailed and easy to understand because they’re written in plain language rather than technical jargon.
Top lessons from the Thumbtack design system
- Make your design system updates transparent and easy for everyone to understand, even if they don’t have a technical background.
- Offer different ways for users to contribute to your design system. Not everyone has the capacity to work on huge projects like building new components, but they may suggest edits or fix bugs.
Inspired to start building your own design system?
A design system gives your teams a shared language, tools, and resources to create consistent, on-brand digital customer experiences. It can streamline teamwork and cross-team collaboration — and even make it easier to scale your development work as the company grows.
But before you jump right in and start building your own design system, you need to lay solid foundations for its success. Start by understanding who will use it and what they’ll need. Then, take a closer look at the design systems we featured here. These best-in-class examples can be a great source of inspiration for working out what solutions are possible and then shaping them to fit your organization.