Design Systems and Components

Why a design system

As a product grows, screens drift apart – buttons look different, spacing varies, nothing feels unified. A design system prevents that by defining reusable, documented building blocks that designers and developers share.

What's inside

• Design tokens – named values for colours, spacing, radii and type (e.g. color-brand-600, space-4). Change once, update everywhere.
• Components – buttons, inputs, cards, modals, each with defined states (default, hover, disabled).
• Patterns – how components combine into forms, tables and navigation.
• Guidelines – when and how to use each piece.

Benefits

Consistency for users, speed for the team (assemble screens from ready-made parts), and easier maintenance (fix a component once). Well-known examples include Google's Material Design and Apple's Human Interface Guidelines.

Key points

• A design system keeps a growing product consistent.
• Tokens centralise colours, spacing and type.
• Reusable components with defined states speed up building.
• It benefits users (consistency) and teams (speed + maintenance).