Design Systems

screenshot of Design Systems

Design Systems

A list of famous design systems, design languages and guidelines

Overview:

Design systems are an integral part of modern product design and development. They provide a set of guidelines, principles, and components that ensure consistency and efficiency in creating user interfaces. This article presents a list of famous design systems, design languages, and guidelines used by various companies and organizations.

Features:

  • Material Design by Google: Google's design system that focuses on a clean and minimalistic interface, with a heavy emphasis on typography and large-scale imagery.
  • Atlassian Design Language: Atlassian's design language that aims to create a unified and consistent experience across their suite of collaboration tools.
  • Fluent Design System by Microsoft: Microsoft's design system that embraces depth, motion, and material to create immersive and responsive user experiences.
  • Help Scout Guidelines: Help Scout's guidelines for creating visual elements that communicate their brand's personality and values.
  • Apple Human Interface Guidelines: Apple's guidelines that outline the design principles and best practices for creating user interfaces on their platforms.
  • Polaris By Shopify: Shopify's design system that provides a library of reusable components and guidelines for creating consistent and beautiful user interfaces.
  • Carbon Design System By IBM: IBM's design system that focuses on scalability, accessibility, and inclusivity, providing a robust set of components and guidelines.
  • Ant Design: An open-source design system by Ant Financial that offers a collection of high-quality React components and a design language for creating enterprise-level web applications.
  • Anvil Design System By ServiceTitan: ServiceTitan's design system that provides a library of components and guidelines for creating scalable and efficient user interfaces for their field service management software.
  • Alta UI by Oracle: Oracle's design system that provides a set of customizable templates, reusable components, and guidelines for creating cohesive and modern user experiences.
  • Audi Brand Appearance: Audi's brand guidelines that outline their design principles and visual elements for creating a consistent and premium brand experience.
  • Uber Brand Guidelines: Uber's brand guidelines that define their brand personality, visual elements, and voice for creating a consistent and recognizable brand identity.
  • U.S. Web Design System (USWDS): The official design system of the U.S. government, providing a library of accessible and responsive components and design guidelines.
  • Australina Government Design System: The design system used by the Australian government to create consistent and user-centered digital experiences.
  • Bolt Design System: The design system created by Salesforce for their Lightning Design System, providing a library of components and guidelines for creating enterprise-level applications.
  • Clarity Design System by VMware: VMware's design system that provides a collection of customizable, accessible, and performant components and guidelines.
  • Spectrum by Adobe: Adobe's design system that offers a library of components and guidelines for creating cohesive and delightful user experiences.
  • Welcome UI: A React-based design system that provides a library of customizable components for building modern and accessible user interfaces.
  • Zendesk Garden: Zendesk's design system that offers a collection of UI components and guidelines for creating consistent and intuitive customer experiences.
  • Yelp Styleguide: Yelp's style guide that provides guidelines, code snippets, and resources for creating consistent and on-brand user interfaces.
  • Vercel Design: Vercel's design system that provides a library of components and guidelines for creating performant and delightful user experiences.
  • Barista: Dynatrace's design system that offers a comprehensive library of components and guidelines for creating scalable and efficient enterprise software.
  • Biings Design System: A design system designed for creating immersive and interactive experiences, providing a collection of components and guidelines.
  • Asphalt Design Language: Gojek's design language that focuses on providing visually impactful and intuitive user interfaces for their app.
  • Evergreen By Segment: Segment's design system that provides a collection of React components and guidelines for creating consistent and flexible user interfaces.
  • Feelix By MYOB: MYOB's design system that offers a library of components and guidelines for creating modern and user-friendly interfaces for their accounting software.
  • AT UI: A Vue-based design system that provides a set of components and guidelines for creating scalable and responsive user interfaces.
  • Elastic UI: Elastic's design system that offers a library of components and guidelines for creating powerful and scalable user interfaces.
  • ETRADE Design Language: ETRADE's design language that provides a collection of components and guidelines for creating intuitive and user-friendly trading interfaces.
  • Aurora Design System by Government of Canada: The government of Canada's design system that provides a library of components and guidelines for creating accessible and inclusive digital experiences.
  • Pallete by Artsy: Artsy's design system that provides a collection of components and guidelines for creating visually rich and immersive user interfaces.
  • Elementary OS Human Interface Guidelines: Guidelines for designing user interfaces for the Elementary OS Linux distribution, focusing on simplicity, clarity, and consistency.
  • NSW Design System: The design system used by the New South Wales government in Australia to create consistent and user-centered digital experiences.
  • Comet: The design system created by Discovery Education for their educational products, providing a library of components and guidelines.
  • Code for America: Code for America's style guide that provides guidelines and resources for creating accessible and user-friendly interfaces for government services.
  • MongoDB Design System: MongoDB's design system that provides a collection of components and guidelines for creating modern and scalable user interfaces.
  • Marvel App Style Guide: Marvel App's style guide that provides guidelines and resources for creating consistent and delightful user interfaces for prototyping.
  • CNVS UI System: Mesosphere's design system that offers a library of components and guidelines for creating scalable and user-friendly interfaces for their infrastructure management software.
  • Wonderbly Design System: Wonderbly's design system that provides a collection of components and guidelines for creating personalized and delightful user experiences.
  • Lonely Planet Style Guide: Lonely Planet's style guide that provides guidelines and resources for creating visually appealing and engaging user interfaces for travel experiences.
  • Lexicon by Liferay: Liferay's design system that offers a library of components and guidelines for creating seamless and user-centered digital experiences.
  • Duet Design System: The design system created by Spotify for their cross-platform applications, providing a library of components and guidelines.
  • Cedar Design System: REI's design system that provides a collection of accessible and responsive components and guidelines for creating outdoor retail experiences.
  • Future Learn Design System: Future Learn's design system that offers a library of components and guidelines for creating inclusive and engaging online learning experiences.

Installation:

Installing the design systems listed requires visiting the respective links provided and following their specific installation and usage instructions.

Summary:

This article lists and briefly describes 40+ famous design systems, design languages, and guidelines used by various companies and organizations. These design systems provide a set of guidelines, principles, and components for creating consistent, user-friendly, and visually appealing user interfaces. Whether you are a designer or developer, exploring and utilizing these design systems can greatly enhance your workflow and help you deliver high-quality products.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.