featured image 20 design siystem examples

Jad Limcaco is a UI/UX designer from Silicon Valley. He is also a creator of Design Systems Repo, an online repository of publicly available design systems, pattern libraries, and style guides. So, let us take a bit closer look at what this labor of love has to offer to designers and people who think alike.

Design Systems Repo was born out of the Jad Limcaco’s personal collection of websites, articles, tools, and systems carefully curated for the purpose of his own work. Since it became so useful to him in his everyday desugn process, he decided to build a dedicated website and share his collection with designers and developers around the globe.

Fun fact: Jad Limcaco had also founded the Design Informer, a blog about web and graphic design, but he decided to sell it to Smashing Magazine after a while, due to time constraints and school obligations.

Within this repository, you can find invaluable insights into the systems, patterns, and guidelines created by some of the world’s best known companies and organizations.

 

Why Would You Need a Design System In the First Place?

Design system represents a series of guided standards and libraries of reusable components for the design and development of digital products. So, anyone who deals with user research and strategy, UX writing, UI/UX design, and front-end development within a larger team should have a standardized design system to lean on in their everyday work.

Usually, a team smaller than 8 people does not need to have its design process standardized, but as the team and company scale up, design system is definitely something that should be considered, developed, and consistently applied.

Design systems may include UI components, UX guidelines, design principles, pattern libraries, coding standards, development methodology, design toolkits, style guides, code repositories, referential resources, or customizable toolsets. It is something that can help you have a more productive team and accomplish a higher level of product consistency.

Having some of the world’s best design system examples presented in one place, along with related articles, tools, and guides, well, that is definitely something that can get you inspired and motivated to start building your own system and benefit a ton out of it.

 

20 Best Design System Examples

Here, we present you the curated list of 20 excellent examples from Design Systems Repo that are built by companies such as Apple, HubSpot, Google, Hewlett Packard, Atlassian, Salesforce, GitHub, Mailchimp, BBC, and others.

Explore them, learn from them, get inspired by them.

 


Atlassian Design Language

Atlassian design language system screenshot


Pajamas Design System by GitLab

GitLab Pajamas open source design system


Photon Design System by Mozilla Firefox

Mozilla Firefox Photon design system screenshot


Human Interface Guidelines by Apple

Apple Human Interface guidelines addaprtivity and layout screenshot


Mailchimp Patterns

Mailchimp pattern library colors screenshot


Nachos Design System by Trello

Trello Nachos design System screenshot


Primer Design System by GitHub

GitHub primer design system homepage


Google Material Design

Google material design screenshot

 


Rizzo Styleguide by Lonely Planet

Rizzo styleguide lonely planet destination icons screenshot


IBM Design Language

IBM design language homepage


Stacks by Stack Overflow

Stack overflow stacks design system


Audi UI

Audi UI system homepage


BBC Global Experience Language

BBC Global Experience language design system


Canvas Design System by HubSpot

Hubspot Canvas system design styles


Ant Design by Ant Finances

Ant Design finances homepage screenshot


Australian Government Design System

Australian government design system components screenshot


Grommet Design System by Hewlett Packard

Hewlett packard Grommet design system screenshot


Marvel Styleguide

Marvel Styleguide avatars screenshot


Zendesk Garden

Zendesk garden system CSS components screenshot


Salesforce Lightning Design System

Salesforce Lightning design system screenshot

 


Interested in UI/UX design? Read on:

Nađa Božović

Inspired by original narratives and amazed by effective visuals. Enjoys diving deep into the story research. A lifelong learner and an eternal optimist.