Spacing
Spaces help generate groupings of information, which organize the screen and create a hierarchy that makes it easier to read and understand.
Overview
Spacing is used to build all Tangram components. Use the 8px grid as a basis for defining the spacing scales.
Small structures
It is the scale used to build the smallest available structures, such as components. Use values from 8px to 24px, depending on the structure's need.
Large structures
It is the scale used in compositions of 2 or more components in larger parts, such as patterns or entire screens. Use values above 24px depending on the structure's need.
Vertical rhythm
The spacings specified here are minimum values for certain types of content and allow to achieve the proper look and feel for the products. Do not use spacing smaller than the specified values.
Titles
The default spacing used between titles and the content immediately below them should be at least 16px (--size-spacing-04).
This rule is valid when the element below the title is text or some other component. The rule is not valid when below a title there is another title. For the latter case, there is the rule below:
Spacing scale
The spacing scale can be applied to the margin or padding properties. Below are the existing spacings in the design tokens:
| Token | Valor |
|---|---|
--size-spacing-01 | 4px |
--size-spacing-02 | 8px |
--size-spacing-03 | 12px |
--size-spacing-04 | 16px |
--size-spacing-05 | 24px |
--size-spacing-06 | 32px |
--size-spacing-07 | 40px |
--size-spacing-08 | 48px |
--size-spacing-09 | 56px |
--size-spacing-10 | 64px |
--size-spacing-11 | 96px |
--size-spacing-12 | 160px |