Scale
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 token | Multiplier | High density (px) | Medium | Low | Touch |
|---|---|---|---|---|---|
--salt-size-base | x1 | 20 | 28 | 36 | 44 |
| x2 | 40 | 56 | 72 | 88 | |
| x3 | 60 | 84 | 108 | 132 | |
| x4 | 80 | 112 | 144 | 176 |
| Size token | Multiplier | High density (px) | Medium | Low | Touch |
|---|---|---|---|---|---|
--salt-size-icon | x1 | 12* | 12 | 14 | 16 |
| x2 | 20 | 24 | 28 | 32 | |
| x3 | 30 | 36 | 42 | 48 | |
| x4 | 40 | 48 | 56 | 64 |
* 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.
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.