Design Systems 101

Shopify Polaris

Our style guide helps us collaborate across disciplines to build a great experience for all of Shopify's merchants. It promotes consistency, but it's not a blueprint. Be creative, explore, and evolve the system.

Pajamas Design System

GitLab is an open core product and has over 2000 community contributors. When everyone can contribute, consumers become contributors and we greatly increase the rate of human progress. To ensure that everyone can contribute to GitLab with confidence we provide everyone with the right resources and know-how.

design.gitlab.com

Carbon Design System

Carbon is IBM's open-source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. The component libraries give developers a collection of reusable components for building websites and user interfaces.

www.carbondesignsystem.com

Ant Design - The world's second most popular React UI framework

An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises

ant.design

Atlassian Design System

Design, develop, deliver. Use Atlassian's end-to-end design language to create simple, intuitive, and beautiful experiences.

atlassian.design

Color

ux.mailchimp.com

Liferay Lexicon | An Experience Language for Crafting Beautiful UI

Lexicon is a design language that provides a common framework for building interfaces within the Liferay product ecosystem.

liferay.design

Orbit | Open source design system for your next travel project

Open source design system for your next travel project

orbit.kiwi

Backpack

Backpack is Skyscanner's open-source design system.

backpack.github.io

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps teams build high quality digital experiences.

material.io

Spectrum, Adobe's design system

Spectrum provides interface components, resources, and tools to help teams work more efficiently and to make applications more consistent.

.pulse

Helping us build great products for our customers

pulse.heartbeat.ua

Clarity Design System

Clarity Design System. UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

clarity.design

klaufel/awesome-design-systems

A curated list of bookmarks, resources and articles about design systems focused on developers. A Design System is an ever evolving collection of reusable components, guided by rules that ensure consistency and speed, by being the single source of truth for any product development. See more design systems here!

github.com

Design System Checklist

An open-source checklist to help you plan, build and grow your design system.

designsystemchecklist.com

Create atomic design systems with Pattern Lab - Pattern Lab

Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components. Run the following command in your terminal and read the installation guide to get started: npm create pattern-lab

patternlab.io

Design Systems Repo

An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.

designsystemsrepo.com

alexpate/awesome-design-systems

Know a resource that isn't listed below? Feel free to create a new pull request. A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.

github.com

Building a Visual Language

Behind the scenes of our new design system This article is part of a series on our new Design Language System. Karri recently answered questions about this topic in a Designer News "Ask Me Anything" interview. Click here to read the transcript. Working in software development and design, we are often required to ship one-off solutions.

airbnb.design

Everything you need to know about Design Systems

The fundamental purpose of a Design System is to facilitate the work of the teams. So the first question we need to ask ourselves is not "What should I put inside my Design System?" but "Who is going to use it and how?".

uxdesign.cc

Design Systems

Here's Jeremy with some wise words about design systems. The generally-accepted definition of a design system is that it's the outer circle-it encompasses pattern libraries, style guides, and any other artefacts. But there's something more. Just because you have a collection of design patterns does

bradfrost.com

How to Build Design Systems

The design system is essentially a library of components guided by a clear set of standards and guidelines and is quite unlike a static style guide that contains spec references. We build the components as we discover the features of products, and continually add them to the library, for future use.

medium.muz.li

Design Systems vs. Pattern Libraries vs. Style Guides - What's the Difference?

The three concepts are connected but definitely not the same. Let's clarify definitions, visualize how they fit together, and discuss the major milestones in building a design system. First, let's get the definitions straight so we can learn how our concepts are connected and how they can be used to create better products.

www.uxpin.com