Platform scale
Spectrum is designed for multiple platforms. There are two different scales for user interfaces in order to accommodate cursor and touch experiences: a desktop scale and a mobile scale.


Table of contents#
Principles#
Designing for different scales requires finding a balance between platform best practices and design system consistency. Here are the ways to ensure that properties can accommodate to different environments while still sharing a common design language.
Choosing the correct scale#
Scale by platform#
Each platform and context require the use of an appropriate scale. Desktop platforms, like macOS, use the desktop scale. Mobile platforms, like iOS and Android, use the mobile scale. Other platforms that may blur the line between desktop and mobile experiences, such as a device with a touch-enabled desktop screen, should accommodate both scales. For example, UWP (Windows) should display the correct scale depending on the device, and web browsers should display the correct scale based on the width of the browser window.
#
Areas and interactions#
Desktop and mobile scales are both designed to handle cursor and touch interactions, but the primary interaction for the desktop scale is cursor-based while the primary interaction for the mobile scale is touch-based. Each component includes a set of areas: a placement area for layout purposes, one or more cursor hit areas for cursor interactions, and one or more touch hit areas for touch interactions. Components have only one placement area, but can have multiple hit areas as needed.