Spacing

Standardized spacing values helps 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 rhythmns and expectations that customres can rely upon.

Overview

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

Value Pixel Equivalent Actual output
var(--su0) 0px 0
var(--su1) 1px .1rem
var(--su2) 2px .2rem
var(--su4) 4px .4rem
var(--su6) 6px .6rem
var(--su8) 8px .8rem
var(--su12) 12px 1.2rem
var(--su16) 16px 1.6rem
var(--su24) 24px 2.4rem
var(--su32) 32px 3.2rem
var(--su48) 48px 4.8rem
var(--su64) 64px 6.4rem
var(--su72) 72px 7.2rem
var(--su84) 84px 8.4rem
var(--su96) 96px 9.6rem
var(--su102) 102px 10.2rem
var(--su114) 114px 11.4rem
var(--su128) 128px 12.8rem
var(--sun1) -1px -.1rem
var(--sun2) -2px -.2rem
var(--sun4) -4px -.4rem
var(--sun6) -6px -.6rem
var(--sun8) -8px -.8rem
var(--sun12) -12px -1.2rem
var(--sun16) -16px -1.6rem
var(--sun24) -24px -2.4rem
var(--sun32) -32px -3.2rem
var(--sun48) -48px -4.8rem
var(--sun64) -64px -6.4rem
var(--sun72) -72px -7.2rem
var(--sun84) -84px -8.4rem
var(--sun96) -96px -9.6rem
var(--sun102) -102px -10.2rem
var(--sun114) -114px -11.4rem
var(--sun128) -128px -12.8rem

Less Variables

Value Pixel Equivalent Actual output
@su0 0px 0
@su1 1px .1rem
@su2 2px .2rem
@su4 4px .4rem
@su6 6px .6rem
@su8 8px .8rem
@su12 12px 1.2rem
@su16 16px 1.6rem
@su24 24px 2.4rem
@su32 32px 3.2rem
@su48 48px 4.8rem
@su64 64px 6.4rem
@su72 72px 7.2rem
@su84 84px 8.4rem
@su96 96px 9.6rem
@su102 102px 10.2rem
@su114 114px 11.4rem
@su128 128px 12.8rem

Utility Classes

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