Design system

A design system is a framework that organizes colors, fonts, parts such as buttons and the rules for using them into one standard, so that a service's screens look consistent. Designers and developers share the same parts and names, so you save the time of building something new for every screen.

As products multiplied and teams grew, it often happened that each team built the same button differently. To prevent this, companies have been moving from keeping design guides only as documents to linking them with real code parts. Recently, it has also become important to make AI-generated results fit this standard.

A design system is often made of three layers: design tokens, parts and usage guidelines. Tokens hold values such as colors and spacing. Parts hold elements such as buttons that use those values. Guidelines hold when and which part to use. The three layers refer to one another and form a single standard.

In practice it works by defining parts in a design tool and then carrying the same parts over to code components and linking them. With this link, what the designer changes shows up in what developers build, and an accessibility fix made by a developer is also recorded in the design documents.

A company that runs several services uses it to build a common button and input field once and reuse them in every product. When building a new feature, trying existing parts first makes it easier to stay consistent.

To use it, the whole team must agree to follow the same standard, and someone must be responsible for managing the parts. In a small project, building one that is too big for its size can only raise the upkeep cost.

Some people think a design system makes every creative screen look the same. In reality, many systems also include rules that allow exceptions on top of the common standard.

Writing the documents does not mean they get used right away. If the parts do not match the real code or updates stop, the standard soon goes out of date, and teams easily go back to doing things their own ways.

It is like a box of building blocks with set shapes and colors and an instruction sheet inside. Whoever assembles them, the pieces snap together to the same specification. A design system works as the blocks and the instruction sheet for building screens.

Knowing a design system lets you explain why a screen made quickly with AI does not match an existing service. Planners, designers and developers speak by the same standard, which helps in a practical way to cut rework before moving to a real service.