Net7 UI Kit

Spacing 

<div class="p-6">
    <div>
        <h2 class="text-2xl font-bold">Project spacing units.</h2>
        <p>Used for widths, margins and paddings, also in top, right, bottom, left and horizontal (x) and vertical (y) axis. Base 4px (1 unit). Rem unit is used</p>
        <p>Example of use: w-2, pt-2, mb-2, mx-2, py-2</p>
    </div>
    <div class="grid gap-6 p-4">

        <div class="flex items-center gap-4">
            <p>space 0</p>
            <div class="w-0 h-0 bg-primary-100 p-0"></div>
            <p></p>
        </div>

        <div class="flex items-center gap-4">
            <p>space 0.5</p>
            <div class="w-0.5 h-0 bg-primary-100 p-0.5"></div>
            <p></p>
        </div>

        <div class="flex items-center gap-4">
            <p>space 1</p>
            <div class="w-1 h-0 bg-primary-100 p-1"></div>
            <p></p>
        </div>

        <div class="flex items-center gap-4">
            <p>space 2</p>
            <div class="w-2 h-0 bg-primary-100 p-2"></div>
            <p></p>
        </div>

        <div class="flex items-center gap-4">
            <p>space 3</p>
            <div class="w-3 h-0 bg-primary-100 p-3"></div>
            <p></p>
        </div>

        <div class="flex items-center gap-4">
            <p>space 4</p>
            <div class="w-4 h-0 bg-primary-100 p-4"></div>
            <p></p>
        </div>

        <div class="flex items-center gap-4">
            <p>space 8</p>
            <div class="w-8 h-0 bg-primary-100 p-8"></div>
            <p></p>
        </div>

    </div>
</div>
 
<div class="p-6">
    <div>
        <h2 class="text-2xl font-bold">Project spacing units.</h2>
        <p>Used for widths, margins and paddings, also in top, right, bottom, left and horizontal (x) and vertical (y) axis. Base 4px (1 unit). Rem unit is used</p>
        <p>Example of use: w-2, pt-2, mb-2, mx-2, py-2</p>
    </div>
    <div class="grid gap-6 p-4">
    {% for space in spaces %}
        <div class="flex items-center gap-4">
            <p>space {{ space.unit }}</p> <div class="{{ space.classWidth }} h-0 bg-primary-100 {{ space.classPfull }}"></div> <p></p>
        </div>
    {% endfor %}
    </div>
</div>
 
{
  "spaces": [
    {
      "name": "space-0",
      "unit": 0,
      "classWidth": "w-0",
      "classPfull": "p-0"
    },
    {
      "name": "space-0.5",
      "unit": 0.5,
      "classWidth": "w-0.5",
      "classPfull": "p-0.5"
    },
    {
      "name": "space-1",
      "unit": 1,
      "classWidth": "w-1",
      "classPfull": "p-1"
    },
    {
      "name": "space-2",
      "unit": 2,
      "classWidth": "w-2",
      "classPfull": "p-2"
    },
    {
      "name": "space-3",
      "unit": 3,
      "classWidth": "w-3",
      "classPfull": "p-3"
    },
    {
      "name": "space-4",
      "unit": 4,
      "classWidth": "w-4",
      "classPfull": "p-4"
    },
    {
      "name": "space-8",
      "unit": 8,
      "classWidth": "w-8",
      "classPfull": "p-8"
    }
  ]
}

Spacing scale used for margins, padding, fixed element height etc…

Tailwind margin documentation

Tailwind padding documentation

Customizing spacing - example