# Get the Spacing Scale From a Live Website [Open the live Fudge conversation](https://design.withfudge.com/share/get-the-spacing-scale-from-a-live-website) Last updated: 2026-08-25 To get the spacing scale from a live website, measure repeated gaps between sections, controls, text, and cards, then group those measurements into likely reusable steps. The goal is a practical scale that explains the page's layout without pretending every observed gap belongs to an official design system. ## Measure repeated layout relationships Inspect the page in layers. First measure large spaces such as page gutters, section padding, hero spacing, and the distance between major content groups. Then measure component-level gaps such as card padding, form-field spacing, button gaps, icon-to-label spacing, and text spacing. For each measurement, record: - the element or relationship being measured - the approximate pixel value - the viewport width - whether the value is fixed, fluid, or breakpoint-specific - whether it is margin, padding, grid gap, or line height - nearby values that appear to repeat Do not force every value into a four-point or eight-point scale. Real pages often contain optical adjustments, text-dependent spacing, and one-off values. A first pass might identify clusters such as 4, 8, 12, 16, 24, 32, 48, and 64 pixels, while keeping exceptions separate. ## 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. ## Use captured examples as reference points The supplied references show two captured Linear pages with the same Inter typography, near-black surfaces, muted dividers, compact controls, and a cool accent. Compare the distances between headings, supporting text, controls, and panels. The goal is not to assume a hidden token list. It is to see how spacing works with type size, weight, line height, borders, and surface contrast. When measuring a dark interface, use visible edges rather than color changes alone. A muted divider may mark the true boundary of a section. A card may also have internal padding that looks like empty background. Check the element box and its contents separately. ## Build a candidate scale After collecting measurements, group close values and assign neutral names: ```css :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; } ``` These are candidate values, not verified source tokens. If 15px and 16px serve different purposes, do not round them together until you test the effect. A one-pixel difference may be intentional around borders, controls, or optical alignment. For Tailwind, map the same candidates into theme spacing values and use them in a test page. Keep fluid rules such as `clamp()` values separate because they should not be represented as fixed steps. ## Validate components and breakpoints Use the candidate scale to rebuild three patterns: a text block, a card or panel, and a control group. If the same values preserve the rhythm across all three, the scale is useful. If one component feels cramped or loose, inspect its typography and line height before adding another spacing token. Check vertical rhythm from the baseline, not only from bounding-box edges. A heading with a large ascender or descender can appear closer or farther away even when its CSS margin is identical. Inspect responsive states as well. Page gutters may shrink, card padding may change, and a row of controls may become a stack. A good handoff includes measured examples, candidate tokens, component uses, responsive changes, and exceptions. It is an observed reconstruction, not ownership of the site's official design system. Confirm official names and source values with source code or the site team when precision matters. ## Use this in your AI agent > Inspect the captured website and extract a candidate spacing scale. Measure page gutters, section padding, component padding, gaps, control spacing, and text spacing across available viewports. Group repeated values without forcing exceptions into the scale. Return a table with approximate pixels, element relationship, viewport, layout property, confidence, and responsive behavior. Draft CSS custom properties and Tailwind theme tokens, followed by three component examples that validate the scale. Separate observed values, inferred token groups, fluid rules, and one-off exceptions. [Install Fudge for your AI agent](/mcp) to inspect captured pages and compare spacing across their sections and components. --- Look for repetition across different component types and contexts. A value used for card padding, form spacing, and section gaps is a stronger token candidate than a value seen once beside a particular headline. Repetition should include the same visual role, not only the same number. Check whether the value survives changes in content and viewport. A fixed control gap that appears in several states is more convincing than a gap that only occurs because one paragraph happens to wrap. Compare it with nearby scale steps. If 16px appears everywhere but 15px appears once around a border, keep 16px as the candidate and record 15px as an exception. Finally, test the candidate in a reconstruction. If replacing several measured values with one token preserves the rhythm, it is useful even if the original source uses a slightly different internal name. Label it as inferred until source code or design documentation confirms the official value. --- Include a short token table with the candidate name, pixel or fluid value, and typical use. Add the source viewport and a confidence note for every estimated value. Distinguish compact control gaps, standard component padding, and large section separation. Add annotated screenshots or captured references showing where each token appears. Include responsive rules separately, such as smaller page gutters or stacked control gaps on narrow screens. List exceptions with their reason, especially optical adjustments around headings, icons, borders, and illustrations. Then provide CSS variables or Tailwind theme entries and a small validation page containing a text block, card, and control group. This lets the developer compare the reconstructed rhythm with the captured references. Keep official system names, source-code values, and inferred observations in separate columns so no estimate is mistaken for a confirmed rule. ## Related questions - [Get the Typography System from a Live Website](/share/get-the-typography-system-from-a-live-website) - [Get the shadow styles from a live website](/share/get-the-shadow-styles-from-a-live-website) - [Extract a website border radius scale from a URL](/share/website-border-radius-scale-extractor-from-url) - [Get the page layout from a live website](/share/get-the-page-layout-from-a-live-website)