Coder Social home page Coder Social logo

awesome-design-systems's Introduction

cover

Contributions Welcome

Know a resource that isn't listed below? Feel free to create a new pull request, or open an issue.

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'.


Tags:

  • Components: Contains coded patterns and examples.
  • Voice & Tone: Provides guidance on how language should be used.
  • Designers Kit: Includes a Sketch/Photoshop/Figma/etc. file for designers.
  • Source code: Publically viewable source code

Components Voice & Tone Designers Kit Source code *
Alfa-Bank ๐Ÿ‘ ๐Ÿ‘ :octocat:
Alibaba Ant Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Appear Here Styleguide ๐Ÿ‘ :octocat:
Apple Developer Design Guidelines ๐Ÿ‘
Aragon UI ๐Ÿ‘ :octocat:
Artsy Reaction ๐Ÿ‘ :octocat:
Atlassian Design Language ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Audi UI Kit ๐Ÿ‘ ๐Ÿ‘
Aurora (Government of Canada) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Backpack (Skyscanner) ๐Ÿ‘ ๐Ÿ‘ :octocat:
BBC GEL (Global Experience Language) ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Blueprint ๐Ÿ‘ ๐Ÿ‘ :octocat:
Bulb Design System ๐Ÿ‘ ๐Ÿ‘
BuzzFeed Solid ๐Ÿ‘ ๐Ÿ‘ :octocat:
eBay Skin ๐Ÿ‘ :octocat:
Enigma Boundless ๐Ÿ‘ :octocat:
CA Technologies Mineral UI ๐Ÿ‘ :octocat:
Cards Binary Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Cloudflare ๐Ÿ‘ :octocat:
City of Boston Fleet ๐Ÿ‘ ๐Ÿ‘ :octocat:
Co-op Design Manual ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Duolingo Design Guidelines ๐Ÿ‘ ๐Ÿ‘
Estonia Country Design Guidelines ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Evergreen ๐Ÿ‘ :octocat:
Firefox Photon Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
FutureLearn Pattern Library ๐Ÿ‘
GitHub Primer ๐Ÿ‘ :octocat:
GitLab Design System ๐Ÿ‘ ๐Ÿ‘ ๐ŸฆŠ
Google Material Design ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
GOV.UK Design System ๐Ÿ‘ :octocat:
Help Scout ๐Ÿ‘ ๐Ÿ‘ :octocat:
Heroku Purple3 ๐Ÿ‘
Hewlett Packard grommet ๐Ÿ‘ :octocat:
HubSpot Canvas ๐Ÿ‘ ๐Ÿ‘ :octocat:
Hudl Design System ๐Ÿ‘ ๐Ÿ‘
IBM Carbon ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
IBM Design Language ๐Ÿ‘ ๐Ÿ‘
IBM Northstar ๐Ÿ‘ ๐Ÿ‘
Intuit Harmony ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
JetBrains Ring UI ๐Ÿ‘ :octocat:
Kiwi Orbit ๐Ÿ‘ ๐Ÿ‘ :octocat:
Kontur ๐Ÿ‘
Lexicon ๐Ÿ‘ ๐Ÿ‘
Lonely Planet Rizzo ๐Ÿ‘ :octocat:
Louder Than Ten Manual ๐Ÿ‘ ๐Ÿ‘
Lost My Name Design System ๐Ÿ‘
Mailchimp Content Styleguide ๐Ÿ‘
Mailchimp Patterns ๐Ÿ‘
Marvel Styleguide ๐Ÿ‘
Mesosphere CNVS ๐Ÿ‘ :octocat:
Microsoft Fluent ๐Ÿ‘ ๐Ÿ‘
Mixpanel Design System ๐Ÿ‘ ๐Ÿ‘
MongoDB Design System ๐Ÿ‘ ๐Ÿ‘ :octocat:
Monzo Tone of Voice ๐Ÿ‘
Morningstar Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
NHS.UK Service Manual (Alpha) ๐Ÿ‘ ๐Ÿ‘
nib Health Funds ๐Ÿ‘
Nordnet ๐Ÿ‘ ๐Ÿ‘
Nutanix Prism ๐Ÿ‘
Office UI Fabric ๐Ÿ‘ :octocat:
Opattern ๐Ÿ‘ ๐Ÿ‘
Oracle Alta UI ๐Ÿ‘
Pearson UX Framework ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Pinterest Gestalt ๐Ÿ‘ :octocat:
Pivotal ๐Ÿ‘ :octocat:
Pluralsight Design System ๐Ÿ‘ :octocat:
Predix Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘
Priceline Design System ๐Ÿ‘ ๐Ÿ‘ :octocat:
Pusher Chameleon ๐Ÿ‘ :octocat:
Rambler ๐Ÿ‘ :octocat:
Salesforce Lightning Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
SAP Fiori ๐Ÿ‘
SEEK Style Guide ๐Ÿ‘ :octocat:
Shopify Polaris ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
Stack Exchange: Stacks UI ๐Ÿ‘ :octocat:
Starbucks Style Guide ๐Ÿ‘
Sky Toolkit ๐Ÿ‘ :octocat:
The University of Melbourne Design System ๐Ÿ‘ :octocat:
Trello - Nachos ๐Ÿ‘ ๐Ÿ‘
Ubuntu Brand Guidelines ๐Ÿ‘ ๐Ÿ‘ :octocat:
USPTO UI Design Library ๐Ÿ‘ ๐Ÿ‘ :octocat:
uSwitch style guide ๐Ÿ‘ ๐Ÿ‘ :octocat:
U.S. Web Design Standards ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
U.S. CMS.gov Design System ๐Ÿ‘
VMware Clarity Design System ๐Ÿ‘ ๐Ÿ‘ ๐Ÿ‘ :octocat:
VTEX Styleguide ๐Ÿ‘ ๐Ÿ‘ :octocat:
WeWork Plasma ๐Ÿ‘
Yelp Styleguide ๐Ÿ‘ ๐Ÿ‘
Zendesk Garden ๐Ÿ‘ :octocat:

Notes

*Projects marked as open source may not always be open to use. Always check the license of these projects before using them.

Although 'design systems', 'ui libraries', and 'pattern libraries' are different things, they are often used interchangeably. This list contains all three.

Credits

Cover icon: 'Solar System' by Andrejs Kirma from the Noun Project

awesome-design-systems's People

Contributors

aaron2ti avatar alexpate avatar alisonjoseph avatar allisonacs avatar aminalhazwani avatar andrevargas avatar annez avatar brian-whitfield avatar bruskowski avatar cmdalbem avatar coryhouse avatar davidlewisthomas avatar ddemaree avatar dimitrieh avatar eldain avatar entone avatar etaheri avatar gobijan avatar jadedevin13 avatar jdsimcoe avatar kosai106 avatar lauriejones avatar metakermit avatar mhrabiee avatar robinstickel avatar shawnbot avatar siebensieben avatar skistz avatar spentacular avatar yapjonathan avatar

Watchers

 avatar  avatar  avatar

Forkers

rafacostaa

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.