Back to Blog
Deep Dive

Analyze Website Spacing System

January 25, 20269 min read

Spacing is the invisible force that makes designs feel "right." Professional websites use consistent spacing scales—not random values. Understanding how to analyze and extract spacing systems helps you create polished, professional interfaces.

Why Spacing Matters

  • 👁️
    Visual Rhythm — Consistent spacing creates harmony and flow
  • 🧠
    Cognitive Ease — Users process consistent layouts faster
  • ⚡
    Developer Speed — Named spacing tokens prevent one-off values
  • 📱
    Responsive Scaling — Grid-based spacing scales predictably

Common Grid Systems

Most professional design systems use multiples of a base unit:

8px Grid (Most Common)

Used by: Material Design, Tailwind

8, 16, 24, 32, 40, 48, 64, 80, 96

4px Grid (Fine Control)

Used by: Apple, dense UIs

4, 8, 12, 16, 20, 24, 32, 40, 48

Tailwind Default

4px base, 0.25rem increments

4, 8, 12, 16, 20, 24, 32, 40, 48, 64

Golden Ratio

Fibonacci-style scaling

8, 13, 21, 34, 55, 89

What Spacing Analysis Reveals

  • 1
    Margins — Outer spacing between elements
  • 2
    Paddings — Inner spacing within containers
  • 3
    Gaps — Flexbox/Grid gap values
  • 4
    Grid Pattern — 4px, 8px, or custom base unit
  • 5
    Consistency Score — How well values follow the grid

Manual Analysis (The Hard Way)

Manual spacing analysis:

  1. 1. Inspect each element in DevTools
  2. 2. Note margin/padding values
  3. 3. Create a spreadsheet of all values
  4. 4. Manually identify patterns
  5. 5. Convert to rem/spacing tokens
  6. 6. Takes 1-2 hours per page...

Automated Spacing Analysis

BrandSpy extracts and analyzes spacing automatically:

What BrandSpy extracts:

All margin values (px/rem)
All padding values
Flexbox/Grid gaps
Grid base unit detection
Consistency scoring
Tailwind spacing export

Spacing Consistency Score

BrandSpy calculates a consistency score (0-100) that measures how well a site follows its own spacing scale:

90-100

Excellent — Strict grid system

70-89

Good — Minor deviations

<70

Inconsistent — Random values

Sample Spacing Analysis

Spacing Analysis: stripe.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Grid Base:    8px
Consistency:  94/100 ✅

Margins Found:
├─ 8px   (12 occurrences)
├─ 16px  (28 occurrences)
├─ 24px  (15 occurrences)
├─ 32px  (8 occurrences)
├─ 48px  (6 occurrences)
└─ 64px  (4 occurrences)

Paddings Found:
├─ 8px   (18 occurrences)
├─ 12px  (5 occurrences) ⚠️ Off-grid
├─ 16px  (32 occurrences)
├─ 24px  (22 occurrences)
└─ 32px  (14 occurrences)

Tailwind Spacing Export:
spacing: {
  2: '8px',
  4: '16px',
  6: '24px',
  8: '32px',
  12: '48px',
  16: '64px',
}

Frequently Asked Questions

How do I know if a site uses an 8px or 4px grid?

BrandSpy detects this automatically by analyzing the Greatest Common Divisor (GCD) of all spacing values. If most values are divisible by 8, it's an 8px grid.

What's a good consistency score?

Top sites like Stripe, Linear, and Vercel score 85-95. Anything above 80 indicates a well-maintained design system.

Can I export spacing to Tailwind?

Yes! BrandSpy generates a complete Tailwind spacing configuration with all extracted values. See our Tailwind config guide.

Related Guides

Analyze Any Spacing System

Stop guessing spacing values. Extract complete spacing scales with grid detection and consistency scoring.

Try Design Analyzer →

Advanced 2026 Analysis 🚀

Beyond basic extraction, BrandSpy now features an advanced mathematical heuristic engine:

  • • APCA Contrast: Checks colors against the new WCAG 3.0 advanced perceptual contrast algorithm.
  • • Color Blindness Simulation: Verifies palettes against Protanopia and Deuteranopia matrices.
  • • Typography Scales: Mathematically detects geometric growth ratios (e.g., Major Third, Golden Ratio).
  • • Grid Compliance: Calculates the percentage of margins/paddings that obey strict 8-point grid rules.

You can analyze any website for free to see the math behind the design.