Ten Design System Examples to Inspire Your Future Design System
Whether you're creating your own design system or looking for inspiration, these 10 design system examples are the industry's best.
.png)
Whether you’re looking for inspiration or a blueprint for starting your own design system, a great place to start is the impressive design systems created by some of today’s most iconic brands and companies.
Building your own design system is a complex process that takes time, energy, and the collaborative involvement of many folks on your team. But as they say—nothing in the world is worth having if it doesn’t take effort… and the effort required to create a complete design system certainly qualifies. Let’s take a look at some design system examples across industries ranging from retail to tech to higher ed.
But first, what is a design system, and why should I have one?
Ask yourself: have you ever lamented the seemingly endless back and forth between design teams, product teams, marketing, development, and all the other stakeholders developing a product as you all work to solve a problem or implement a new feature within said product?
The real question is, who hasn’t?
Enter: design systems.
In its most basic forum, a design system is a massive library and single source of truth for all the reusable building blocks a team uses to create a user experience. While the word ‘design’ is in the term itself, a design system isn’t just for the design team. It’s for product pros, developers, marketers—anyone whose work touches the product. It exists to help companies create a cohesive, unified, aligned experience within their product, by empowering all team members with the same resources, standards, and rules of engagement.
With a design system, a company can eliminate the frustrating back and forth between the aforementioned teams, reduce chaos, and keep everyone on the same page as their work remains consistent and uniform.
Now that we’re clear on what a design system is, let’s dig into some design system examples.
Design system examples
Salesforce’s Lightning Design System
https://www.lightningdesignsystem.com/
Salesforce writes on its Lightning Design System site, “Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.” We love their approach to empowering individual creators with tools specific to their trade, and also deeply appreciate the clean, easy-to-navigate layout similar to IBM’s that makes exploring this system a joy.
Hewlett Packard’s Grommet
Built by Hewlett Packard and described as a reach-based framework that provides accessibility, modularity, responsiveness, and theming for app development, Grommet is a deeply comprehensive system that provides you with a design interface for using grommet-approved components. We especially appreciate its attention to accessibility and responsiveness.
The BBC’s GEL
If you’re the BBC, you’ve got, well… probably a billion+ components and UI elements floating around all your digital experiences. So, they developed GEL, or Global Experience Language, to ensure uniformity and consistency across every one of those billion+ experiences.
Apple’s Human Interface Guidelines
https://developer.apple.com/design/
You cannot talk about design without talking about Apple, right? With their human interface guidelines, creators across the world can use the same vast library to design and build apps that integrate seamlessly into Apple’s interface.
IBM’s Design Language
https://www.ibm.com/design/language/
If you’re looking for an incredibly comprehensive design system that is also an absolute joy to navigate and explore, look no further than IBM’s Design Language. From typography to layout to even data visualizations, IBM’s Design Language is laid out beautifully and is crafted with equally beautiful language to help the word nerds among us more deeply understand each piece of the system.
Google’s Material Design
Google bills Material as an adaptable system of guidelines, components, and tools that support the best practices of user interface design. The system is backed by open-source code and aims to help streamline the work between designers and developers.
Indiana University’s Rivet
You usually don’t think of higher education as being a hub for leading-edge user experiences, but at Indiana University, Rivet helps keep their whole team working better together—and creates a seamless, consistent user experience as a result. They release new features regularly and boast an easy-to-navigate site with well-made tutorials for using Rivet. And, they let you peruse past versions of the design system, to better understand how it’s evolved over time.
Buzzfeed’s Solid
“Wtf is Solid” is the opening line on Buzzfeed’s design system site—talk about on-brand. They write that Solid uses “immutable, atomic CSS classes to rapidly prototype and develop features, providing consistent styling options along with the flexibility to create new layouts and designs without the need to write additional CSS.” Well said, Buzzfeed.
U.S. Web Design System
https://designsystem.digital.gov/
Yes, the U.S. government has a design system. Shocking, right? The U.S. Web Design System features an active open-source community of engineers, content folks, designers, and contributors who work both within and outside of the U.S. government to support dozens of agencies and nearly 200 sites.
Atlassian’s Design System
Atlassian’s Design System includes often-seen elements like kits, guides, templates, and much more, but what makes Atlassian’s a bit different is that it goes beyond visual components and also includes a substantial amount of information about the brand’s voice, tone, content guidelines, and writing style.
There’s no one-size-fits-all for a design system, so hopefully, the examples above (and how different they all are, both in structure and content) will help you on your path to developing your own unique system. Happy creating!
