Spacing

A 4px grid system with 25 steps (0–24), providing 0px to 96px in 4px increments. Each step is available in both rem (canonical) and px units.

Usage

CSS

.element {
padding: var(--lt-spacing-4);    /* 1rem / 16px */
margin-bottom: var(--lt-spacing-6); /* 1.5rem / 24px */
gap: var(--lt-spacing-3);        /* 0.75rem / 12px */
}

Pixel variant

.element {
/* use -px- variant for pixel-precise values */
border-width: var(--lt-spacing-px-1); /* 4px */
min-height: var(--lt-spacing-px-10);  /* 40px */
}