Spacing System

Brandmine's spacing system ensures consistent rhythm and proportion throughout the interface.

Spacing Overview

Our spacing system uses a consistent scale based on 4px increments, providing harmony and rhythm across the interface. These standardized spacing values help maintain proportional relationships between elements and create a cohesive visual language.

Spacing Scale

Our spacing scale follows a progression that provides appropriate options for different contexts, from tight component spacing to generous page sections.

--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-10 (2.5rem / 40px)

--space-12 (3rem / 48px)

--space-16 (4rem / 64px)

--space-20 (5rem / 80px)

Spacing Applications

Margin and Padding

Spacing variables can be used for both margin and padding properties:

Element with standard padding (var(--space-4))

Element with larger padding (var(--space-8))

css

.element-with-standard-padding {
  padding: var(--space-4); /* 1rem / 16px */
}

.element-with-larger-padding {
  padding: var(--space-8); /* 2rem / 32px */
}

Element Spacing

Create consistent spacing between elements using margin:

First element

Second element

Third element

css

.element-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* Modern gap property */
}

/* Alternative using margin for wider browser support */
.element-stack > * + * {
  margin-top: var(--space-4);
}

Section Spacing

For larger layout sections, use the bigger spacing values:

Standard Section (var(--space-12) padding)

Hero Section (var(--space-16) padding)

css

.section {
  padding: var(--space-12); /* 3rem / 48px */
  margin-bottom: var(--space-12);
}

.hero-section {
  padding: var(--space-16); /* 4rem / 64px */
}

Common Spacing Patterns

Card Component

Card Title

This is a sample card description with proper spacing applied.

css

.card {
  border: 1px solid var(--neutral-300);
  border-radius: 0.5rem;
  overflow: hidden;
}

.card-image {
  height: 160px;
}

.card-content {
  padding: var(--space-4);
}

.card-title {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.card-description {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

Form Elements

Name

Message

css

.form-group {
  margin-bottom: var(--space-4);
}

.form-group.spaced {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--neutral-300);
  border-radius: 0.25rem;
}

Implementation Guidelines

Using CSS Variables

Always use the spacing variables instead of hardcoding pixel or rem values:

css

/* Preferred approach */
.element {
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Avoid this approach */
.element {
  padding: 16px;
  margin-bottom: 24px;
}

Responsive Adjustments

You can adjust spacing based on screen size:

css

.section {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--space-12);
  }
}

Combining Spacing Variables

For more precise control, you can combine different spacing values for each side:

Asymmetric padding: var(--space-4) vertical, var(--space-6) horizontal

Complex padding: var(--space-4) top, var(--space-6) right, var(--space-8) bottom, var(--space-2) left

css

.asymmetric-element {
  padding: var(--space-4) var(--space-6);  /* Vertical | Horizontal */
}

.complex-element {
  padding: var(--space-4) var(--space-6) var(--space-8) var(--space-2);  /* Top | Right | Bottom | Left */
}

Best Practices

Be consistent - Use the spacing scale consistently rather than arbitrary values
Follow the scale - Avoid creating custom spacing that falls outside the defined scale
Consider content density - Use smaller spacing values for dense UIs, larger ones for more open layouts
Create rhythm - Maintain consistent vertical rhythm with predictable spacing between sections
Use appropriate scale - Match spacing to the visual weight and importance of elements