Size matters
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.
This documentation provides guidelines on how to size components effectively for different devices. It covers the importance of proper sizing for user interaction, the scaling approach for web platforms, and specific usage instructions based on device breakpoints.
By following these guidelines, you can ensure a seamless and accessible user experience across all devices.
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.
|
Sample |
Description |
Token |
|---|---|---|
|
The quick brown fox jumps over the lazy dog calc(32 / var(--w-base-rem) * 1rem) |
size M |
--w-size-m |
|
The quick brown fox jumps over the lazy dog calc(44 / var(--w-base-rem) * 1rem) |
Size L |
--w-size-l |
Usage
Scale by breakpoint
Using the right scale for each breakpoint ensures a proper cross-device experience.
|
Breakpoint |
Scale |
|---|---|
|
viewport-xs 320px |
Mobile --w-size-l |
|
viewport-s 544px |
Mobile --w-size-l |
|
viewport-m 768px |
Mobile --w-size-l |
|
viewport-l 992px |
Desktop --w-size-m |
|
viewport-xl 1280px |
Desktop --w-size-m |
|
viewport-xxl 1440px |
Desktop --w-size-m |