Source

Command Palette

Search for a command to run...

Spacing

Explore the spacing scale used throughout LSD components.

Spacing Scale

LSD uses a consistent spacing scale built on rem units.
Smallest
Extra small spacing (4px)
--lsd-spacing-smallest: 0.25rem
Smaller
Small spacing (8px)
--lsd-spacing-smaller: 0.5rem
Small
Medium-small spacing (12px)
--lsd-spacing-small: 0.75rem
Base
Default spacing (16px)
--lsd-spacing-base: 1rem
Large
Medium-large spacing (20px)
--lsd-spacing-large: 1.25rem
Larger
Large spacing (24px)
--lsd-spacing-larger: 1.5rem
Largest
Extra large spacing (28px)
--lsd-spacing-largest: 1.75rem

Usage Examples

Spacing tokens provide a unified system for margins, padding, gaps, and layout throughout the interface.
Padding
Using spacing for padding
/* Using CSS variables */
.my-element {
  padding: var(--lsd-spacing-base);
}

/* Using Tailwind classes */
<div class="p-(--lsd-spacing-base)">Padding base</div>
Margin
Using spacing for margins
/* Using CSS variables */
.my-element {
  margin: var(--lsd-spacing-large);
}

/* Using Tailwind classes */
<div class="m-(--lsd-spacing-large)">Margin large</div>
Gap
Using spacing for flex/grid gaps
/* Using CSS variables */
.my-container {
  gap: var(--lsd-spacing-base);
}

/* Using Tailwind classes */
<div class="flex gap-(--lsd-spacing-base)">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
Autocomplete