Spacing

Spacing

Overview

WEC Design System uses a 4px base unit for spacing, following the Tailwind CSS default scale. This creates consistent, harmonious layouts throughout all components and pages.

Spacing Scale

Based on multiples of 4px for consistency and predictability.

Token	Value	Pixels	Usage
0	0	0px	None, reset
px	1px	1px	Hairline borders, dividers
0.5	2px	2px	Micro spacing, tight gaps
1	4px	4px	Tiny spacing, icon gaps
1.5	6px	6px	Small spacing
2	8px	8px	Base small spacing
3	12px	12px	Default spacing, compact padding
4	16px	16px	Comfortable spacing, mobile padding
5	20px	20px	Spacious elements
6	24px	24px	Section spacing, desktop padding
8	32px	32px	Large section spacing
10	40px	40px	XL spacing between sections
12	48px	48px	XXL section spacing
16	64px	64px	Hero section spacing
20	80px	80px	Extra hero spacing
24	96px	96px	Ultra spacing, landing sections

Common Spacing Patterns

Button Padding

Size	Padding	Usage
Small	8px 16px (spacing-2 spacing-4)	Compact buttons
Medium	12px 24px (spacing-3 spacing-6)	Default buttons
Large	16px 32px (spacing-4 spacing-8)	Prominent CTAs

.button-small {
  padding: var(--spacing-2) var(--spacing-4);
}

.button-medium {
  padding: var(--spacing-3) var(--spacing-6);
}

.button-large {
  padding: var(--spacing-4) var(--spacing-8);
}

Card Padding

Device	Padding	Token
Mobile	16px	spacing-4
Desktop	24px	spacing-6

.card {
  padding: var(--spacing-4); /* Mobile */
}

@media (min-width: 768px) {
  .card {
    padding: var(--spacing-6); /* Desktop */
  }
}

Section Margins

Context	Margin	Token
Mobile sections	24px 0	spacing-6 vertical
Desktop sections	40px 0	spacing-10 vertical
Hero sections	64px 0	spacing-16 vertical

.section {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

@media (min-width: 768px) {
  .section {
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-10);
  }
}

Gap Between Elements

Context	Gap	Token
Icon + text	8px	spacing-2
Form fields	16px	spacing-4
Cards in grid	24px	spacing-6

.icon-with-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.card-grid {
  display: grid;
  gap: var(--spacing-6);
}

Component-Specific Spacing

Package Cards

.package-card {
  /* Internal padding */
  padding: var(--spacing-6);

  /* Element spacing */
  gap: var(--spacing-4);
}

.package-card-header {
  margin-bottom: var(--spacing-3);
}

.package-card-body {
  margin-bottom: var(--spacing-6);
}

.package-card-footer {
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-grey-20);
}

Forms

.form {
  max-width: 500px;
}

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

.form-label {
  margin-bottom: var(--spacing-2);
  display: block;
}

.form-input {
  padding: var(--spacing-3) var(--spacing-4);
}

.form-hint {
  margin-top: var(--spacing-2);
  font-size: var(--text-mobile-body-small);
}

.form-error {
  margin-top: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
}

Navigation

.navbar {
  padding: var(--spacing-4) var(--spacing-6);
}

.nav-links {
  gap: var(--spacing-8);
}

.nav-item {
  padding: var(--spacing-2) var(--spacing-4);
}

Modals/Dialogs

.modal {
  padding: var(--spacing-6);
}

.modal-header {
  margin-bottom: var(--spacing-4);
}

.modal-body {
  margin-bottom: var(--spacing-6);
}

