Spacings

Demo styling 
<div class="margin-bottom-md">
    <div class="inline-flex padding-xs margin-bottom-md color--white background--primary">.padding-xs</div>
    <div class="inline-flex padding-sm margin-bottom-md color--white background--primary">.padding-sm</div>
    <div class="inline-flex padding-md margin-bottom-md color--white background--primary">.padding-md</div>
    <div class="inline-flex padding-lg margin-bottom-md color--white background--primary">.padding-lg</div>
    <div class="inline-flex padding-xl margin-bottom-md color--white background--primary">.padding-xl</div>
    <div class="inline-flex padding-xxl margin-bottom-md color--white background--primary">.padding-xxl</div>
</div>
<div>
    <div class="flex margin-bottom-md">
        <div class="margin-right-xs color--white background--primary">.margin-right-xs</div>
        <div class="margin-right-xs color--white background--primary">.margin-right-xs</div>
    </div>
    <div class="flex margin-bottom-md">
        <div class="margin-right-sm color--white background--primary">.margin-right-sm</div>
        <div class="margin-right-sm color--white background--primary">.margin-right-sm</div>
    </div>
    <div class="flex margin-bottom-md">
        <div class="margin-right-md color--white background--primary">.margin-right-md</div>
        <div class="margin-right-md color--white background--primary">.margin-right-md</div>
    </div>
    <div class="flex margin-bottom-md">
        <div class="margin-right-lg color--white background--primary">.margin-right-lg</div>
        <div class="margin-right-lg color--white background--primary">.margin-right-lg</div>
    </div>
    <div class="flex margin-bottom-md">
        <div class="margin-right-xl color--white background--primary">.margin-right-xl</div>
        <div class="margin-right-xl color--white background--primary">.margin-right-xl</div>
    </div>
    <div class="flex margin-bottom-md">
        <div class="margin-right-xxl color--white background--primary">.margin-right-xxl</div>
        <div class="margin-right-xxl color--white background--primary">.margin-right-xxl</div>
    </div>
</div>
 
<div class="margin-bottom-md">
	{{#each spacings}}
		<div class="inline-flex padding-{{spacing}} margin-bottom-md color--white background--primary">.padding-{{spacing}}</div>
	{{/each}}
</div>
<div>
	{{#each spacings}}
		<div class="flex margin-bottom-md">
			<div class="margin-right-{{spacing}} color--white background--primary">.margin-right-{{spacing}}</div>
			<div class="margin-right-{{spacing}} color--white background--primary">.margin-right-{{spacing}}</div>
		</div>
	{{/each}}
</div>
 
{
  "spacings": [
    {
      "spacing": "xs"
    },
    {
      "spacing": "sm"
    },
    {
      "spacing": "md"
    },
    {
      "spacing": "lg"
    },
    {
      "spacing": "xl"
    },
    {
      "spacing": "xxl"
    }
  ]
}

Not all spacings are enabled by default in our Frontend Framework. You can set them for the margin and padding utilities.