Return to Software Engineering, Software Design, Design Patterns

“A design system is a collection of documentation on design principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.” “Although 'design systems', 'ui libraries', and 'pattern libraries' are different things, they are often used interchangeably. This awesome list contains all three: Fair Use Source: https://github.com/alexpate/awesome-design-systems

• Components: Contains coded patterns and examples.
• Voice & Tone: Provides guidance on how language should be used.
• Designers Kit: Includes Apple Developer Design Guidelines, etc. file for designers.

• Apple Developer Design Guidelines - https://developer.apple.com/design

• GitHub Primer - https://primer.style
  • Design, build, and create with GitHub’s design system: Primer was created for GitHub by GitHub. We love it so much, we chose to open-source it to allow the community to design and build their own projects with Primer.

• Google Material Design - https://material.io/design/#introduction-goals
  • Create intuitive and beautiful products with Material Design

• Microsoft Fluent - https://www.microsoft.com/design/fluent
  • Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

Snippet from Wikipedia: Design system

A design system is a comprehensive set of standards, documentation, and reusable components that guide the development of digital products within an organization. It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects. A design system may consist of: pattern and component libraries; style guides for font, color, spacing, component dimensions, and placement; design languages, coded components, brand languages, and documentation. Design systems aid in digital product design and development of products such as mobile applications or websites.

A design system serves as a reference to establish a common understanding between design, engineering, and product teams. This understanding ensures smooth communication and collaboration between different teams involved in designing and building a product, and ultimately results in a consistent user experience.

Notable design systems include Lightning Design System (by Salesforce), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft).

Creative Commons Attribution-Share Alike 4.0