Size

How we size components directly affects the way users interact with content across devices. Proper sizing ensures a seamless experience, enabling users to navigate and understand the product. On desktop, components are smaller as cursors are more precise, while on mobile, they must be scaled up for touch interactions and accessibility. Adapting sizes to devices maintains clarity and makes each element's function more intuitive.

Scale

Watson is designed for web platforms, and to deliver accessible experiences at all scales, we provide two different sizes: one cursor-based and another one for touch devices.

Usage

Scale by breakpoint

Using the right scale for each breakpoint ensures a proper cross-device experience.