ระบบการออกแบบ คู่มือสไตล์ และคลังรูปแบบ

People use design system, style guide, and pattern library interchangeably — but they are not the same. Confusing them leads to half-built tools.

A style guide documents visual and editorial rules — colors, typography, tone. It tells you how things look, not how to build them.

A pattern library collects reusable solutions to recurring UI problems — a card, a form, a nav pattern — focused on the how conceptually.

A component library is the coded layer: real Button, Input, and Modal components engineers actually import. Below makes it concrete.

A design system is the superset — style guide, pattern library, and components plus principles, governance, docs, and process binding them.

Picture nested circles: style guide (rules) inside pattern library (solutions) inside components (code) inside the full design system.

Naming matters: if leadership thinks a Figma sheet is a design system, they underfund the engineering and governance it really needs.

Documentation is the glue that turns a pile of components into a system — usage rules, do/don't examples, and the reasoning behind them.

The promise is one trusted place: when the Button matches in Figma, code, and docs, debates end. Only the system's process guarantees that.

Teams mature in order: style guide, then patterns, then coded components, then a true design system with governance. Know where you stand.

From now on, use the right word. If someone wants a "design system" but only needs color tokens, clarify scope early and avoid disappointment.

You can now name the layers: style guide (rules), pattern library (solutions), component library (code), and design system (the whole, plus process).