3. Terminology

The shared vocabulary of components, tokens, patterns, governance, and product pilots.

Component

A reusable UI unit with a defined responsibility and interaction contract.

Examples:

A packaged set of reusable components.

Examples of tooling used to browse components:

The visual and interaction vocabulary of a product.

It includes:

A named design decision represented as data.

Example:

{
  "color": {
    "background": {
      "danger": {
        "$type": "color",
        "$value": "#D92D20"
      }
    }
  }
}

Conceptually:

token name  -> semantic meaning -> resolved value

For example:

color.background.danger -> destructive background -> #D92D20

A design-tool representation of reusable system components.

For example:

A UI Kit usually represents the design-side interface of a design system.

A reusable solution for a recurring user experience problem.

Examples:

Patterns usually combine multiple components.

The decision-making framework for maintaining the system.

Governance answers:

A real product or feature used to validate the design system before wider adoption.

A pilot is extremely useful because isolated components often look perfect until used in an actual workflow.