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 comprise, 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^[1] 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.^[2]

Notable design systems include Lightning Design System (by Salesforce),^[3] Material Design (by Google),^[4] Carbon Design System (by IBM),^[5] and Fluent Design System (by Microsoft).^[6]

Some of the advantages of a design system are:

• Streamlined design to production workflow.
• Creates a unified language between and within the cross-functional teams.
• Faster builds, through reusable components and shared rationale.
• Better products, through more cohesive user experiences and a consistent design language.
• Improved maintenance and scalability, through the reduction of design and technical debt.
• Stronger focus for product teams, through tackling common problems so teams can concentrate on solving user needs.^[7]

Design systems have been in practice for a long time under different nomenclatures. Design systems have been significant in the design field since they were created but have had many changes and improvements since their origin. Using systems or patterns as they called it in 1960s was first mentioned in NATO Software Engineering Conference (discussion on how the softwares should be developed) by Christopher Alexander gaining industry’s attention. In 1970s, he published a book named “A Pattern Language” along with Murray Silverstein, and Sara Ishikawa which discussed the interconnected patterns in architecture in an easy and democratic way and that gave birth to what we know today as “Design Systems”.

Interests in the digital field surged again in the latter half of the 1980s, for this tool to be used in software development^[8] which led to the notion of Software Design Pattern. As patterns are best maintained in a collaborative editing environment, it led to the invention of the first wiki, which later led to the invention of Wikipedia itself. Regular conferences were held, and even back then, patterns were used to build user interfaces.^[9] The surge continued well into the 90s, with Jennifer Tidwell's research closing the decade.^[10] Scientific interest continued way into the 2000s.^[11]

Mainstream interest about pattern languages for UI design surged again by the opening of Yahoo! Design Pattern Library in 2006^[12] with the simultaneous introduction of Yahoo! User Interface Library (YUI Library for short). The simultaneous introduction was meant to allow more systematic design than mere components which the UI library has provided.

Google's Material Design in 2014 was the first to be called a "design language" by the firm (the previous version was called "Holo Theme"). Soon, others followed suit.

Technical challenges of large-scale web projects led to the invention of systematic approaches in the 2010s, most notably BEM^[13] and Atomic Design. The book about Atomic Design^[14] helped popularize the term "Design System" since 2016. The book describes an approach to design layouts of digital products in a component-based way making it future-friendly and easy to update.

This section does not cite any sources. Please help improve this section by adding citations to reliable sources. Unsourced material may be challenged and removed. (March 2022) (Learn how and when to remove this message)

A pattern language allows its patterns to exist in many different shapes and forms – for example, a login form, with an input field for username, password, and buttons to log in, register and retrieve lost password is a pattern, no matter if the buttons are green or purple. Patterns are called patterns exactly because their exact nature might differ, but similarities provide the relationship between them (called a configuration) to remain the same. A design language however always has a set of visual guidelines to contain specific colors and typography. Most design systems allow elements of a design language to be configured (via its patterns) according to need.

A UI kit is simply a set of UI components, with no explicit rules provided on its usage.

A design token is a named variable that stores a specific design attribute, such as a color, typography setting, spacing value, or other design decision. Design tokens serve as a single source of truth for these attributes across an entire brand or system, and provide a wide array of benefits such as abstraction, flexibility, scalability, and consistency to large design systems. Design tokens, which are essentially design decisions expressed in code, also improve collaboration between designers and developers. The concept of design tokens exists within a variety of well known design systems such as Google's Material Design,^[15] Amazon's Style Dictionary,^[16] Adobe's Spectrum^[17] and the Atlassian Design System^[18]

The W3C Design Tokens Community Group is working to provide open standards for design tokens.^[19]

This section is written like a personal reflection, personal essay, or argumentative essay that states a Wikipedia editor's personal feelings or presents an original argument about a topic. Please help improve it by rewriting it in an encyclopedic style. (April 2023) (Learn how and when to remove this message)

A design system comprises various components, patterns, styles, and guidelines that aid in streamlining and optimizing design efforts. The critical factors to consider when creating a design system include the scope and ability to reproduce your projects and the availability of resources and time. If design systems are not appropriately implemented and maintained, they can become disorganized, making the design process less efficient. When implemented well however, they can simplify work, make the end products more cohesive, and empower designers to address intricate UX challenges.^[20]

• What is a Design System? by Robert Gourley
• Design Systems Handbook by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield. (Design Better by InVision)
• Post (in French): Why set up a design system?
• Design Patterns
• Example Design Systems