Spacing values help to create consistent interfaces by clearly defining relationships between components.
Spacing values are static and don’t change based on platform scale. Different spacing values can be used for different sizes and scales as needed.
Design token name | Value |
---|---|
spacing-50 | 2 px |
spacing-75 | 4 px |
spacing-100 | 8 px |
spacing-200 | 12 px |
spacing-300 | 16 px |
spacing-400 | 24 px |
spacing-500 | 32 px |
spacing-600 | 40 px |
spacing-700 | 48 px |
spacing-800 | 64 px |
spacing-900 | 80 px |
spacing-1000 | 96 px |
Spacing should be used to define the space between components.
Keep in mind that spacing values don’t apply to the padding within a component. For example, the padding between the top of a button and a label doesn’t use a spacing value.
Spacing is useful for individual elements that don’t need to adapt responsively to various viewport sizes. Responsive grids should still be used to design overall layouts.
Date | Number | Notes |
---|---|---|
Mar 16, 2022 | 1.0.0 |
|