Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/DragorWW/awesome-design-language-system

list of awesome resources about digital design system.
https://github.com/DragorWW/awesome-design-language-system

List: awesome-design-language-system

design-language design-language-framework design-styleguide design-system grid-system styleguide vertical-rhythm visual-language

Last synced: about 1 month ago
JSON representation

list of awesome resources about digital design system.

Awesome Lists containing this project

README 

        
# Awesome design language system [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

> A curated list of awesome resources about digital design system.



**Keywords**: Design system, Design language framework, Design styleguide, Visual language, Vertical rhythm, Design grid system



## Contents



- [How to create own](#how-to)

- [Design system](#design-system)

- [Design system frontend](#Design-system-frontend)

- [Tools](#tools)

- [Blog post](#blog-post)

- [Grid](#grid)

- [Other](#other)



## How to create own

- [UI Components Handbook](https://www.uiguideline.com/components) - The definitive guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.

- [Proportio](https://proportio.app/) - Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.



## Meta Design system

- [Atomic Design](http://atomicdesign.bradfrost.com/) ([Ebook](http://atomicdesign.bradfrost.com/table-of-contents/), [Blog post](https://bradfrost.com/blog/post/atomic-web-design/))



## Design system

* [Atlassian Design Language](https://atlassian.design/)

* [BBC Gel](http://www.bbc.co.uk/gel)

* [Blackboard](http://design.blackboard.com/)

* [Carbon by IBM](http://carbondesignsystem.com/)

* [Code for America](http://style.codeforamerica.org/)

* [Cloudscape](https://cloudscape.design/) by Amazon - An open source design system for the cloud ([GitHub](https://github.com/cloudscape-design/components))

* [Disqus](https://disqus.com/pages/style-guide/)

* [Dropbox](https://www.dropbox.com/branding/)

* [Facebook Brand Resource Center](https://en.facebookbrand.com/)

* [FutureLearn](https://www.futurelearn.com/pattern-library)

* [Google Material Design](https://material.google.com/)

* [Harmony](http://harmony.intuit.com/)

* [HealthCare.gov](https://design.cms.gov/)

* [IBM](http://www.ibm.com/design/language/)

* [iOS Human Interface Guidelines (Apple)](https://developer.apple.com/ios/human-interface-guidelines/)

* [Mailchimp (email design guide)](http://mailchimp.com/resources/email-design-guide/)

* [MailChimp Content Style Guide](http://styleguide.mailchimp.com/)

* [Microsoft Design](https://www.microsoft.com/en-us/design)

* [mixpanel Design](http://mixpanel.github.io/mixpanel-common/examples/style-guide-new/)

* [Nordnet](https://www.nordnet.se/brand/)

* [OpenTable](http://brand.opentable.com/)

* [Photon Design System (Firefox)](http://design.firefox.com/photon/welcome.html)

* [Shopify Polaris](https://polaris.shopify.com/)

* [Uber](https://brand.uber.com/)

* [Ubuntu](http://design.ubuntu.com/apps/get-started/overview)

* [Universal Windows Platform Guidelines (Microsoft)](https://developer.microsoft.com/en-us/windows/apps/design)

* [US Gov](https://standards.usa.gov/)

* [Wonderbly Design System](http://design-system.lostmy.name/)

* [[🇷🇺] Gov.design](http://gov.design/) ([Github](https://github.com/govdesign)) - Дизайн государственных систем России

* [[🇷🇺] Дизайн Альфа-Банка](https://design.alfabank.ru/) ([GitHub](https://github.com/alfa-laboratory/arui-feather), [Demo](https://design.alfabank.ru/components/amount))

* [[🇷🇺] Дизайн-система Иви](https://design.ivi.ru/)

* [[🇷🇺] Контур.Гайды](https://guides.kontur.ru/)

* [[🇷🇺] Consta](https://consta.design/) by Газпром нефть ([Github](https://github.com/consta-design-system), [Figma](https://www.figma.com/@consta))

  * [VC: Как дизайн-система Consta помогает создавать новые интерфейсы из готовых компонентов](https://vc.ru/gazpromneft/676527-kak-dizayn-sistema-consta-pomogaet-sozdavat-novye-interfeysy-iz-gotovyh-komponentov)



## Design system frontend

* [Ark UI](https://ark-ui.com/) - is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks. ([GitHub](https://github.com/chakra-ui/ark)) `React`, `Vue`

* [AgnosticUI](https://www.agnosticui.com/) - Accessible React component primitives that also work with Vue 3, Svelte, and Angular! ([GitHub](https://github.com/AgnosticUI/agnosticui), [Demo](https://developtodesign.com/agnosticui-examples))

* [Alta UI](http://www.oracle.com/webfolder/ux/middleware/alta/index.html) by Oracle

* [ANT DESIGN - A UI Design Language](https://ant.design/)

* [Atlas Kit (Atlassian) (React)](https://atlaskit.atlassian.com/)

* [Backpack UI](https://lonelyplanet.github.io/backpack-ui): by Lonely Planet ([GitHub](https://github.com/lonelyplanet/backpack-ui), [Demo](https://lonelyplanet.github.io/backpack-ui))

* [Bootstrap](http://getbootstrap.com/)

* [Brainly style guide (CSS)](http://styleguide.brainly.com)

* [Carbon by IBM (React)](http://react.carbondesignsystem.com/)

* [Clarity Design System](https://vmware.github.io/clarity/)

* [Co-op Design manual](https://coop-design-manual.herokuapp.com/)

* [Coursera ui (React)](https://webedx-spark.github.io/coursera-ui)

* [Element (Vue 2)](http://element.eleme.io/)

* [Ellucian](https://styleguide.elluciancloud.com/)

* [Evergreen](https://evergreen.segment.com/): by Segment ([GitHub](https://github.com/segmentio/evergreen/), [Demo](https://evergreen.segment.com/))

* [Fabric](http://dev.office.com/fabric#/): By Microsoft for MS Office ([GitHub](https://github.com/OfficeDev/office-ui-fabric-react), [Demo](https://developer.microsoft.com/en-us/fabric#/components))

* [Frosted UI](https://storybook.whop.com/): ([GitHub](https://github.com/whopio/frosted-ui))

* [Grommet](http://grommet.io/): bu Hewlett Packard ([GitHub](https://github.com/grommet/grommet), [Demo](http://grommet.io/docs/components/))

* [Lightning Design System](https://www.lightningdesignsystem.com/): by Salesforce ([Demo](https://www.lightningdesignsystem.com/components/overview/), [GitHub](https://github.com/salesforce-ux/design-system))

* [MailChimp Pattern Library](https://ux.mailchimp.com/): by MailChimp

* [Marvel](https://marvelapp.com/styleguide/) by Marvel

* [Material-UI (React)](http://www.material-ui.com/)

* [Mantine](https://mantine.dev/): 

React components library with native dark theme support ([Demo](https://ui.mantine.dev/), [GitHub](https://github.com/mantinedev/mantine))

* [Modulz Design System](https://www.modulz.co/): An open–source design system of styles, components, templates, tools and documentation. ([Demo](https://www.modulz.co/showcase/), [GitHub](https://github.com/modulz/modulz))

  * [Medium: How to construct a design system](https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117)

* [Pajamas](https://design.gitlab.com/): by Gitlab ([Source](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com), [Sketch](https://gitlab.com/gitlab-org/gitlab-design/blob/master/doc/sketch-ui-kit.md#files))

* [Pivotal](https://styleguide.pivotal.io)

* [Plasma design system](http://plasma.guide/): bu WeConnect ([GitHub](https://github.com/WeConnect/plasma), [Demo](https://www.predix-ui.com/#/gallery))

  * [Medium: Plasma design system - Creating and documenting a product design system](https://medium.com/p/

* [Predix UI](https://www.predix-ui.com) ([GitHub](https://github.com/PredixDev), [Demo](http://primercss.io/storybook))

* [Primer](http://primercss.io/): by GitHub ([GitHub](https://github.com/primer/primer), [Demo](http://primercss.io/storybook))

* [Ring UI (React)](https://jetbrains.github.io/ring-ui/) by JetBrains

* [React Arial](https://react-spectrum.adobe.com/react-aria/): by Adobe ([GitHub](https://github.com/adobe/react-spectrum), [Demo](https://react-spectrum.adobe.com/react-aria/components.html)) - Craft world-class accessible components with custom styles.

* [Rizzo](https://rizzo.lonelyplanet.com/): by Lonely Planet ([GitHub](https://github.com/lonelyplanet/rizzo))

* [RSUITE](https://rsuitejs.com/en/) ([GitHub](https://github.com/rsuite/rsuite), [Demo](https://rsuitejs.com/en/components/overview))

* [Semantic UI](https://semantic-ui.com/)

* [Solid](http://solid.buzzfeed.com/): by Buzzfeed ([GitHub](https://github.com/buzzfeed/solid))

  * [Medium: Introducing Solid](https://medium.com/buzzfeed-design/introducing-solid-1c16b1bf4868)

* [Storybook Design System](https://storybook-design-system.netlify.com/): by Storybook ([Demo](https://storybook-design-system.netlify.com/), [GitHub](https://github.com/storybookjs/design-system))

* [UI Kit](https://getuikit.com/)

* [Yelp](https://www.yelp.com/styleguide)

* [[🇷🇺] VKUI](https://vkcom.github.io/vkui-styleguide/): by Vkontakte ([GitHub](https://github.com/VKCOM/VKUI)) - android, ios ui kit



## Tools

* [Fabricator](https://fbrctr.github.io/)

* [Fractal](http://fractal.build/)

* [Pattern Lab](http://patternlab.io/)

* [Storybook](https://storybook.js.org/)



## Blog post

* [Airbnb (article)](http://airbnb.design/building-a-visual-language/)

* [How we’re using Component Based Design](https://medium.com/@lewisplushumphreys/how-were-using-component-based-design-5f9e3176babb)

* [Creating a Design System Language…](https://medium.com/globoforce-design/creating-a-design-system-158a2d832551)

* [Plasma design system](https://medium.com/@andrewcouldwell/plasma-design-system-4d63fb6c1afc)

* [Building a Visual Language: Behind the scenes of our Airbnb design system](https://medium.com/airbnb-design/building-a-visual-language-behind-the-scenes-of-our-airbnb-design-system-224748775e4e)

* [Building a Visual Language](http://airbnb.design/building-a-visual-language/)

* [A List of Style Guides, Brand Guidelines, and Front-End Frameworks](https://medium.com/@theearlcarlson/a-list-of-style-guides-brand-guidelines-and-front-end-frameworks-e5bb62db91e5)

* [🇷🇺 4 правила работы в Sketch над крупными проектами](https://habrahabr.ru/post/320990/)

* [Deep dive CSS: font metrics, line-height and vertical-align](http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)

* [Align svg icons to text](https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4)

* [Design Systems Sprint 0: The Silver Bullet of Product Development.](https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d)

* [Design Systems Sprint 1: The Interface Inventory](https://medium.com/@marcintreder/design-systems-sprint-1-the-interface-inventory-1f78d376e49a)

* [Design System Sprint 2: One Color Palette to Rule them All](https://medium.com/@marcintreder/design-system-sprint-2-one-color-palette-to-rule-them-all-d0114ed1f659)

* [Design System Sprint 3: Managing the Basics](https://medium.com/@marcintreder/design-system-sprint-3-managing-the-basics-50ff588cbac8)

* [Design System Sprint 4: Design Principles](https://medium.com/@marcintreder/design-system-sprint-4-design-principles-8efb22d8a208)

* [Design System Sprint 5: Managing Typography](https://medium.com/@marcintreder/design-system-sprint-4-managing-typography-303e335894ee)

* [Design System Sprint 6: The Fastest Icons on Earth](https://medium.com/@marcintreder/design-system-sprint-6-the-fastest-icons-on-earth-bf91c0a47ef9)

* [Building a design system for HealthCare.gov](https://blog.navapbc.com/building-a-design-system-for-healthcare-gov-20dc1a833ab3)

* [Create design system guid](https://www.uxpin.com/create-design-system-guide)



## Grid

* [Specifics 001: The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

* [Sketch Workflow — 8 point Soft Grids](https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4)

* [[🇷🇺](https://habrahabr.ru/company/everydaytools/blog/319700/)] [Intro to the 8-Point Grid System](https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632)

* [Google Material Design — Metrics & keylines article](https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size)

* [Intuit’s Harmony Design System](http://harmony.intuit.com/grid/)



## Other

- [Style Guide Guide: A boilerplate for creating superb style guides](https://bradfrost.github.io/style-guide-guide)