Spacing

A consistent spacing scale based on 0.25rem (4px) increments for predictable, harmonious layouts.

Spacing Scale

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)
space-32
8rem (128px)

Border Radius

sm
4px
md
8px
lg
12px
xl
16px
2xl
24px
full
9999px
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;

Shadows

shadow-sm
shadow-md
shadow-lg
shadow-xl
glow-sm
glow

Usage

/* Card with consistent spacing */
.card {
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Form elements */
.input {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
}

/* Section layout */
.section {
  margin-bottom: var(--space-16);
}

.section-header {
  margin-bottom: var(--space-8);
}