19. Patterns, Templates, and Product-Specific Components

Connect primitives to patterns, templates, and product-specific experiences.

Do not put every repeated UI into the "core" package.

Use layers.

Diagram source
Mermaid
flowchart TD
    A[Primitives]
    B[Core Components]
    C[Patterns]
    D[Domain Components]
    E[Product Screens]

    A --> B --> C --> D --> E

Example:

Primitive:
  Popover

Core:
  Select

Pattern:
  SearchFilterBar

Domain:
  TransactionFilter

Product:
  TransactionsPage

This prevents the design system from becoming a giant product-specific dependency.