Space
Every part of ActiveCampaign’s UI is intentional, including the empty space between elements. Space can create relationships, grouping, and hierarchy. With a spacial scale, we take guesswork out of spacing to help designers deliver consistent and functional layouts.
Spacial scale
The spacial scale is set with 4px as the base.
space-half
2px
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-7
28px
space-8
32px
space-12
48px
space-16
64px
space-20
80px
space-32
128px
Page layout
Rems vs. pixels
Unless utilizing a sidebar layout, the default page body padding is space-8.
In Camp, we differentiate between the units used for typography and spacing to ensure an optimal user experience. While typography utilizes rem units to benefit from accessibility features and adapt to user preferences for font sizes, we use pixels (px) for spacing. Pixels for spacing provide important benefits, including consistency and expected layout across devices, and the most accessible experience for our users.