Website Spacing Scale Extractor from URL

Contents

• [Start with visible relationships](#start-with-visible-relationships)
• [Build the smallest useful scale](#build-the-smallest-useful-scale)
• [Compare pages and validate the result](#compare-pages-and-validate-the-result)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

A useful website spacing scale extractor should identify repeated gaps between sections, containers, controls, text, and grid items, then turn those observations into a small spacing system. The goal is to recover the layout rhythm that makes a page feel consistent, rather than copy every individual margin.

Start with visible relationships

Begin with relationships visitors can see:

1. Page framing: outer padding, maximum content width, and the gap between the viewport edge and the main content.
2. Section rhythm: space between a heading, supporting text, actions, and the next section.
3. Component internals: padding inside cards, buttons, inputs, menus, and navigation items.
4. Repeated lists and grids: row gaps, column gaps, card spacing, and the distance between a label and its value.
5. Responsive changes: places where spacing becomes tighter or more generous at another viewport size.

Measure several examples of each relationship instead of trusting one visible gap. A section may look like it has a large margin when some of that space comes from line height, a fixed container, or an empty area inside an illustration. Record the relationship in plain language, such as “heading to paragraph,” “card to card,” or “content to viewport edge,” before assigning a token.

To inspect a live website, provide its URL through a Fudge browser capture, then inspect the resulting page and component details. Compare pages at the available captured viewports and state conditions. If an exact measurement is not available, use a range or mark the value as an estimate rather than presenting it as measured fact.

The examples below offer a concrete visual reference for this process. The two Linear captures show a compact product page language with muted dividers, compact controls, near-black surfaces, and repeated Inter typography. Compare both captures to look for spacing rules that carry across pages instead of treating one screenshot as a complete scale.

Build the smallest useful scale

Once you have observations, group nearby measurements into a short scale. A useful first pass might include:

The names matter more than the exact labels. Use semantic roles when the same value serves different jobs, such as space.control-padding, space.card-padding, and space.section-gap. If measurements cluster around a consistent base unit, use that as a guide. Do not force every observation into a perfect mathematical sequence when the design clearly makes an exception.

For each token, note the likely range, the examples that support it, and whether it changes by viewport. A spacing scale should explain most of the page with a limited number of values. If you end up with a separate token for every card, re-check whether the difference comes from typography, borders, content length, or alignment.

Compare pages and validate the result

Compare the examples before borrowing a spacing pattern. Check whether the distance from the heading to the body copy repeats, whether controls share the same internal padding, and whether panels align to a common content edge. The two captures can help separate product-wide rhythm from page-specific composition.

Use this checklist:

• Do major headings begin on the same content line as nearby sections?
• Are card edges aligned even when card content has different lengths?
• Do buttons and inputs share a height and internal horizontal padding?
• Are list rows separated by a fixed gap, a divider, or both?
• Does the page use a consistent content width and outer gutter?
• Which gaps shrink on smaller screens, and which remain stable?
• Does text line height account for part of the apparent vertical spacing?

Typography should be reviewed alongside spacing. The supplied Linear typography example identifies Inter at weight 400 for body copy, labels, navigation, and controls, and weight 500 for headings and emphasized interface text. Those weight changes may affect the apparent density of a layout even when the measured gaps stay the same.

Test the proposed scale on three small compositions: a header with navigation and actions, a content card with a heading and paragraph, and a repeated list or grid. If the result feels too loose, reduce the number of large gaps before changing every token. If it feels cramped, check line height and control height before adding more margin.

A spacing system is successful when new sections can be assembled without inventing arbitrary values. Keep exceptions visible, especially for hero areas, dense data tables, and full-bleed media. These may intentionally break the main rhythm, but they should be named exceptions rather than hidden inconsistencies. Review the result at the source viewport and one narrower width before treating the scale as ready for implementation.

Use this in your AI agent

> Inspect the captured website references for spacing. Identify repeated page gutters, container widths, section gaps, heading-to-copy gaps, card padding, control padding, list gaps, grid gaps, and alignment edges. Compare the same relationships across pages and separate spacing from typography line height, borders, empty media areas, and content-length effects. Draft the smallest semantic spacing scale that explains the observed layouts, include responsive changes only when visible, and flag uncertain measurements instead of inventing exact values.

Install Fudge for your AI agent to inspect captured references while you work.

Check the text box before assigning a spacing token. A large visible gap may include line height above or below a heading, a paragraph with an extra line, a font-size change, or an empty inline element. Compare two instances with similar content lengths and the same text styles. If the gap remains stable, it is more likely a layout spacing rule. If it changes with the number of lines, part of it is probably typography.

You can also inspect alignment edges. If the next component begins on a consistent grid line while the text block changes height, the layout may be using a fixed gap after the text block. If the visual distance changes but the component edges stay aligned, line height or content length is contributing.

For a handoff, record both values separately: the text style's size and line height, then the gap after the text block. This prevents developers from compensating for a font mismatch by adding arbitrary margin. Review body text, headings, and labels independently because weight and line height can change the perceived density even when the spacing value is the same.

Begin with three layers: a small numeric scale, semantic aliases, and a short exception list. The numeric scale gives you reusable steps. Semantic aliases explain why a value is used. Exceptions preserve intentional compositions without weakening the main rule.

For example, you might define a compact base scale, then aliases such as space.page-gutter, space.card-padding, space.control-gap, and space.section-gap. Test those aliases on a header, a card, and a list before expanding the scale. If two aliases consistently use the same value, keep the names if they describe different jobs, but avoid creating more numeric steps.

Then review the result at the source viewport and one narrower width. Keep responsive overrides only for relationships that visibly change, such as page gutters or section gaps. Leave stable control heights and icon gaps alone unless the reference shows otherwise. Finally, attach one observed example to each token and mark estimates clearly. That makes the system useful immediately while leaving room for visual correction.

Related questions

• Extract a Website Typography System from a URL
• Website Shadow Styles Extractor from URL
• Capture a border-radius scale from a live website for reuse
• Website Page Layout Extractor from URL