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

• Atomic Design ( Ebook, Blog post)

Design system

• [🇷🇺] Gov.design (Github) - Дизайн государственных систем России
• Microsoft Design
• Universal Windows Platform Guidelines (Microsoft)
• BBC Gel
• Atlassian Design Language
• Google Material Design
• Mailchimp (email design guide)
• Blackboard
• Disqus
• OpenTable
• Dropbox
• Facebook Brand Resource Center
• Airbnb (article)
• IBM
• Harmony
• iOS Human Interface Guidelines (Apple)
• US Gov
• Uber
• Nordnet
• FutureLearn
• Ubuntu
• Carbon by IBM
• Shopify Polaris
• Wonderbly Design System
• MailChimp Content Style Guide
• [🇷🇺] Контур.Гайды
• [🇷🇺] Дизайн Альфа-Банка (GitHub, Demo)
• [🇷🇺] Дизайн-система Иви
• HealthCare.gov
• mixpanel Design
• Photon Design System (Firefox)
• Code for America

Design system frontend

• [🇷🇺] VKUI: by Vkontakte (GitHub) - android, ios ui kit

• Alta UI by Oracle

• Marvel by Marvel

• Pivotal

• RSUITE (GitHub, Demo)

• Predix UI (GitHub, Demo)

• Primer: by GitHub (GitHub, Demo)

• Plasma design system: bu WeConnect (GitHub, Demo)

  • Medium: Plasma design system - Creating and documenting a product design system

• Rizzo: by Lonely Planet (GitHub)

• Backpack UI: by Lonely Planet (GitHub, Demo)

• Storybook Design System: by Storybook (Demo, GitHub)

• Solid: by Buzzfeed (GitHub)

  • Medium: Introducing Solid

• MailChimp Pattern Library: by MailChimp

• Ellucian

• Bootstrap

• Yelp

• Lightning Design System: by Salesforce (Demo, GitHub)

• Clarity Design System

• Co-op Design manual

• Semantic UI

• Material-UI (React)

• ANT DESIGN - A UI Design Language

• Element (Vue 2)

• UI Kit

• Fabric: By Microsoft for MS Office (GitHub, Demo)

• Atlas Kit (Atlassian) (React)

• Carbon by IBM (React)

• Coursera ui (React)

• Brainly style guide (CSS)

• Pajamas: by Gitlab (Source, Sketch)

• Grommet: bu Hewlett Packard (GitHub, Demo)

• Evergreen: by Segment (GitHub, Demo)

• Ring UI (jetbrains) (React)

• Modulz Design System: An open–source design system of styles, components, templates, tools and documentation. (Demo, GitHub)

  • Medium: How to construct a design system

Tools

• Fabricator
• Fractal
• Pattern Lab
• Storybook

Blog post

• 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

Other

• Style Guide Guide: A boilerplate for creating superb style guides