Spacing

Units

All spacings increments are based on a 4px base unit, going from 4px to 64px. Together with our 16px base font size we can assure a harmonic relationship between elements. When defining additional larger spacings on your own for more specific cases, make sure they follow the same logic.

4
8
12
16
24
32
64

CSS Variables

var(--ds-spacing-1)
var(--ds-spacing-2)
var(--ds-spacing-3)
var(--ds-spacing-4)
var(--ds-spacing-6)
var(--ds-spacing-8)
var(--ds-spacing-16)

Paddings

Various helper classes can be used to apply padding to your UI. Most components use a vertical padding of 8, 12, 16 or 24px. For the height of elements, such as buttons or forms, working with a fix height ensures different UI elements line up correctly when used together.

CSS classes

The following CSS classes can be applied with any of the spacing sizes: 1, 2, 3, 4, 6, 8, 16

.ds-pad-left--<size>
.ds-pad-right--<size>
.ds-pad-top--<size>
.ds-pad-bottom--<size>
.ds-pad-ver--<size> /* add padding left and right */
.ds-pad-hor--<size> /* add padding top and bottom */
.ds-pad-all--<size>

Margins

CSS classes

The following CSS classes can be applied with any of the spacing sizes: 1, 2, 3, 4, 6, 8, 16

.ds-mar-left--<size>
.ds-mar-right--<size>
.ds-mar-top--<size>
.ds-mar-bottom--<size>
.ds-mar-ver--<size> /* add padding left and right */
.ds-mar-hor--<size> /* add padding top and bottom */
.ds-mar-all--<size>