Design System
Short definition
A design system is a reusable set of building blocks, a brand's colours, typography, buttons and components, gathered into one shared set of rules.
Colour palette, typefaces, button styles, form fields and card components are each defined once, and every new page is assembled from these ready components instead of being redrawn from scratch. It lives as a library in Figma and as a shared component set in code.
You meet it once more than one page or product needs to carry the same brand, or once the design and development teams need a common language to work from.
It is often confused with a brand guideline. A brand guideline is a document describing how to use a logo and colours; a design system goes further and includes actual, ready-to-use code and design components.
The most common mistake is building the design system as a beautiful Figma library while never updating the matching components in code; over time the design file and what actually appears on the live site drift apart. The correct approach is to treat the code component set as the single source of truth and put a clear process in place for reflecting every design change there too.
Why it matters
Designing and coding every page from zero wastes time and produces inconsistent buttons and colours across a site. A design system speeds up building new pages and keeps the brand identical everywhere.
Illustrative example
A flooring manufacturer's product, service and campaign pages are all built from the same button and card components, so a new page comes together in hours rather than days.
