Spacing

Overview

Spacing utilities provide consistent margin, padding, and gap based on the design token scale. All classes use the s- namespace prefix to avoid conflicts with other CSS frameworks.

Spacing Scale

Token	Value	Padding	Margin	Gap
0	0	.s-p-0	.s-m-0	.s-gap-0
1	0.25rem	.s-p-1	.s-m-1	.s-gap-1
2	0.5rem	.s-p-2	.s-m-2	.s-gap-2
3	0.75rem	.s-p-3	.s-m-3	.s-gap-3
4	1rem	.s-p-4	.s-m-4	.s-gap-4
5	1.25rem	.s-p-5	.s-m-5	.s-gap-5
6	1.5rem	.s-p-6	.s-m-6	.s-gap-6
8	2rem	.s-p-8	.s-m-8	.s-gap-8
10	2.5rem	.s-p-10	.s-m-10	.s-gap-10
12	3rem	.s-p-12	.s-m-12	.s-gap-12
16	4rem	.s-p-16	.s-m-16	.s-gap-16

Padding

All Sides

<div class="s-p-4">Padding on all sides</div>

Horizontal & Vertical

<div class="s-px-4">Horizontal padding (left & right)</div>
<div class="s-py-4">Vertical padding (top & bottom)</div>

Individual Sides

<div class="s-pt-4">Padding top</div>
<div class="s-pr-4">Padding right</div>
<div class="s-pb-4">Padding bottom</div>
<div class="s-pl-4">Padding left</div>

Logical Properties

<div class="s-ps-4">Padding inline-start</div>
<div class="s-pe-4">Padding inline-end</div>

Margin

All Sides

<div class="s-m-4">Margin on all sides</div>

Horizontal & Vertical

<div class="s-mx-4">Horizontal margin</div>
<div class="s-my-4">Vertical margin</div>

Individual Sides

<div class="s-mt-4">Margin top</div>
<div class="s-mr-4">Margin right</div>
<div class="s-mb-4">Margin bottom</div>
<div class="s-ml-4">Margin left</div>

Auto Margins

<div class="s-mx-auto">Center horizontally</div>
<div class="s-ml-auto">Push to the right</div>
<div class="s-mr-auto">Push to the left</div>

Negative Margins

<div class="s--mt-4">Negative margin top</div>
<div class="s--mx-2">Negative horizontal margin</div>

Gap

Gap utilities are for fine-grained control within flex/grid containers.

Atomic Gap Classes (Developer’s Screwdriver)

Use these for precise pixel-perfect control:

<div s-flex class="s-gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Semantic Gap Attribute (Designer’s Tool)

For consistent, design-system-aligned spacing, use the s-gap attribute:

<div s-flex s-gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Attribute	Value	Use Case
s-gap="xs"	0.25rem	Extra tight spacing
s-gap="sm"	0.5rem	Compact layouts
s-gap="md"	1rem	Standard spacing
s-gap="lg"	1.5rem	Comfortable layouts
s-gap="xl"	2rem	Spacious layouts
s-gap="none"	0	No gap

Row & Column Gap

<div s-grid="3" class="s-gap-x-4 s-gap-y-2">
  <!-- Grid items -->
</div>

Space Between

Add space between child elements:

<div class="s-space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div s-flex class="s-space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Using CSS Variables

Access spacing tokens directly in your CSS:

.custom-element {
  padding: var(--s-space-4);
  margin-bottom: var(--s-space-6);
  gap: var(--s-space-2);
}

Customizing the Scale

Override spacing values in your CSS:

:root {
  --s-space-4: 1.25rem;  /* Default: 1rem */
  --s-space-1: 0.3rem;   /* Tighter base */
}