Inspect a Website's Spacing Scale from Its URL

Contents

• [Start with repeated gaps](#start-with-repeated-gaps)
• [Group measurements into practical steps](#group-measurements-into-practical-steps)
• [Check wide and narrow page states](#check-wide-and-narrow-page-states)
• [Turn observations into a usable reference](#turn-observations-into-a-usable-reference)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

A website's spacing scale is easiest to inspect by recording repeated gaps between related elements, then grouping those measurements into a small set of likely spacing steps. Use padding, section gaps, control heights, and alignment lines to build a useful reference instead of copying every isolated distance.

Start with repeated gaps

Inspect several page areas rather than one component. Check the space between a heading and supporting text, items in a navigation row, labels and inputs, controls inside buttons, card edges, and major sections. Record pixel values when the inspection provides exact measurements. If it does not, compare gaps visually and classify them as small, medium, large, or extra large.

A useful worksheet has these columns:

Repeated values matter more than unusual values. A gap that appears in buttons, list rows, and compact controls is probably part of the core scale. A large empty area around a hero may be a page-specific decision rather than a standard step.

Open the examples below and compare the first screen before borrowing a pattern. The two Linear references show a compact interface treatment with muted dividers, restrained surfaces, and repeated alignment. That makes them useful for studying how smaller gaps support dense product pages.

Group measurements into practical steps

Sort measurements from smallest to largest, then combine values that are close enough to serve the same role. Measurements around 4, 8, 12, 16, 24, 32, and 48 pixels may form a practical draft scale, but treat those numbers as provisional until repeated observations support them.

Use roles to avoid overfitting:

• Micro spacing: icon-to-label gaps, badge padding, and tight control interiors.
• Component spacing: input padding, card insets, and gaps between related controls.
• Content spacing: heading-to-body gaps, list groups, and card-to-card spacing.
• Section spacing: breaks between major page areas and large layout bands.

Do not force every measurement into a mathematically perfect sequence. A site may use a regular base scale for controls and a looser rhythm for marketing sections. The goal is a compact set of decisions that explains most of the page.

Check wide and narrow page states

A spacing scale can look consistent on one screen and change on another. Compare the header, hero, content sections, footer, and at least one interaction-heavy area. Also check narrow and wide layouts when captures are available. Responsive pages often preserve small internal gaps while reducing outer padding and section spacing.

Look for five signals:

1. Shared alignment: Several components begin on the same left edge.
2. Stable control height: Buttons, fields, and navigation items use related vertical dimensions.
3. Nested rhythm: Inner padding is smaller than the gap between sibling components.
4. Clear grouping: Larger gaps separate unrelated content, while smaller gaps keep related content together.
5. Reasoned exceptions: A hero, pricing panel, or editorial block may intentionally break the basic rhythm.

If a measurement appears only once, label it as an exception rather than adding another scale step.

Turn observations into a usable reference

Write the final result as tokens and examples. A short reference might include:

• space-1: compact icon and label gaps
• space-2: control padding and tight list rows
• space-3: related text blocks
• space-4: card padding or content groups
• space-5: separated content groups
• space-6: major section breaks

Add two or three examples for each token, such as "used between a heading and paragraph" or "used inside compact navigation." Record the URL or capture name, viewport, page state, confidence, and responsive differences. This preserves design logic rather than only a list of numbers.

Treat the result as an observation of the captured page, not proof of an official internal design system. Use the rhythm as a reference for a redesign, audit, or implementation, then verify important values against the live page and its responsive states.

Use this in your AI agent

> Inspect the captured website at this URL for its spacing system. Identify repeated gaps in navigation, controls, cards, text blocks, and major sections. Group the observations into a short spacing scale, note likely pixel values and component roles, compare wide and narrow states when available, and separate repeated tokens from one-off layout exceptions. Return a concise table with evidence for each proposed spacing step. > > Use Fudge with your AI agent to inspect captured references and turn the observations into a practical spacing audit.

Use relative comparisons and repeated anchors. Pick one visible reference, such as the height of a text line or a familiar control, then compare nearby gaps against it. Record whether each gap is about one quarter, one half, one, or two times that reference. This will not give you production-ready pixels, but it will reveal the page rhythm.

Next, compare the same relationship in several places. If the icon-to-label gap looks the same in navigation, buttons, and list rows, mark it as a shared small step. If a gap appears only around the hero, mark it as a page-specific value. Use alignment lines too: repeated left edges and equal inset distances are often easier to spot than the gaps themselves.

Keep confidence beside each observation: high for repeated, clearly equal gaps; medium for close visual matches; low for isolated or responsive areas. When exact values become available, replace the estimates without changing the role names.

Include the page URL or capture name, viewport size, page state, observed value or estimate, and the role of each gap. A compact audit table works well:

Add a short note about exceptions, such as a hero with unusually wide padding or a mobile layout that reduces outer margins. Include an annotated screenshot if the relationships are difficult to describe. Finally, state whether the scale is an observed reference or an approved internal standard. That distinction prevents a useful audit from being mistaken for official design documentation.

Related questions

• Inspect a Website's Typography Hierarchy from Its URL
• Inspect a Website's Page Layout from Its URL
• Website Design Analyzer for Border Radii and Shadows
• Inspect a Website's Motion and Interactions from Its URL