Foundations

The basic building blocks of the design system. Includes colors, typography, spacing, and much more.

Components

Reusable, self-contained UI elements like buttons, inputs, and cards. They provide a single source of truth for design and code, ensuring consistency, accelerating development, and maintaining a scalable user interface.

Patterns

Patterns are repeatable solutions to common design problems that provide guidance on how to use components and content together to achieve a specific user goal. They represent the "how-to" of a design system, moving beyond individual elements to create cohesive and consistent user experiences.

Templates

Predefined page layouts that demonstrate how components and patterns can be combined to achieve common user goals. They serve as a starting point for designers and developers, providing a consistent and efficient way to build new pages and features.

Accessibility

We aim for all components to meet the Web Content Accessibility Guidelines (WCAG 2.2 AA) and all design decisions to be inclusive. We base Watson components and guidance on the accessibility considerations listed here.