Spacing

Spacing tokens define the vertical and horizontal rhythm across Aggarly Platform. They are exposed as CSS variables and consumed through SCSS token variables to ensure consistency and scalability.

Spacing Scale

Space 0

$space-0 → --ds-space-0

var(--ds-space-0)

Space 1

$space-1 → --ds-space-1

var(--ds-space-1)

Space 2

$space-2 → --ds-space-2

var(--ds-space-2)

Space 3

$space-3 → --ds-space-3

var(--ds-space-3)

Space 4

$space-4 → --ds-space-4

var(--ds-space-4)

Space 5

$space-5 → --ds-space-5

var(--ds-space-5)

Space 6

$space-6 → --ds-space-6

var(--ds-space-6)

Space 8

$space-8 → --ds-space-8

var(--ds-space-8)

Space 10

$space-10 → --ds-space-10

var(--ds-space-10)

Space 12

$space-12 → --ds-space-12

var(--ds-space-12)

Space 16

$space-16 → --ds-space-16

var(--ds-space-16)

Usage

@use "@/design-system/scss/tokens" as tokens;

.stack {
  display: grid;
  gap: tokens.$space-4;
}

.card {
  padding: tokens.$space-4;
}

.section {
  margin-block-end: tokens.$space-6;
}

Guidelines

Use smaller values ($space-1 to $space-3) for tight UI elements such as form controls and table rows.
Use medium values ($space-4 to $space-6) for cards, panels, and component padding.
Use larger values ($space-8 and above) for page-level layout, section separation, and dashboards.
Prefer layout utilities (stack-*, grid,gap-*) over manual margins whenever possible.