Glossary

Design system

A design system is the shared set of components, patterns and rules a product is built from: the button in its variants, the form field with its error state, the spacing scale, the type scale, the colours and what each is for.

Its purpose is consistency at speed. A new screen is assembled from parts that already exist and already handle focus, error and loading states, so it is faster to build and correct by default rather than by review.

It pays for itself on products with many screens or several teams, and it is overhead on a five-page site. The failure mode is a system that documents components nobody uses, which happens whenever it is maintained separately from the code that ships.

← Back to the glossary