Spacing Helper Classes

Our spacing system follows a strict scale to ensure visual consistency. Utility classes are constructed using the pattern:
.[type]-[direction]-[size]

Example: .m-t-s for margin-top: 16px or .p-x-xl for padding-left: 48px and padding-right: 48px.

Demo

m-r-xxl

p-xxl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

m-l-s m-y-m

m-t-xs

Directions

The direction determines which side of the element the spacing is applied to.

Key	Direction	CSS Property Equivalent
t	Top	*-top
b	Bottom	*-bottom
l	Left	*-left
r	Right	*-right
x	Horizontal	*-left & *-right
y	Vertical	*-top & *-bottom
(empty)	All Sides	margin or padding

Note: When using spacing mixins in SCSS, use the keyword "all" instead of an empty string to target all sides.

Spacing Scale

All sizes are based on a fixed pixel scale, mapped to Sass variables.

Key	Size (px)	Size (rem)	Usage Context Examples
reset	0px	0	Removing default browser margins
xxs	4px	0.25rem	Micro-adjustments
xs	8px	0.5rem	Tight groupings / Icon spacing
s	16px	1rem	Standard small gap
m	24px	1.5rem	Default component spacing
l	32px	2rem	Section gutters
xl	48px	3rem	Large structural gaps
xxl	64px	4rem	Distinct page sections
xxxl	96px	6rem	Hero section padding

Negative Margin Utilities

Negative margins are used to pull elements outside of their natural flow or to offset parent padding. These follow the naming convention: .-m-[direction]-[size].

Example Class	Result
.-m-l-xs	margin-left: -8px ($space-xs)
.-m-r-l	margin-right: -32px ($space-l)
.-m-t-l	margin-top: -32px ($space-l)
.-m-b-xxs	margin-bottom: -4px ($space-xxs)

SCSS Spacing Mixins

For internal component styling, use our shorthand mixins for padding (p) and margin (m). This ensures compliance with the design system scale.

Syntax: @include [type]([direction], [size]);

.c-custom-card {
  @include p("all", "m"); // Padding: 24px on all sides
  @include m("t", "xl");  // Margin-top: 48px
}