Carlos Cifuentes
Glossary

Design system

A design system is the shared set of design tokens, UI components, usage guidelines and governance that keeps a product's interfaces consistent across teams.

A design system collects the decisions about how a product looks and behaves and makes them reusable. It usually contains design tokens, a component library in code, the matching library in the design tool, documentation with usage rules and accessibility guidance, and a process for proposing and releasing changes.

It is a product with its own users, the product teams. It needs an owner, versioning and a roadmap.

Example

A company has six teams building parts of one back office. Before the design system, each team had its own date picker, and three shades of the primary color were in use. The design system team publishes @acme/ui with a button, form fields, a table and a date picker, plus a documentation site. Teams replace their local versions release by release. A fix to keyboard navigation in the date picker now reaches all six teams through one package update.

Common misunderstanding

A component library alone is often called a design system. The library is the most visible part. Without tokens, documentation and a decision process, teams fork components or work around them, and the inconsistency comes back.

Version management is the other trap, especially with micro-frontends. If each remote can pin any version, users may see two generations of the same component on one screen. Agree on how the library is shared at runtime and on how far a remote may lag behind.

During a migration, components that must serve both the legacy and the new application can be delivered as web components. Another option is to share only tokens at first. See micro-frontends for how this fits a platform.

Why it matters. Users judge a platform as one product, so independently built micro-frontends need a common design system. In a migration it keeps old and new screens visually coherent while both exist.

Related terms

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn