How to Check a Website's Spacing Scale

Learn a practical method for checking spacing patterns, finding repeated gaps, and turning visible layout details into a usable spacing scale.

how to check spacing scale on any website

Contents

  • [Use a repeatable spacing check](#use-a-repeatable-spacing-check)
  • [Group measurements into tokens](#group-measurements-into-tokens)
  • [Check rhythm and responsive behavior](#check-rhythm-and-responsive-behavior)
  • [Turn the check into a working checklist](#turn-the-check-into-a-working-checklist)
  • [Use this in your AI agent](#use-this-in-your-ai-agent)

A reliable way to check a website's spacing scale is to record repeated gaps between related elements, group those measurements into a small set of base units, and test whether the same values appear across sections. Do not start by measuring every pixel. Start with the gaps that control rhythm: page padding, section spacing, card padding, grid gaps, and the distance between headings, text, and controls.

Use a repeatable spacing check

  1. Pick three to five representative areas: the top navigation, the first content section, a card or feature grid, a form, and the footer.
  2. Record visible distances in the same unit. Browser inspection can provide exact CSS values. A screenshot can provide a useful estimate when source styles are unavailable.
  3. Make a table with four columns: location, gap, likely token, and confidence. A 24px gap between a card title and body may be a component gap, while 80px between sections may be a layout value.
  4. Look for repetition. A value that appears in several unrelated places is more likely to be part of the spacing system than a one-off measurement.

The goal is not to prove that every gap follows a strict mathematical scale. The goal is to identify the few values that explain most of the layout.

Captured pages

Linear typography

  • Inter

    Weight 400

  • Inter

    Weight 500

Group measurements into tokens

Sort measurements from smallest to largest, then round close values into practical groups. A page might reveal a rhythm such as 4, 8, 12, 16, 24, 32, 48, 64, and 96px. Another site may use a different progression. Keep the observed values rather than forcing them into a familiar framework.

Separate spacing by job:

  • Micro spacing: icon-to-label gaps, inline control padding, and small text offsets.
  • Component spacing: card padding, input padding, button gaps, and space between a heading and supporting copy.
  • Layout spacing: grid gaps, column padding, section separation, and page margins.
  • Responsive spacing: values that shrink or expand at smaller viewport widths.

Ask whether each proposed token explains at least two or three measurements. If it explains only one unusual gap, keep that value as a local exception.

Check rhythm and responsive behavior

Spacing can look consistent while using different values for different content types. Compare the gap below a heading with the gap below a paragraph. Check whether cards use equal internal padding on all sides or a larger top and bottom value. Look at whether the first section sits closer to the navigation than later sections sit to one another.

Repeated left edges often reveal page padding even when visible gaps vary. On responsive pages, compare desktop and mobile states before naming a token. A 64px section gap on desktop may become 40px on mobile, which is a responsive rule rather than an inconsistency.

The captured Linear references show a near-black canvas, muted dividers, compact controls, and a restrained layout rhythm. Use them to study relationships between surfaces and content, not as a universal spacing prescription.

Turn the check into a working checklist

Before documenting the scale, verify:

  • Have you checked more than one page area?
  • Did you distinguish page margins from component padding?
  • Did you record desktop and mobile states where available?
  • Which values repeat often enough to become tokens?
  • Which gaps are intentional exceptions?
  • Do headings, body copy, controls, and cards have different spacing rules?
  • Can another designer apply the scale without seeing the original page?

A useful output might be space-1: 4px, space-2: 8px, space-3: 12px, space-4: 16px, space-5: 24px, space-6: 32px, and space-7: 48px, with notes for section and responsive values. Keep the evidence beside each token so the scale remains traceable.

Use this in your AI agent

> Check the spacing scale on this captured website. Compare navigation, hero or first section, cards, forms, and footer. Identify repeated gaps, separate page margins from component padding, note desktop and mobile differences, and return a short token list with observed values, likely uses, and one-off exceptions. Do not force the measurements into a preset scale.

Install Fudge for your AI agent

How do I tell whether a gap is page padding, card padding, or section spacing?

Use alignment and repetition together. Page padding usually appears as a repeated left and right edge across navigation, headings, grids, and footer content. Card padding repeats inside many cards and keeps text, icons, and buttons away from the card boundary. Section spacing is the larger vertical gap between distinct content groups.

Measure the same relationship in several places. If a 24px gap appears between card content and card edges, it is likely component padding. If a 64px gap appears between multiple sections but not inside cards, it is likely layout spacing. If a value appears only once, label it as an exception until another page confirms it.

Also inspect alignment lines. A card may have 24px internal padding while its grid begins at the page's 80px content edge. Those values serve different jobs. Record the relationship as well as the number, such as space-5: card padding or space-7: section separation, so the scale stays useful when applied elsewhere.

What should I include when documenting a spacing scale for a redesign?

Document the smallest useful system, not every measurement. Start with a token table containing the name, observed value, common use, and source area. Include a short responsive table if spacing changes between viewport sizes. For example, a section gap might be 80px on a wide screen and 48px on a narrow screen.

Add notes that identify approximate values, exceptions, and component-specific values. Include examples of vertical rhythm, such as the gap from heading to paragraph and paragraph to button. This helps preserve the page's pacing rather than copying isolated numbers.

Finally, test the tokens on one new section. If it feels too loose or cramped, revisit the grouping instead of adding many new values. If the source page has multiple states, record those separately rather than hiding responsive changes inside one token.

Related questions