https://uxdesign.cc/7-requirements-of-a-holistic-design-system-154fd6bdd9a5

rangle.io

There's a common misconception that a Design System is just a Style Guide or a Component Library, terms people often use interchangeably. However, in our opinion, those are both sub-components of a Design System.

A Design System is a systematic approach to product development — complete with guidelines, principles, philosophies, and code. It shines a spotlight on how a team designs, making it a fantastic tool for scaling your design practice, reducing the need for hand-off and promoting more collaboration. As Nathan Curtis says, a “Design System isn’t a project, it’s a product serving products”. Our approach to a Design System includes:

1. Design Language: The overall visual design of a digital product. This foundation defines characteristics such as typography, colors, icons, spacing and information architecture. The essence of your brand in a digital context. It is maintained as Design Tokens in code.
2. Design Kit: A library of shared styles, symbols or components that can be used by product teams to design or prototype new experiences. These symbols mirror the JavaScript components from the component library and are updated to be always kept in sync.
3. Component Library: A set of JavaScript components that are version controlled and are composed to build one or more products.
4. Sandbox: A tool for developing components in isolation, document use cases and write structural or visual tests. This is for the Design System developers.
5. Documentation: Tying everything together it has guidelines on how to consume the Design System, design and dev considerations and detailed documentation for each component. The documentation site often includes a live playground which is aimed at the consumers to try out the Design System in the browser.
6. A Governance model for how we can continue to evolve the Design System and how others can contribute to it.

It’s important to understand that a Design System is not a visual system or a design language; it is not a style guide, not a CSS framework, nor a pattern library. And yet, all these artifacts use system thinking (and system design), which is not new to us.