A design system is a library of reusable interface elements together with rules for their use. It contains foundational decisions such as the colour palette, typography, spacing and grid, components built on top of them such as buttons, form fields, cards, alerts and navigation, and rules for when each element is used. The benefit is practical and grows with the size of the project: new pages are assembled from ready-made elements instead of being designed from scratch, the interface looks consistent, fixes are made in one place, and handover between designer and developer stops being a source of misunderstanding. For a small website it is an unnecessary investment; for an e-commerce store or an application with dozens of screens it pays for itself within a few months. The system must be kept alive and maintained, otherwise it falls apart.
See also: Wireframe and prototype, Brand consistency, Microcopy.
