# Extract a Website's Spacing Scale

[Open the live Fudge conversation](https://design.withfudge.com/share/extract-a-website-s-spacing-scale)

Last updated: 2026-08-25

To extract a website's spacing scale, compare repeated distances between related elements, group similar measurements into a small set of roles, and verify those patterns across several sections and viewport sizes. The goal is a usable spacing map for your own work, not a claim that you recovered the site's private design tokens exactly.

## Begin with a spacing inventory

Inspect the distances that shape the page:

- Page edges and the main content container
- Gaps between navigation items
- Heading-to-body and label-to-control spacing
- Card padding and gaps between cards
- Section spacing between major blocks
- Form field padding and control gaps
- Grid, list, and table gutters
- Mobile spacing changes

Record the relationship as well as the distance. `Heading to paragraph` is more useful than an anonymous value because it tells you when the spacing belongs in the system. Also note whether the gap comes from margin, padding, line height, grid gap, or an alignment rule. A screenshot can reveal the result while leaving the implementation uncertain.

The examples below are useful for comparison. The two captured Linear references show a consistent product-page treatment with compact controls, muted dividers, and a near-black canvas. Their repeated structure can help you look for spacing relationships, but the supplied examples do not verify a complete numeric spacing scale.

## Captured pages

[![The system for product development](https://pin.fontofweb.com/6434?format=jpg)](https://design.withfudge.com/share/pin-6434)

[The system for product development](https://design.withfudge.com/share/pin-6434)

[![Plan and build products](https://pin.fontofweb.com/6435?format=jpg)](https://design.withfudge.com/share/pin-6435)

[Plan and build products](https://design.withfudge.com/share/pin-6435)

## Linear typography

- **Inter** — weight 400 · Body copy, labels, navigation, and controls.
- **Inter** — weight 500 · Headings and emphasized interface text.

## Group by function, not by every pixel

Sort observations into four levels:

1. **Inline spacing:** icon-to-label, navigation items, and small control gaps
2. **Component spacing:** padding inside buttons, inputs, cards, and menus
3. **Content spacing:** gaps between headings, paragraphs, lists, and media
4. **Section spacing:** room between major page areas and content groups

Look for clusters rather than preserving every measurement. If several gaps feel equivalent, treat them as one candidate token and keep the original observations in your notes. If the page uses a compact rhythm for controls and a larger rhythm for sections, keep those roles distinct even when their values are related.

Name proposals by purpose, such as `space-control`, `space-card`, `space-content`, and `space-section`. Names that describe usage are easier to apply than names that only describe a number.

## Check the scale across the page

Do not build the scale from one hero section. Compare a navigation area, a repeated component, a long-form content area, and a responsive state. Ask whether similar components use the same inner padding, whether vertical gaps differ from horizontal gaps, whether the page has several density modes, and whether mobile reduces every gap or only container and section spacing.

Patterns that recur in unrelated parts of the page are the strongest candidates. A gap visible only once may reflect content length, an image crop, or a special composition rather than a reusable token. Check text size and line height before treating every vertical difference as spacing.

## Create a practical handoff

A useful handoff can use this table:

| Role | Observed use | Candidate token | Confidence | Notes |
| --- | --- | --- | --- | --- |
| Inline | Icon and label | `space-inline` | Medium | Check compact controls |
| Component | Card inner padding | `space-card` | Medium | Compare repeated cards |
| Content | Heading and paragraph | `space-content` | Medium | Check text sizes |
| Section | Major block separation | `space-section` | Low to medium | Verify on mobile |

Add source references and screenshots for each row. If you export the result into CSS or Tailwind, keep the evidence and proposed values together. State which values were observed, which were estimated, and which are recommendations for a new system.

Use Fudge page and typography inspection when a capture is available, since font size, line height, and spacing often work as one rhythm. The saved Linear examples identify Inter in regular and medium weights, which is a useful reminder to check type metrics before assigning a gap to spacing alone. [Install Fudge for your AI agent](/mcp) and ask it to compare the saved pages by role.

## Use this in your AI agent

> Compare the saved website captures and extract a proposed spacing scale. Inspect container edges, navigation gaps, component padding, text relationships, grid gutters, section spacing, and responsive changes. Group repeated relationships by role instead of listing every isolated measurement. For each candidate token, report the observed components, source reference, confidence, whether the spacing may come from line height or layout alignment, and a proposed CSS or Tailwind name. Keep observed details separate from adaptation decisions. [Use Fudge with your AI agent](/mcp).

---

Start with fewer tokens than you think you need. A small interface often benefits from a compact set covering inline gaps, control padding, component padding, content relationships, and section spacing. The exact count should come from repeated use, not from forcing every observed distance into a named token.

A practical test is substitution. If two candidate values appear in the same role and the difference is hard to notice, combine them. If combining them makes controls feel loose or sections feel cramped, keep separate roles even when the values are close. Avoid naming tokens after a component unless the spacing is truly unique to that component. `space-control` can serve buttons and fields, while `button-padding` may become too narrow for future use.

Keep exceptions visible. A landing page hero, dense data table, or mobile navigation may need a local value. Mark it as an exception rather than expanding the global scale immediately. Revisit the scale after applying it to several screens and checking whether the same roles still feel balanced.

---

Use screenshots to identify relationships first and exact numbers second. Choose a known reference such as the viewport width, a visible control height, or a measured container edge, then compare other distances against it. Record ranges or confidence levels when the image scale, browser zoom, or cropping is uncertain.

Measure repeated examples instead of one isolated gap. If card padding appears similar in several cards, it is a stronger candidate than a single hero offset. Check whether text line height explains a vertical difference before turning it into a spacing token. Font family, weight, and size can change the apparent gap even when the CSS spacing is unchanged.

Your final handoff should say what was observed, what was inferred, and what you propose to use. That distinction lets a developer test the result against the source and adjust it without treating an approximate screenshot measurement as an official value.

## Related questions

- [How to Extract a Website's Typography System](/share/extract-a-website-s-typography-system)
- [Extract a Website's Shadow Styles](/share/extract-a-website-s-shadow-styles)
- [How to Extract a Border Radius Scale for an AI Coding Agent](/share/extract-border-radius-scale-for-an-ai-coding-agent)
- [Extract a Website's Page Layout](/share/extract-a-website-s-page-layout)