awesome-design-language-system
list of awesome resources about digital design system.
https://github.com/DragorWW/awesome-design-language-system
Last synced: 4 days ago
JSON representation
-
Design system frontend
- Clarity Design System
- Co-op Design manual
- Coursera ui (React)
- Ellucian
- Evergreen
- Fabric - ui-fabric-react), [Demo](https://developer.microsoft.com/en-us/fabric#/components))
- Frosted UI - ui))
- Lightning Design System - ux/design-system))
- Marvel
- Mantine
- Demo
- Modulz Design System
- Medium: How to construct a design system
- Brainly style guide (CSS)
- Ark UI - 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 - 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))
- ANT DESIGN - A UI Design Language
- Atlas Kit (Atlassian) (React)
- Backpack UI - ui), [Demo](https://lonelyplanet.github.io/backpack-ui))
- Pajamas - org/gitlab-services/design.gitlab.com), [Sketch](https://gitlab.com/gitlab-org/gitlab-design/blob/master/doc/sketch-ui-kit.md#files))
- Plasma design system - ui.com/#/gallery))
- Medium: Plasma design system - Creating and documenting a product design system
- React Arial - spectrum), [Demo](https://react-spectrum.adobe.com/react-aria/components.html)) - Craft world-class accessible components with custom styles.
- Rizzo
- RSUITE
- Semantic UI
- Medium: Introducing Solid
- Storybook Design System - design-system.netlify.com/), [GitHub](https://github.com/storybookjs/design-system))
- UI Kit
- Yelp
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Plasma design system - ui.com/#/gallery))
- Solid
- Storybook Design System - design-system.netlify.com/), [GitHub](https://github.com/storybookjs/design-system))
-
Blog post
- Building a Visual Language
- 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
- 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
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Align svg icons to text
- Building a design system for HealthCare.gov
- Building a Visual Language
-
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.
-
Design system
- Atlassian Design Language
- Blackboard
- Code for America
- Cloudscape - An open source design system for the cloud ([GitHub](https://github.com/cloudscape-design/components))
- Facebook Brand Resource Center
- Harmony
- HealthCare.gov
- iOS Human Interface Guidelines (Apple)
- Mailchimp (email design guide)
- mixpanel Design
- Nordnet
- OpenTable
- Photon Design System (Firefox)
- Shopify Polaris
- Uber
- Ubuntu
- Wonderbly Design System
- [🇷🇺 - Дизайн государственных систем России
- [🇷🇺
- [🇷🇺
- [🇷🇺 - design-system), [Figma](https://www.figma.com/@consta))
- VC: Как дизайн-система Consta помогает создавать новые интерфейсы из готовых компонентов
-
Tools
-
Grid
- Specifics 001: The 8-Point Grid
- Sketch Workflow — 8 point Soft Grids
- [🇷🇺 - Point Grid System](https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632)
- Intuit’s Harmony Design System
Programming Languages
Categories
Sub Categories