Capture a spacing scale from a live website for reuse

Contents

• [A practical capture method](#a-practical-capture-method)
• [How to decide whether a gap belongs in the scale](#how-to-decide-whether-a-gap-belongs-in-the-scale)
• [Reuse checklist](#reuse-checklist)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

Capture a spacing scale by measuring repeated gaps and grouping them into a small set of roles, rather than copying every distance from one screen. Look for patterns in page padding, section gaps, card padding, control gaps, and text spacing, then test the proposed scale against several components before reusing it.

A practical capture method

1. Choose representative areas. Inspect a page header, hero or main content area, card group, form or control row, and footer. Include both dense and relaxed sections so the scale is not shaped by one layout.
2. Measure the visible gaps. Record the distance between related items, the padding inside surfaces, the gap between sections, and the space around headings. Keep horizontal and vertical values separate when they appear intentionally different.
3. Group near matches. If several measurements are close, group them into one candidate token and record the original observations beside it. Do not round aggressively before checking whether the difference is deliberate.
4. Name by use. Use roles such as space-control, space-card, space-section, or space-page, or use neutral steps such as space-2, space-4, and space-8 once the sequence is clear.
5. Validate across states. Check a normal page, a compact control, a card with longer content, and a narrow viewport. A scale is useful only if it survives real content.

Use a table like this while capturing:

Open the examples below and compare the page structure before borrowing a pattern. The two captured Linear references are described as sharing typography, spacing, surfaces, and interaction treatment. That makes them useful for looking for repeated rhythm across pages, but the available evidence does not provide exact spacing measurements. Treat the examples as a prompt to verify repeated gaps, not as a numeric spacing scale.

How to decide whether a gap belongs in the scale

A gap is a strong token candidate when it appears in several places, supports a clear relationship, and remains sensible when content changes. A heading-to-paragraph gap usually communicates a different relationship from a section-to-section gap, even if the pixels happen to be similar. Keep those roles distinct until testing shows they can share a token.

Look for a sequence rather than a perfect mathematical progression. Many interfaces use a few compact values plus larger jumps for sections. A simple scale that covers most cases is easier to maintain than a long list of measurements that nobody remembers. When a value appears once, record it as an exception instead of forcing it into the nearest token.

Reuse checklist

Before adding a captured scale to your project, confirm:

• Measurements come from multiple components or pages.
• Container padding is separated from gaps between sibling items.
• Text line height is not being mistaken for margin.
• Borders, shadows, and transparent backgrounds are not hiding the true edge.
• Mobile or narrow layouts have been checked separately.
• The proposed tokens cover common cases without requiring constant overrides.
• Exceptions are labeled instead of silently rounded away.
• The result is documented as observed reference material, not as the source site's official internal system.

A captured website can be inspected for page structure, components, typography, colors, borders, radii, shadows, gradients, and layout details. Capture the pages you want to compare, inspect repeated regions, and export the verified observations into the format your team uses only after review. This produces a spacing reference you can explain and adjust, rather than a pile of copied numbers.

Use this in your AI agent

> Inspect the captured website for repeated spacing. Measure or report observable page padding, section gaps, card padding, control gaps, heading spacing, and responsive changes. Group repeated values into a proposed spacing scale, keep original observations beside each token, separate relationship types, flag one-off exceptions, and do not invent measurements that are unavailable. Finish with a practical CSS or Tailwind token table.

Install Fudge for your AI agent to compare captured pages while you build.

Start with the fewest tokens that explain most repeated gaps. For a first pass, four to eight values is usually easier to test than a large scale. The exact count should come from the captured pages, not from a fixed rule.

Separate compact control spacing, internal component padding, gaps between related content, section separation, and outer page padding. Some can share a value after testing, but do not merge them just because the measurements are close.

Create a fixture containing a navigation row, card, form, content section, and narrow layout. Replace local values with the candidate tokens and look for places that feel cramped or unusually loose. If one component needs a special value, label it as an exception and ask whether its content or state explains the difference. A short, well-tested scale is more reusable than a complete list of every measured distance.

Compare repeated measurements across unrelated parts of the page. A real shared scale is more plausible when the same or near-identical gaps appear in navigation, cards, controls, and sections, and when larger gaps create a visible hierarchy. One cluster in a single hero section is weaker evidence.

Also check whether the gap is structural. Text line height, icon dimensions, border thickness, and component height can make two spaces look similar while serving different purposes. Measure from the same edges each time, such as the content box rather than the shadow edge.

Review more than one page or state. If the same rhythm appears in both captured Linear references, that supports reuse as an observed pattern, while the exact values still need confirmation. Ask an AI agent to list the locations for every proposed token and to mark confidence. That makes it easy to reject a token supported by only one isolated measurement.

Related questions

• Capture a Website Typography System for Reuse
• Capture Shadow Styles From a Live Website for Reuse
• Extract a Website's Border Radius Scale
• Extract a Website's Color System