What is a Design System?

A design system combines vision, methodology, and concrete components to create products and digital assets. It combines ideas and practice to create a system ensuring that every product and digital asset follows the same design principles.

The people responsible for creating software products, digital experiences, and marketing content use a design system to represent all design decisions.

A design system is one way an organization realizes its objectives. It establishes a product or application's visual and user-experiential aspects. It also establishes a methodology and collaborative environment for the main stakeholders—the designers, developers, marketers, and product teams as they build their assets.

Design System: user interface (UI) and user experience (UX)

A design system sets a brand's visual style. It defines, for example, a user interface (UI), such as its typography, color palettes, and the shapes of buttons and other objects that users see and interact with. UI styling also includes the layout of a web page and an application’s interface, defining everything from how to line up objects on a page to the spacing between the objects.

A design system also includes the user experience (UX). In fact, the UI and UX are not really separate elements. They often overlap. The UI is a website or application’s look and feel; the UX is how a user navigates through that UI.

Design system-driven UX enables users to interact seamlessly and with better engagement across all your digital platforms. The UX defines where and when to place objects and how many to put on a page. It’s about the user journey and how they should move from one part of an interface to another or one page to the next.

UX guidelines answer questions such as: Where do you place a CTA? Where and when do you ask for customer information? Do you place a search bar in the corner or front and center? These UX decisions come from following a design system’s UX guidelines.

The designers use applications like Figma, Sketch, and Adobe XD to create a UI Kit that contains actual software objects, such as interface layouts, and a library of digital components to place on the interfaces.

The design system’s UI Kit creates reusable components

A UI kit or component libraries is a collection of already designed and coded components. More generally, they are libraries of visual elements (layouts, buttons, headers, etc.) used and reused on all online communication and digital channels.

A UI Kit contains hundreds of components, such as buttons, text boxes, sliders, and many other digital components designed by designers, marketers, and product teams. Based on these designs, developers use the UI Kit to create reusable prototypes of each component. Reusability is central to a design system. All components should be easily adaptable for production use and reuse across multiple applications and digital channels. Furthermore, these concrete layouts and components should cover the company’s front-end needs, ensuring, among other things, cohesion and consistent branding.

The design system’s style guide and documentation

When an organization implements a design system, its creators expect it to drive all software and product development. However, for this to succeed, it must be communicated and understood.

While the UI Kit goes a long way in communicating the global designs, a design system needs a playbook that the stakeholders (designers, developers, marketers, and product teams) can share as they build their software and products, ensuring an intentional end result consistent with the organization’s objectives.

The style guide

That playbook comes in the form of a style guide. A style guide shows the visual language of the organization's design system, including the colors, typefaces, margins, and padding. It is the blueprint for all new UI elements and pre-defined UI Kit components.

Some playbooks include code snippets and similar content that can be used to build applications or products.

Documentation

Design system documentation is part of any software team. Design system documentation provides a common language between designers and developers. Developers can understand the reasoning behind the design decisions, UI/UX concerns, and vocabulary. Vice versa, developers can explain their decisions, as well as the technological possibilities and constraints in implementing current and future designs. By documenting decision-making, stakeholders can collaborate more easily, with more visibility and efficiency.

What is design system governance in the design process?

Design system governance defines the processes and collaborations that ensure a successful application of the system's guidelines throughout the organization. One tool of design system governance is a DXP.

Governance defines the roles and responsibilities of all stakeholders and how they work together. It defines the phases of the development cycle, starting with understanding the problem or need, then exploring solutions and designs, and finally, building, testing, and delivering the product into production.

For example, one organization may choose an agile delivery cycle, which includes daily or weekly updates. Another organization may prefer a longer upfront design period, with only monthly or quarterly releases.

A successful design system defines the design process as well as its elements.

Conclusion

A design system is part practice and part meta (a branding philosophy, a visual representation of an idea) and part practice. We will, therefore, describe what a design system is in a more aspirational way.

First, what is design? “Design is the rendering of intent.”

Second, what is a system? “A set of things — people, cells, molecules, or whatever — interconnected in such a way that they produce their own pattern of behavior over time.”

Third, combining those two definitions, we get: “An intentional set of connected things that create repeated behavior.”

In this article, we discussed the “connected things” of a design system:

1. A consistent UI/UX and branding
2. A UI kit and style guide to document the design system’s visual styles, components, and design choices
3. A collaborative central point for all stakeholders
4. A process to ensure the best go-to-production results

Defining these elements, a design system gives an organization the power to intend and achieve a set of repeatable behaviors—namely, a consistently successful product and digital output.