What is a web design system?
Use shared rules, components, and guidance to make website pages consistent and easier to maintain.
A web design system is a shared set of interface rules, reusable parts, and instructions. The web means pages used in a browser. Without shared rules, the same Save button may look and behave differently across pages.
Keep these basics in mind
- A style guide records appearance rules such as colours, typography, and spacing.
- A component is a reusable interface part, such as a button or input. A component library collects these parts.
- A design system also explains when to use a part, its states, how to change it, and who maintains it. It connects design files with working pages.
- Consistency means using similar expressions for the same meaning and action. It does not require identical pages.
See Adobe Spectrum’s introduction for these relationships. USWDS design principles emphasise user needs and continuity across experiences.
How does a component reach a page?
A before-and-after illustration
This is a hypothetical website. The table shows design decisions, not actual project data.
| Item | Each page makes its own decisions | With shared rules |
|---|---|---|
| Save button | Sometimes Confirm, sometimes Submit | The same save action uses Save |
| Input error | Sometimes red only, sometimes explained | Identify the field and how to fix it |
| Page title | Size and meaning are unclear | Use the same role for the same heading level |
Walk through an example
A booking website needs an Edit booking page. The designer finds an existing form and Save button; the developer reuses their web implementations. The team checks realistic text lengths and keyboard use. If an error message is unclear, they improve the guidance and component before adopting the change on other booking pages.
Limits and common misunderstandings
A design system is more than a polished Figma file. Figma is a tool for designing interfaces and collaborating on them; the final page still needs browser implementation and checks. A system reduces repeated decisions, but cannot judge every page’s content or guarantee a business outcome.