Spacing in UI design refers to arranging elements according to a specific layout, enabling us to create the best user experience by ensuring clear readability.
Space in FDS is delivered via tokens. Spacing units are based on the same scale as typography to help keep them in proportion with each other.
Base unit and tokens
FDS spacing scale relies on an 8px baseline grid and includes small scaling to balance components properly. (1rem=16px)
Tokens

Using space tokens
Small values
These values, typically ranging from 2px to 16px, are used for creating tight spacing between elements such as icons and labels that are used together.
This includes icon buttons, helper texts, tags, checkbox groups, radio buttons, tabs, toggle switches, and other small UI components.
Medium values
Medium spacing values, ranging from 24px to 32px, are optimal for creating sufficient space between elements such as form inputs, cards (vertical and horizontal alignment), and medium-sized components' paddings. They help balance between visual separation and maintaining a cohesive design.
Large values
Ranging from 32px to 64px, large spacing values are ideal for creating generous space between major sections, modules, or large elements in the UI. They enhance readability, improve visual hierarchy, and contribute to a spacious and organized layout.
Spacing types
Margin
The margin values are the space between the container and the layout. For example using scape tokens as margin, the distance between the top header and the container, or the distance from a widget to the layout edge.
The ideal margin value should be used as a minimum 16px and a max 32px. Note: Since it is not yet finalized, these values have not been determined yet.
Padding
Padding is the distance between a component and its inner container or the distance between other content within the body area (container). Small spacing token values should be used to determine padding values.
Line spacing
Letter spacing and line height are important due to the harmony between each typography styles using typography tokens. Line spacing values are based on 1 rem. You can see these values on typography section.
White spacing
Whitespace (also known as empty state) helps align components within a layout and creates focal points on an interface by organizing them into sections. nstead of being crowded, it strengthens the experience by using space efficiently.
Layout properties
Order/hierarchy
By adjusting spacing, we can highlight important parts and guide users' eyes to where they need to look first.
Similarity
When elements have consistent spacing, it helps users recognize patterns and understand how things are related.
Proximity
Spacing also helps us group similar items together and keep different sections distinct so users can find what they need quickly.
Optical alignment
Optical alignment ensures that elements appear visually balanced and aligned, even if they are not perfectly mathematically aligned. This involves adjusting spacing to consider visual weights and proportions, ultimately enhancing the overall visual appeal of the interface.