The spacing system creates a balance and arranges
the page layout and its elements.

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)



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


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 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


By adjusting spacing, we can highlight important parts and guide users' eyes to where they need to look first.


When elements have consistent spacing, it helps users recognize patterns and understand how things are related.


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.

Further read