- **Epistemic status:** #evergreen **TL;DR:** Also named design system and design language. Some people might have different meanings depending on who you ask. A design language system (DLS) is a library with a particular [[Design atmosphere]] that contains reusable components, clear guidelines and rules, and why use this system. The main objective of a DLS is to heighten the level of harmony in a digital ecosystem and assemble any number of applications with clear communication. If your design system does not communicate properly the why, how, and who about different aspects, it will often fail to reach its destination. ## Importance of a Design Language System It is essential that everybody, especially [[Stakeholders]] understand the importance of the DLS. The DLS will define the [[Brand identity]], making it easy to be distinguished in the wild. **Internally,** it creates a holistic to ensure the team is adhering to the same methodologies and patterns. Every team member should use this as a reference on any project they are working on, and it encourages collaboration since any change has to adhere to the system. **Externally,** it creates harmony and cohesion within a platform. When colors, interactions, and patterns are standardized, it creates a sense of familiarity and security. After the [[Stakeholders]] understand the importance of the DLS, the next question will be what requirements are needed. ## Design Language System Requirements The following are some requirements your DLS will need: - Reusable components of UI following [[Component-based Development]] - Naming conventions - Grid System - Layouts - Typography - Color Palette - Pattern library - Iconography - Rules and guidelines on how a DLS is utilized If the [[Stakeholders]] are convinced, you will need some guidelines to establish your DLS ## Guidelines to establish a Design Language System - [[Build a future friendly web]] - [[Audit applications]] - [[Define Team Principles]] - [[Define a naming convention using Atomic Design and BEM]] - [[Develop and maintain a library for your Design Language System]] - [[Create a governance plan for your Design Language System]] ## Design Language System Examples The following examples should inspire you in building your own DLS: - [Design System](https://atlassian.design/) by Atlassian - [Design](https://cloudflare.design/) by CloudFlare - [Lightning Design System](https://www.lightningdesignsystem.com/) by Salesforce - [Polaris Design System](https://polaris.shopify.com/) by Shopify - [Design Language](https://www.ibm.com/design/language/) by IBM - [Design](https://developer.apple.com/design/) by Apple --- ## References - “A Comprehensive Guide to Design Systems | Inside Design Blog.” Accessed January 30, 2022 <https://www.invisionapp.com/inside-design/guide-to-design-systems/> - “Creating a Design System Language for Your Product | Speckyboy Design Magazine.” January 26, 2017 <https://speckyboy.com/creating-design-system-language/> - “Design Language.” In _Wikipedia_, January 3, 2022 <https://en.wikipedia.org/w/index.php?title=Design_language&oldid=1063473540> - “Design Language System. Scaling a Design Team through Systems… | by Patrick N. Lewis | Patrick N Lewis | Medium.” Accessed January 30, 2022 <https://medium.com/patricknlewis/design-language-system-23223dd86b54> - “Design Language System. Working in the Design Industry for The… | by Swetha Suresh | UX Planet.” Accessed January 30, 2022 <https://uxplanet.org/design-language-system-d438f4aa30e0> - “What Is a Design Language… Really? | by Nate Baldwin | Thinking Design | Medium.” Accessed January 30, 2022 <https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793> - “What’s a Design System, Design Language, and Design Language System? And What’s the Difference? | by Max. Speicher | The Startup | Medium.” Accessed January 30, 2022 <https://medium.com/swlh/whats-a-design-system-design-language-and-design-language-system-and-what-s-the-difference-e157852d6ec0>