.modal-footer {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

Responsive Spacing

Spacing adjusts based on breakpoint:

/* Mobile-first approach */
.container {
  padding: var(--spacing-4); /* 16px on mobile */
}

@media (min-width: 768px) {
  .container {
    padding: var(--spacing-10); /* 40px on tablet+ */
  }
}

@media (min-width: 1024px) {
  .container {
    padding: var(--spacing-16); /* 64px on desktop */
  }
}

Container Padding

Breakpoint	Horizontal Padding	Usage
Mobile (< 768px)	24px	Standard mobile padding
Tablet (768px - 1024px)	40px	Comfortable tablet padding
Desktop (1024px+)	100px	Spacious desktop padding

.content-wrapper {
  padding-left: var(--spacing-6);  /* 24px mobile */
  padding-right: var(--spacing-6);
}

@media (min-width: 768px) {
  .content-wrapper {
    padding-left: var(--spacing-10); /* 40px tablet */
    padding-right: var(--spacing-10);
  }
}

@media (min-width: 1024px) {
  .content-wrapper {
    padding-left: 100px;           /* 100px desktop */
    padding-right: 100px;
  }
}

8pt Grid System

Our spacing follows an 8pt visual grid (multiples of 8px):

8px  = spacing-2
16px = spacing-4
24px = spacing-6
32px = spacing-8
40px = spacing-10
48px = spacing-12
64px = spacing-16

Benefits:

• Creates visual rhythm
• Aligns elements across components
• Easier decision-making (fewer options)
• Consistent vertical rhythm

Spacing with Flexbox

Gap Property (Modern)

.flex-container {
  display: flex;
  gap: var(--spacing-4); /* Works for flex and grid */
}

Margin Pattern (Fallback)

.flex-item:not(:last-child) {
  margin-right: var(--spacing-4);
}

/* Vertical spacing */
.flex-column > * + * {
  margin-top: var(--spacing-4);
}

Spacing with CSS Grid

.grid {
  display: grid;
  gap: var(--spacing-6); /* Row and column gap */
}

/* Different row/column gaps */
.grid-mixed {
  display: grid;
  row-gap: var(--spacing-6);
  column-gap: var(--spacing-4);
}

Negative Margins

Use for breaking out of containers:

.full-width-bleed {
  margin-left: calc(-1 * var(--spacing-6));
  margin-right: calc(-1 * var(--spacing-6));
  width: calc(100% + var(--spacing-6) * 2);
}

@media (min-width: 768px) {
  .full-width-bleed {
    margin-left: calc(-1 * var(--spacing-10));
    margin-right: calc(-1 * var(--spacing-10));
    width: calc(100% + var(--spacing-10) * 2);
  }
}

CSS Variables

:root {
  /* Spacing Scale (4px base unit) */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Common Patterns */
  --space-button-sm: var(--spacing-2) var(--spacing-4);
  --space-button-md: var(--spacing-3) var(--spacing-6);
  --space-button-lg: var(--spacing-4) var(--spacing-8);
  --space-card-mobile: var(--spacing-4);
  --space-card-desktop: var(--spacing-6);
  --space-section-mobile: var(--spacing-6);
  --space-section-desktop: var(--spacing-10);
}

Tailwind Integration

If using Tailwind CSS, these map to default utilities:

<div className="p-4">        {/* padding: 16px */}
<div className="px-6 py-4"> {/* padding: 24px 16px */}
<div className="gap-2">     {/* gap: 8px */}
<div className="space-y-4">  {/* children: margin-top: 16px */}

Spacing Best Practices

✅ Do	❌ Don’t
Use spacing scale consistently	Use arbitrary values (e.g., 17px)
Stick to 4px multiples	Use pixel values that don’t align
Scale spacing with viewport	Use fixed spacing on all screens
Use larger spacing between sections	Use equal spacing everywhere
Consider 8pt grid alignment	Break the visual grid

Spacing Checklist

When designing or building:

• Am I using a token from the spacing scale?
• Does spacing follow the 8pt grid?
• Is spacing responsive (mobile vs desktop)?
• Do similar elements use consistent spacing?
• Is there enough breathing room between sections?
• Does touch target spacing meet minimums (44px)?

Visual Examples

Compact vs Comfortable

/* Compact - for dense interfaces */
.compact-list {
  padding: var(--spacing-3) var(--spacing-4);
  gap: var(--spacing-2);
}

/* Comfortable - for general use */
.comfortable-list {
  padding: var(--spacing-4) var(--spacing-6);
  gap: var(--spacing-4);
}

/* Spacious - for emphasis */
.spacious-list {
  padding: var(--spacing-6) var(--spacing-8);
  gap: var(--spacing-6);
}

Section Spacing

/* Tightly packed sections */
.tight-sections > * + * {
  margin-top: var(--spacing-6); /* 24px */
}

/* Standard section spacing */
.standard-sections > * + * {
  margin-top: var(--spacing-10); /* 40px */
}

/* Generous section spacing */
.generous-sections > * + * {
  margin-top: var(--spacing-16); /* 64px */
}