The best design system to inspire.

Jake Park
5 min readJan 23, 2022

--

10 contexts, 10 design languages

A design system is a set of rules governed by the rules to ensure that the user has an experience. I think it will give you the same time, the perfect time. Suggestions for applying this system, a linguistic definition of the design system. The environment friendly environment for Infinity, the code you use for development, the specific ux, applies to all environments and companies in the environment. We provide the best service for better design.

Apple Human Interface Guideline

These are Apple's design guidelines, which are called textbooks on a smooth user experience. We provide detailed guidelines for design as well as development. It provides design principles to provide a consistent experience suitable for platform characteristics and UI Kits for various devices provided by Apple.

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

  • Themes, Interface Essentials
  • App Architecture
  • User Interaction
  • System Capabilities
  • Visual Design
  • Icons and Images
  • Bars
  • Views
  • Controls
  • Extensions

Google Material Design

Material Design was a signal that Google could offer the future as a true standard for design. Since this design system was announced, everyone in the world has known about the basics of the design system. It is a design system that is one of the solid foundations for various services and brands around the world to express various expressions based on this language. It is now up to version 3, suggesting a more advanced design language called Material You.

https://material.io/

  • Foundation: Design Tokens, Adaptive Design…
  • Style: Color, Typography
  • Components: Buttons, Cards, Chips…

Microsoft Fluent

Microsoft's design system. We aim for a convincing design system for a complex world. It is the successor to Microsoft's Metro Design, which played a major role in moving from skeuomorphism to flat design. Fluent built its system around the components of light, depth, motion, material, and scale.

https://www.microsoft.com/design/fluent/#/

  • Controls and Patterns
  • Layout
  • Style
  • Controls
  • Resources

IBM Carbon Design Language

It is the design language of the global dinosaur company IBM. All components comply with the accessibility checklist. It classifies the user's vision, hearing, physical, cognitive impairment, etc. and describes how it relates to the general user. As a large company with significant global reach, we offer a wide range of design languages ​​for everyone.

https://www.ibm.com/design/language/

  • Philosophy
  • Typography
  • Color
  • Grid
  • Logos
  • Iconography
  • Illustration
  • Photography
  • Data Visualization
  • Layout
  • Animation
  • Resource

Ant Design

Alibaba Group's design system. Since there are many large corporate-level products, we provide a design system to cover them. It provides various web components like the bootstrap provided by Twitter.

https://ant.design/

  • Global Styles
  • Design Patterns
  • Visualization
  • Motion
  • Illustrations

Atlassian’s Design Language

It is the design language of Atlassian, an Australian enterprise software company. Jira, an issue tracking app, is famous for its collaborative Wiki Confluence. Provides design patterns, code configurations, and UI resources.

Atlassian Design System

  • Brand
  • Foundations
  • Content
  • Resource

SalesForce Lightning Design System

Salesforce's design language. The context is similar to Shopify, providing guides for platforms that don't provide anything else like visualforce, heroku, etc. It provides a significant number of component guidelines.

https://www.lightningdesignsystem.com/

  • Platforms
  • Design Guidelines
  • Accessibility
  • Component Blueprints
  • Utilities
  • Design Tokens
  • Icons
  • Tools
  • Resource

Airbnb Design

Airbnb's design is leading the industry's design culture. We've built a story about a design culture that goes beyond design for implementation. Based on various topics related to design, we have solved the problem in the form of a blog about Airbnb's unique problem-solving method.

https://airbnb.design/

Adobe Spectrum

Adobe's design language that provides services such as Photoshop and Premiere. Aiming for a design system that grows with the community for various platforms. Detailed definitions and descriptions of the foundations of design systems, such as design tokens. Also, guidelines for the text used in the content are thoughtfully arranged.

https://spectrum.adobe.com/

  • Foundation
  • Content
  • Components
  • Patterns
  • Tools and Resources

Uber Design system

Uber's design system. The announcement of Uber's design system has always been a topic of discussion. It houses the Uber brand designed by Wolff Olins. It is known for its bold and solid design language. In particular, the detailed guidelines for motion are impressive.

https://brand.uber.com

  • logo
  • color
  • composition
  • iconography
  • illustration
  • motion
  • photography
  • Tone of Voice
  • Typography

Audi Design System

This is Audi's design system that produces world-class luxury cars. It delivers centered on how the brand identity of Audi should be conveyed. The goal is to deliver a consistent user experience at every touchpoint that touches Audi, from the car to the application.

https://www.audi.com/ci/en/renewed-brand.html

  • Brand Appearance
  • Basics
  • User Interface
  • Communication Media
  • Corporate Branding
  • Corporate Sound
  • Motion Pictures
  • Brand in Space
  • Audi Motorsport
  • Dealer Facility

Desgin Compass

--

--