--- title: "Design System" url: "https://www.insideuxdesign.com/en/glossar/design-system" language: "en" description: "What is a design system? A plain-language explanation with an example and practical tips. Learn what it’s made of and how it keeps your team consistent." published: "2026-10-14T09:50:31+02:00" updated: "2026-10-14T12:59:00+02:00" --- # Design System A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere. - **Buchstabe:** D UX glossary # Design System A design system is a shared toolkit of reusable building blocks and rules. It helps teams design and build interfaces that look and behave consistently everywhere. Imagine an online bank whose app, website and customer portal are built by three different teams. On the website, the most important button is blue and square. In the app, it’s green and rounded. In the portal, it says “Submit” instead of “Transfer.” Each team did solid work on its own. Put together, the product still feels like a patchwork quilt. This is exactly the problem a design system solves: it makes sure everyone builds with the same parts and follows the same rules. ## Explained simply A design system is like a well-organized box of building blocks that comes with instructions. The blocks are ready-made interface elements such as buttons, input fields or notification boxes. The instructions explain when to use which block and how it behaves. Anyone building something new reaches into the box instead of carving every piece from scratch. The Nielsen Norman Group describes a design system, in essence, as a complete set of standards for managing design at scale: reusable components and patterns that cut down on duplicate work and give teams a shared language. ## What a design system is made of Most design systems have three layers. The **style guide** sets the foundations: colors, typography, logo, tone of voice and rules for [accessibility](https://www.insideuxdesign.com/en/glossar/accessibility). The **component library** holds the individual building blocks, each with a name, a description, its states (such as “disabled” or “error”) and, ideally, the matching code. The **pattern library** shows how components work together, for example in a sign-up form or a product list. Underneath, you’ll often find *design tokens*. These are named values that store design decisions, such as “primary color” or “spacing small.” If the primary color changes, you update one token and every place that uses it follows. Since October 2025, there’s a first stable, vendor-neutral standard for this: the Design Tokens Specification 2025.10, published by a W3C community group. A closely related idea is Atomic Design, a method for building components from the smallest element up to the full page. You can read more in [What Is Atomic Design?](https://www.insideuxdesign.com/en/blog/what-is-atomic-design) ## An example Back to the online bank. Before: every team builds its own forms. Error messages appear at the top, below the field or not at all. A new screen takes days because every little detail gets debated. After: there’s one shared input field with defined states, one error pattern and one rule for button labels. New screens are assembled from existing parts, and when the bank updates its brand color, the team changes a single token instead of hundreds of files. ## Why it matters A design system saves time on routine work, so more energy goes into the genuinely hard questions: flows, content, priorities. It makes onboarding new team members easier. And it creates a shared language between design and engineering, because everyone means the same thing by “primary button.” For smaller teams, a lean start often makes the most sense. [Design Systems for Small Teams: When They Pay Off and How to Start Small](https://www.insideuxdesign.com/en/blog/design-systems-for-small-teams) shows how. ## In practice - **Start with what you have.** Collect screenshots of every existing button, color and form field. The inconsistencies show you where a shared standard will help most. - **Treat design and code as one.** A component that only exists in the design tool will quickly drift in code. Maintain both together with your developers. - **Decide who owns it.** A design system is never finished. Agree on who reviews, documents and announces changes. ## Related terms [Wireframe](https://www.insideuxdesign.com/en/glossar/wireframe), [Prototype](https://www.insideuxdesign.com/en/glossar/prototype), [Microcopy](https://www.insideuxdesign.com/en/glossar/microcopy) ## Sources - [Therese Fessenden: Design Systems 101. Nielsen Norman Group, 2021](https://www.nngroup.com/articles/design-systems-101/) - [Design Tokens Community Group: Design Tokens specification reaches first stable version. W3C, 2025](https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)