# How to Analyze a Website Spacing Scale [Open the live Fudge conversation](https://design.withfudge.com/share/analyze-spacing-scale-from-a-live-website) Last updated: 2026-08-25 To analyze a spacing scale from a live website, first capture the page or open an existing website reference, then record repeated distances between related elements. Group similar observations by purpose instead of treating every pixel value as a separate rule. The useful result is a practical map of compact, component, and section spacing that explains how the page creates hierarchy. ## Build a spacing inventory Start with the relationships visitors notice most: - Label to input - Icon to label - Heading to paragraph - Paragraph to button - Card padding - Card to card - Navigation item to navigation item - Divider to nearby content - Section content to the section edge For each observation, record the page section, approximate gap, elements involved, and likely purpose. Keep the relationship with the number. A 12-pixel icon gap and a 12-pixel paragraph gap may share a value but serve different roles. After collecting measurements, group near-matches into bands. A page might suggest compact steps around 4, 8, 12, and 16 pixels, then larger component or section steps around 32, 48, and 64 pixels. These are examples, not conclusions. Repetition and hierarchy matter more than forcing the page into a fashionable scale. Use the captured Linear references below as a comparison. Their near-black canvas, muted dividers, compact controls, cool accent, and shared Inter typography make them useful for studying how tight control spacing can coexist with larger gaps around headings and sections. ## 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. ## Read spacing as hierarchy Small gaps usually show that items belong together. Medium gaps separate related groups. Large gaps signal a new topic or section. Hide borders and backgrounds mentally: if the page still groups content clearly through spacing, the system is doing important work. Compare these relationships: - Heading to supporting copy should be tighter than heading to the next unrelated section. - A button should remain visually connected to the content it advances. - Card padding should usually be smaller than the gap between cards. - Navigation controls should be scannable without feeling loose. Typography affects every conclusion. Check font size, line height, text width, and wrapping before adding padding. A paragraph that wraps to three lines may need a different text width, not a larger gap. ## Check responsive and interactive states Do not stop at the opening viewport. Compare desktop and narrow layouts, open menus, expanded cards, error messages, focus states, and long text when those states are available in the capture. Look for consistent compression on smaller screens rather than unrelated reductions in every component. Ask whether repeated components keep similar internal padding, whether dividers have enough breathing room, whether validation text shifts nearby content, and whether the largest gaps are reserved for the largest changes in topic. This is where a plausible spacing pattern often reveals exceptions. ## Turn observations into tokens Keep observed values separate from implementation values. Draft semantic roles such as `space-inline-xs`, `space-control`, `space-stack-sm`, `space-card`, and `space-section`. Assign each an approximate value and note exceptions such as a dense toolbar or spacious editorial hero. Test the draft by rebuilding a navigation bar, form, card grid, and long content section. If the same small set of roles keeps those areas balanced, the scale is useful. Call it an approximation of the observed page, not the site's official design system. ## Use this in your AI agent > Analyze the spacing scale on this captured website. Group repeated gaps between text, controls, cards, dividers, navigation items, and sections. Explain the hierarchy each gap creates, compare desktop and narrow states when available, and separate likely spacing roles from one-off exceptions. Return a practical token list with names, approximate values, relationships, and notes about typography, responsive changes, focus states, and expanded content. [Install Fudge for your AI agent](/mcp) to inspect spacing across saved website captures and turn the observations into a working layout checklist. --- Look for repetition across unrelated components. Compare three levels separately: inside components, between components, and between sections. Check input padding, icon gaps, button spacing, card gaps, form-field spacing, toolbar groups, and section boundaries. A real system usually reuses a small group of values at all three levels. Many close values serving the same relationship, such as 14, 15, 17, and 19 pixels, suggest either measurement noise or one-off decisions. Also record intentional exceptions. A dense navigation bar may need tighter spacing than an editorial hero, and mobile may compress a desktop role. Rebuild two different components with your proposed values. If both stay clear and balanced, the pattern is probably meaningful. If one becomes cramped, create a different semantic role rather than adding an arbitrary value without documenting why. --- Keep observed measurements separate from implementation values. Create a table with the measured gap, proposed role, and chosen token. Round repeated observations into a short scale only after checking the whole page. For CSS, define semantic variables such as `--space-control`, `--space-stack`, `--space-card`, and `--space-section`. For Tailwind, map the same roles to project spacing utilities or a small custom theme scale. Use the role name where the relationship matters, not only where the number happens to match. Test the tokens on a navigation group, form, card grid, and long content section. Check wrapping, focus rings, validation text, and narrow screens. Keep a short exception list for treatments the captured design clearly handles differently. This preserves the observed hierarchy without claiming that the values are official site tokens. ## Related questions - [How to analyze typography hierarchy from a live website](/share/analyze-typography-hierarchy-from-a-live-website) - [Analyze Page Layout from a Live Website](/share/analyze-page-layout-from-a-live-website) - [Give Claude Code a Website's Border Radii and Shadows](/share/give-claude-code-a-website-s-border-radii-and-shadows) - [How to Analyze Motion and Interactions on a Live Website](/share/analyze-motion-and-interactions-from-a-live-website)