# Website Design Analyzer for Spacing Scale

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

Last updated: 2026-08-25

A website design analyzer for spacing scale should show which gaps repeat across sections, cards, controls, and text so you can rebuild a consistent layout instead of guessing at padding values. The most useful result is a short spacing scale with examples of where each value appears and a check for exceptions.

## Start with a spacing inventory

Review the page at three levels:

1. **Page spacing:** the distance between the viewport edge, header, hero, sections, and footer.
2. **Component spacing:** padding inside cards, buttons, navigation groups, forms, and panels.
3. **Content spacing:** gaps between a heading, paragraph, list, icon, and action.

Record repeated values first. A practical inventory might look like this:

| Role | What to check | Useful output |
| --- | --- | --- |
| Small gap | Icon to label, metadata to title | A compact control gap |
| Text gap | Heading to paragraph, label to input | A readable content rhythm |
| Component gap | Card padding and row spacing | A reusable component value |
| Section gap | Between major page blocks | A page-level rhythm |
| Wide gap | Hero, feature, or footer separation | A responsive layout value |

Do not treat every measured gap as a new token. If several nearby values serve the same role, group them and keep the scale small enough to remember.

The examples below are useful for comparing how a product page uses compact controls, muted dividers, repeated surfaces, and consistent type treatment. Open both examples and compare the first screen, card interiors, and section transitions before borrowing a pattern.

## 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.

## Check the scale across page types

A spacing scale is only useful when it survives more than one section. Compare a dense navigation area with a spacious hero, then compare a card grid with a long-form text block. Look for these signals:

- The same small gap appears between related controls.
- Card padding stays consistent even when card content changes.
- Section spacing increases at clear hierarchy breaks.
- Text does not rely on large margins to compensate for a weak line height.
- Mobile spacing reduces deliberately rather than collapsing unpredictably.

For each repeated gap, note the context rather than only the number. For example, “small gap between icon and label” is more useful than “12 pixels” because it tells you when to reuse the value.

## Separate spacing from other causes

A visual gap may come from padding, margin, line height, an empty grid track, alignment, or an image crop. Check the surrounding structure before assigning it to the spacing scale. A heading that looks too far from a paragraph may need a different line height or font weight, not less margin.

Also check whether the page uses borders and muted backgrounds to create separation. A divider can make two blocks feel farther apart without adding more empty space. The captured Linear examples show why spacing should be reviewed alongside surfaces, dividers, typography, and control density rather than in isolation.

## A practical review checklist

Use this sequence when analyzing a reference:

1. Capture the desktop and narrow viewport states.
2. Mark the main page edges and section boundaries.
3. List repeated internal gaps in the header, cards, and controls.
4. Group close measurements into a small scale.
5. Test the scale against a dense and a spacious section.
6. Record exceptions separately, especially for hero areas and mobile layouts.
7. Rebuild one representative component and compare its rhythm to the reference.

The goal is not to copy every pixel. It is to identify the few spacing decisions that make the page feel organized and repeatable.

## Use this in your AI agent

> Analyze this captured website for its spacing scale. Identify repeated page, section, component, and text gaps; group them into a small practical scale; explain where each value appears; and separate likely padding, margin, line-height, grid, and divider effects. Compare dense and spacious sections and note responsive exceptions. Return a concise table I can use to rebuild the layout.

[Install Fudge for your AI agent](/mcp) to inspect the captured reference while you work.

---

Start with role-based names rather than names tied to one component. For example:

```css
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}
```

The exact values should come from the reference you checked, not from this sample. Assign each variable to a job: control gap, text gap, card padding, section gap, or hero spacing. Avoid creating separate variables for every measured value. If two values look nearly identical and perform the same job, use one token and check the result in context.

Keep responsive changes explicit. A section gap may shrink on mobile while a control gap stays stable. Document those changes beside the variable or in the component rule so the scale remains understandable.

---

Compare the same structural moments rather than comparing the pages as a whole. Start with the header height, the distance from the viewport edge to the main content, card padding, heading-to-body spacing, button padding, and the gap between major sections.

Then compare density. One site may use tighter controls but more generous section spacing, while another may use roomy cards and compact page transitions. That is a style difference, not necessarily an inconsistency.

Finally, check typography before deciding that one page has more spacing. Larger line height, a wider font, or a heavier heading can change the perceived gap without changing the measured layout. A useful comparison table has columns for structural role, approximate value, visual density, and likely cause. This keeps the review focused on decisions you can reuse rather than on isolated pixel differences.

## Related questions

- [Website Design Analyzer for Typography Hierarchy](/share/website-design-analyzer-for-typography-hierarchy)
- [Website design analyzer for page layout](/share/website-design-analyzer-for-page-layout)
- [Analyze Border Radii and Shadows from a Live Website](/share/analyze-border-radii-and-shadows-from-a-live-website)
- [Website design analyzer for motion and interactions](/share/website-design-analyzer-for-motion-and-interactions)