@vibe-labs/design-spacing

Spacing tokens and padding, margin, and gap utilities for the Vibe Design System.

Installation

@import "@vibe-labs/design-spacing";

Tokens

Spacing scale defined in @layer vibe.tokens:

Token	Value
--space-0	0
--space-1	0.25rem (4px)
--space-2	0.5rem (8px)
--space-3	0.75rem (12px)
--space-4	1rem (16px)
--space-5	1.25rem (20px)
--space-6	1.5rem (24px)
--space-8	2rem (32px)
--space-10	2.5rem (40px)
--space-12	3rem (48px)
--space-16	4rem (64px)
--space-20	5rem (80px)
--space-24	6rem (96px)

Utilities / Generated Classes

All classes generated into @layer vibe.utilities. Scale steps: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24.

Padding (padding.g.css)

• .p-{n} — all sides
• .px-{n} / .py-{n} — horizontal (inline) / vertical
• .pt-{n} · .pr-{n} · .pb-{n} · .pl-{n} — individual sides

Margin (margin.g.css)

• .m-{n} — all sides
• .mx-{n} / .my-{n} — horizontal (inline) / vertical
• .mt-{n} · .mr-{n} · .mb-{n} · .ml-{n} — individual sides

Gap (gap.g.css)

• .gap-{n} — both axes
• .gap-x-{n} — column gap
• .gap-y-{n} — row gap

Horizontal utilities use inline-start/inline-end for RTL support.

Dist Structure

File	Description
index.css	Barrel — imports all files below
spacing.css	Token definitions
padding.g.css	Generated padding utilities
margin.g.css	Generated margin utilities
gap.g.css	Generated gap utilities

Dependencies

None — this package is self-contained.

Build

npm run build

---

Usage Guide

Provides the spacing token scale and padding, margin, and gap utilities for consistent layout rhythm across the Vibe Design System.

Import

@import "@vibe-labs/design-spacing";

Common Patterns

1. Card padding with consistent internal spacing

<div class="p-6">
  <h2 class="mb-2">Card Title</h2>
  <p class="mb-4">Card body content goes here.</p>
  <button class="px-4 py-2">Action</button>
</div>

2. Vertical stack with uniform gap

<ul class="flex flex-col gap-4">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

3. Grid with column and row gaps

<div class="grid grid-cols-3 gap-x-6 gap-y-8">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

4. Horizontal centering with auto margins

/* Using the token directly */
.container {
  margin-inline: auto;
  padding-inline: var(--space-6);
}

5. Tight list with small gap

<nav class="flex flex-col gap-1">
  <a href="#">Dashboard</a>
  <a href="#">Settings</a>
  <a href="#">Profile</a>
</nav>

6. Section vertical rhythm

<section class="py-16">
  <div class="mb-8">
    <h2>Section Title</h2>
    <p>Section intro.</p>
  </div>
  <!-- content -->
</section>

Token Reference

Token	Value	px equiv
--space-0	0	0
--space-1	0.25rem	4px
--space-2	0.5rem	8px
--space-3	0.75rem	12px
--space-4	1rem	16px
--space-6	1.5rem	24px
--space-8	2rem	32px
--space-12	3rem	48px
--space-16	4rem	64px