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

• How to create own
• Design system
• Design system frontend
• Tools
• Blog post
• Grid
• Other

How to create own

• UI Components Handbook - The definitive guide to standardize the design/code of the UI Components based on the 39 most popular Reference Systems.
• Proportio - Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

Meta Design system

• Atomic Design (Ebook, Blog post)

Design system

• Atlassian Design Language
• BBC Gel
• Blackboard
• Carbon by IBM
• Code for America
• Cloudscape by Amazon - An open source design system for the cloud (GitHub)
• 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)
• [🇷🇺] Дизайн-система Иви
• [🇷🇺] Контур.Гайды
• [🇷🇺] Consta by Газпром нефть (Github, Figma)
  • VC: Как дизайн-система Consta помогает создавать новые интерфейсы из готовых компонентов

Design system frontend

• Ark UI - is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks. (GitHub) React, Vue
• 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)
  • Medium: How to construct a design system
• 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)
  • Medium: Introducing Solid
• Storybook Design System: by Storybook (Demo, GitHub)
• UI Kit
• Yelp
• [🇷🇺] VKUI: by Vkontakte (GitHub) - android, ios ui kit

Tools

• Fabricator
• Fractal
• Pattern Lab
• Storybook

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

Other

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