Swiss Design Systems
Design Systems
Books & Articles
Videos & Talks
Tools
About
Contact
Buy me a Coffee
Submit
Design System Examples
Exploring different
design system examples
can provide valuable insights how companies maintain consistency in their UI/UX design. Enjoy the examples. ✌🏽
The Swiss Post
Design System pattern library for a unified and accessible user experience across the web platform.
View Website
Swiss Post Design System
Yelp Cookbook
is Yelp's design system for digital experiences, and follows Brad Frost's Atomic Design methodology.
View Website
Yelp Design System
AXA Design System
supports the best practices of user interface design. It contains all the basic elements to kickstart your project!
View Website
AXA Design System
Nord.
Design, build, and ship coherent experiences with Nordhealth’s design system.
View Website
Nord Design System
Bold_
is an open source project, so feel free to contribute, open issues if you find any bugs or implement new features.
View Website
bold_ Design System
Primar
is a set of guidelines, principles, and patterns for designing and building UI at GitHub.
View Website
Primar Design System
The
Washington Post Design System (WPDS)
is a growing library of design tokens and interactive components purpose-built for washingtonpost.com.
View Website
WP Design System
Wise Design
helps to create a distinct, accessible and consistent Wise experience that works for everyone, everywhere.
View Website
Wise Design System
Ant Design
helps designers and developers building beautiful products more flexible.
View Website
Ant Design
Reach UI
seeks to become the accessible foundation of your React-based design system.
View Website
Reach UI
The
Helios Design System
from HashiCorp provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.
View Website
Helios Design System
Protocol
is a design system for Mozilla and Firefox websites. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility.
View Website
Mozilla Design System
Decathlon Design System
helps us to build a consistent and quality user experience through our different ecosystems.
View Website
Decathlon Design System
Carbon
is IBM’s open source design system for products and digital experiences. The system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
View Website
Carbon Design System
The Material Design 3
is the latest version of Google’s open-source design system. Design and build beautiful, usable products with Material 3.
Download Figma
Material Design 3
Alongside information about their UX principles and accessibility, you can find out everything about the design systems for SBB websites and mobile apps..
View Website
Swiss Federal Railways SBB
Uber's Base design system was created to promote a centralized library of reusable UI components for Designers and Engineers.
View Figma File
Uber Base Design System
Starbucks kinda different new design system that maintains the core elements of their brand.
View Website
Starbucks Brand Expression
The Atlassian’s design system ist simple, intuitive and beautiful. Check it out.
View Website
Atlassian
Heroku provides services and tools to build, run, and scale web applications.
View Website
Herokai
The Audi CI Portal is a direct, uncomplicated way for the creative handling of their brand.
View Website
Audi
Evergreen is a React UI Framework for building ambitious products on the web. Discover Evergreen, Segment’s design system.
View Website
Evergreen
Clarity is a scalable, customizable, open source design system bolstered by the people that build with it, the people we build it for, and the community that makes us who we are.
View Website
Clarity Design System
HubSpot Canvas is the design system that is used by HubSpot to build their products.
View Website
Canvas Hubspot
The
Ubuntu Brand Guidelines
exist so we can all communicate Ubuntu with the same precision we use to make it.
View
design.ubuntu.com
The Airbnb design system is most parts platform agnostic. Most components work and look exactly the same on iOS and Android.
View Website
Airbnb Design
This is the kit for creating Microsoft Fluent experiences on iOS. The components in this kit are the building blocks of what make Microsoft products feel like Microsoft products on iOS.
Download Figma
Microsoft Fluent iOS
Uber's guidelines cover 9 elements: logo, color, composition, iconography, illustration, motion, photography, tone of voice, and typography.
View Website
Brand Design System
Mailchimp pattern library used to build their application.
View Website
Mailchimp Pattern Library
Salesforce has put out their own Lightning Design System that allows everyone working with content management systems to learn and benefit from its main features.
View Website
Lightning Design System
Alongside information about their UX principles and accessibility, you can find out everything about the design systems for SBB websites and mobile apps..
View Website
Swiss Federal Railways SBB
The Pajamas design system is
GitLab's
Design System.
View Website
GitLab Design System
Uber's Base design system was created to promote a centralized library of reusable UI components for Designers and Engineers.
View Figma File
Uber Base Design System
The Atlassian’s design system ist simple, intuitive and beautiful. Check it out.
View Website
Atlassian
A Handbook about Help Scount's Brand, Ressources to download and Values to explore.
View Website
Help Scout
Heroku provides services and tools to build, run, and scale web applications.
View Website
Herokai
Evergreen is a React UI Framework for building ambitious products on the web. Discover Evergreen, Segment’s design system.
View Website
Evergreen
Clarity is a scalable, customizable, open source design system bolstered by the people that build with it, the people we build it for, and the community that makes us who we are.
View Website
Clarity Design System
HubSpot Canvas is the design system that is used by HubSpot to build their products.
View Website
Canvas Hubspot
Pluralsight Design System – A cohesive design language, shared vocabulary, and building block components to accelerate the building of Pluralsight products.
View Website
Pluralsight Design System
Paste Design System – Build inclusive, delightful customer experiences with Twilio’s open-source design system.
View Website
Pase Design System by Twilio
The NL Design System is a collaborative project developed by specialists from various Dutch government organizations.
View Website
NL Design System
The Gumroad Design System in a Figma File. Styles, Brand, Icons, Illustrations and more.
View Website
Gumroad Design System
