Many of the world’s leading brands have made their design systems public, contributing their ideas and processes to the design community at large.
Their design systems bring together branding, color, tone of voice, typography, animation, data visualization, and more to form the design language that power some of the biggest brands.
With unique approaches to design, some systems are named after food, and some are inspired by their users’ momentous drive to scale companies.
“Design systems allow designers to make better decisions.”
Giant brands like Apple and IBM have immense design systems that are broken down into video content and relatable use cases for designers to apply the wealth of information.
The incentive for building a design system is to align the foundations of a brand’s design language, streamline UX processes, and create a scalable UI language that allows designers to make better decisions and develop ideas faster.
Here is your guide to some of the best public design systems—with inspiration, resources, and lessons learned along the way.
Atlassian
Atlassian’s design system is about using personality to connect tools with people—or as they describe it, “practical with a wink.” It’s personal, peppy, and all about making a bold brand statement. “Dragon’s blood,” “cheezy blasters,” “hairy fairy,” “herky jerky,” and “sodium explosion” are all names of colors referenced in their secondary brand palette.
Accessibility is important to Atlassian and their design adheres to standard contrast ratios that ensure users with low vision can see and use their products. In essence, the Atlassian brand is optimistic and focused on being “human” over “humourous.” Read about their recent rebrand.
Shopify
Shopify’s design system is called Polaris. It’s a system that reflects Shopify’s global, immense presence. It’s about scalability and ease of use. With precision in their copy and design, Shopify is solely focused on the experience of their merchants.
It’s easy to see how Shopify helps businesses manage global complexity, with an experience that gives “even the most inexperienced entrepreneur the best chance to succeed.”
Accessibility and intentional design is paramount in Polaris. Scaling a business is like climbing a mountain, so their design decisions seek to make any user feel like they’re up the challenge.
IBM
With one of the most iconic design languages around, IBM presents an immense resource that includes data visualization, typography, animations, and information architecture.
The notion of “empowering experiences” drives IBM’s design system, staying elegant while helping users navigate, grow, and feel supported.
IBM’s design is timeless, precise, and yet approachable. Their resources distill every design concept into a real example, cutting through the almost overwhelming knowledge bank to explain best practice applications.
Airbnb
Airbnb’s design system is promoted as “conversational,” laid out in an article by Airbnb Design Language System Lead Karri Saarinen. Saarinen points out that design systems exist to ensure they can manage chaos and create better products.
A global community like Airbnb needs a unified approach to design that’s clear and promotes efficiency through beautiful design.
Related: Find out how Airbnb’s mission informs their product design
The resulting design language is a coherent yet iconic identity that will continue to evolve with Airbnb’s global growth. By reflecting on lessons learned, Saarinen also leaves some advice for designers embarking on a design system project.
Microsoft
Microsoft’s design system involves sensory experiences like depth, light, motion, and materials. Their design manifesto is compelling, and describes building the future of design while our digital world is at a precipice.
Fluent serves as a design system for interface experiences using voice and touch to develop atmosphere and sense of place. It’s a deep dive into how things that surround us in the real world translate into digital experiences.
Fluent is problem solving how to make intangible qualities into articulate, and thoughtful design.
MailChimp
MailChimp’s pattern library is a living, breathing guide for the MailChimp interface elements. It’s a resource for their team to view the “greatest hits collection of ideas” that MailChimp have adapted to build their platform.
While the pattern library is a valuable design learning tool, their content and tone guidelines are where the MailChimp personality shines through. Their writing resources are a goldmine example of how UX writing informs and shapes the design of a product.
Trello
Trello’s design system is called Nachos. As their favorite snack, Nachos serves as a tasty resource with all the right ingredients for design success. Yes, the system is also built on food puns.
Trello’s perspective on design is that everything should be taken step-by-step, like their product. Design for Trello is easy, collaborative, and fun. They seek to empower their users by making sure they communicate clearly enough for information to be accessible at a glance.
BuzzFeed
BuzzFeed’s CSS and component library is called Solid. Solid is presented as a “roadshow” of BuzzFeed design practices from across the web.
The fast-growing company needed a consistent design library, as new designers and product managers found themselves starting from scratch too often, and they had few approved design patterns to choose from.
Solid exists to bring engineers and designers close together for a better product, helping engineers influence design decisions, and placing designers in the code. In true BuzzFeed style you can read about Solid in the “WTF is Solid?” section.
Buffer
Buffer’s style guide is based on the principles of atomic design—the theory of small (atomic), independent parts working together to be apart of a larger structure. Since Buffer is famously a remote company with employees roaming the globe as digital nomads, this design concept is in line with their brand.
Their design system strives for consistency, clarity, and simplicity to maintain their product as an unobtrusive tool for managing content.
Apple
Apple’s design system collection is in-depth and interesting. Designers can watch video sessions and tutorials on crafting intuitive, forward-thinking experiences and find the latest resources on optimizing for iPhone X. These include designing for sound, writing the perfect push notification, and designing for a global audience.
With hours and hours in their video collection, a designer can get lost in Apple’s design inspiration. Apple also advocates designing for a global audience, with tips on marketing and accessibility measures that will differ across international markets.
Salesforce
Salesforce’s Lighting Design System is the unified design language for those building in the Salesforce ecosystem. With a focus on craftsmanship, Salesforce places importance on visual elegance, while allowing for efficiency and clarity in user experience.
When it comes to copy, Salesforce points out that while tone changes in context, brand personality should always be present.
You can also read through a series of articles outlining how they built their design system, and how you can implement it.
by Jess Thoms
Jess is a writer and brand strategist, focused on championing innovative ideas in tech, design, and marketing. She is the co-founder of conversation design studio Xandra, Inc.
