awesome-design-language-system
awesome-design-language-system copied to clipboard
Published
20 hours ago •
DragorWW
DragorWW
list of awesome resources about digital design system.
Awesome design language system 
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
- Design system
- Design system frontend
- Tools
- Blog post
- Grid
- Other
Meta Design system
Design system
- Atlassian Design Language
- BBC Gel
- Blackboard
- Carbon by IBM
- Code for America
- Disqus
- Dropbox
- Facebook Brand Resource Center
- FutureLearn
- Google Material Design
- Harmony
- HealthCare.gov
- IBM
- iOS Human Interface Guidelines (Apple)
- Mailchimp (email design guide)
- MailChimp Content Style Guide
- Microsoft Design
- mixpanel Design
- Nordnet
- OpenTable
- Photon Design System (Firefox)
- Shopify Polaris
- Uber
- Ubuntu
- Universal Windows Platform Guidelines (Microsoft)
- US Gov
- Wonderbly Design System
- [🇷🇺] Gov.design (Github) - Дизайн государственных систем России
- [🇷🇺] Дизайн Альфа-Банка (GitHub, Demo)
- [🇷🇺] Дизайн-система Иви
- [🇷🇺] Контур.Гайды
Design system frontend
- AgnosticUI - Accessible React component primitives that also work with Vue 3, Svelte, and Angular! (GitHub, Demo)
- Alta UI by Oracle
- ANT DESIGN - A UI Design Language
- Atlas Kit (Atlassian) (React)
- Backpack UI: by Lonely Planet (GitHub, Demo)
- Bootstrap
- Brainly style guide (CSS)
- Carbon by IBM (React)
- Clarity Design System
- Co-op Design manual
- Coursera ui (React)
- Element (Vue 2)
- Ellucian
- Evergreen: by Segment (GitHub, Demo)
- Fabric: By Microsoft for MS Office (GitHub, Demo)
- Grommet: bu Hewlett Packard (GitHub, Demo)
- Lightning Design System: by Salesforce (Demo, GitHub)
- MailChimp Pattern Library: by MailChimp
- Marvel by Marvel
- Material-UI (React)
- Mantine: React components library with native dark theme support (Demo, GitHub)
- Modulz Design System: An open–source design system of styles, components, templates, tools and documentation. (Demo, GitHub)
- Pajamas: by Gitlab (Source, Sketch)
- Pivotal
-
Plasma design system: bu WeConnect (GitHub, Demo)
- [Medium: Plasma design system - Creating and documenting a product design system](https://medium.com/p/
- Predix UI (GitHub, Demo)
- Primer: by GitHub (GitHub, Demo)
- Ring UI (jetbrains) (React)
- Rizzo: by Lonely Planet (GitHub)
- RSUITE (GitHub, Demo)
- Semantic UI
- Solid: by Buzzfeed (GitHub)
- Storybook Design System: by Storybook (Demo, GitHub)
- UI Kit
- Yelp
- [🇷🇺] VKUI: by Vkontakte (GitHub) - android, ios ui kit
Tools
Blog post
- Airbnb (article)
- How we’re using Component Based Design
- Creating a Design System Language…
- Plasma design system
- Building a Visual Language: Behind the scenes of our Airbnb design system
- Building a Visual Language
- A List of Style Guides, Brand Guidelines, and Front-End Frameworks
- 🇷🇺 4 правила работы в Sketch над крупными проектами
- Deep dive CSS: font metrics, line-height and vertical-align
- Align svg icons to text
- Design Systems Sprint 0: The Silver Bullet of Product Development.
- Design Systems Sprint 1: The Interface Inventory
- Design System Sprint 2: One Color Palette to Rule them All
- Design System Sprint 3: Managing the Basics
- Design System Sprint 4: Design Principles
- Design System Sprint 5: Managing Typography
- Design System Sprint 6: The Fastest Icons on Earth
- Building a design system for HealthCare.gov
- Create design system guid
Grid
- Specifics 001: The 8-Point Grid
- Sketch Workflow — 8 point Soft Grids
- [🇷🇺] Intro to the 8-Point Grid System
- Google Material Design — Metrics & keylines article
- Intuit’s Harmony Design System
DragorWW