Standardized spacing values help us create consistent user interfaces (UIs). This consistency makes it easier for customers to scan, browse, and utilize our UIs as we're setting visual rhythms and expectations that customers can rely upon.


Dialtone uses a spacing system based on a 4-pixel system, providing half-steps where deemed necessary. This 4px unit forms the base measurement unit for spacing in Dialtone.

A layout example with spacing values to show how the spacing system is used.

CSS Variables

ValuePixel EquivalentActual output

Less Variables

ValuePixel EquivalentActual output

Utility Classes

Aside from the spacing variables, it may be necessary to use the following utility classes to manage interface spacing:

Last Updated: