When we build visual web pages we always use these building blocks: fonts colours, and spacing. Every site you see uses these building blocks to show the user an interface.
🧩 Components
In fact they use these building blocks to design components. The components are composed on the page to make a user interface. All web coding is the composition of small, simple pieces into more and more complex systems.
It is the job of a developer to build the smallest, simplest piece she can. We are always operating within a wafer thin layer of a vastly more complex system, and it's our job to make that layer as clear and simple as possible, so all the other layers can predict what it might do.
Design System
Design systems are libraries of premade components that developers use to compose interfaces. Each design system reflects the priorities of the developers who made them.
GDS, the UK government design system, is a good example of a design system made and tested a lot to be accessible, because everyone in the UK has to use it. W3C Design System is another good example of a design system made to be accessible, because it's made by the people who make the web standards.
Notice how even components with similar names and similar goals are constructed differently. All design systems are different, but the underlying format is recognisable. Just like every detective novel is different, but the genre as a whole is recognisable.
Collaboration
When we build a house, the roofer cannot begin until the walls are up. But when we build a web application, we can build many parts at the same time. I can build cards while you set up a database. We can even build different parts of the same page at the same time. We do this by isolating our work into separate components.
🧪 Pattern Recognition, Pattern Definition
Developers are collaborators, composers, conductors. Like musicians, developers describe their work in terms of rules for others to understand and use that work. In this way, developers can construct systems by organising many existing pieces into a new symphony. But in order to do this, developers have to constantly recognise, describe, and reproduce patterns.