KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #codex #developer-tools #ai-agents #claude-code #windows #desktop-app #typescript #rust #ai-agent #cli

awesome-design-language-system

★ 125 Open GitHub ↗

list of awesome resources about digital design system.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)

awesome-design-language-system

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README