Scale allows you to give components greater or lesser prominence within an interface through a multiplier of their default size.

Scale works hand-in-hand with density to allow the prominence of components such as Avatar and Country Symbol to be changed within a layout.

This is achieved by applying a multiplier to the component. By default, scale is set to x1, applying x2 will double the size of the component, x3 will triple the size, etc. Scale can be used in conjunction with a size-token, as the following examples and tables show.

The Size foundation establishes standard dimensions across the system. This ensures components maintain a consistent spatial relationship to the elements around them.

Size tokenMultiplierHigh density (px)MediumLowTouch
Size tokenMultiplierHigh density (px)MediumLowTouch

* Icons have a minimum size set at 12px and should not be displayed any smaller. For high density this means the default size of an icon is 12px, but the rest of the scale grows based on small base dimension.

The Salt foundations are still in progress, and we'd appreciate your thoughts and feedback. Please contact us if you have any comments or questions.