Capture a border-radius scale from a live website for reuse
Learn how to capture and reuse a website's border-radius, spacing, type, color, and component patterns without pretending to own its internal design system.
capture border radius scale from a live website for reuse
Contents
- [Capture repeated components](#capture-repeated-components)
- [Turn observations into a small scale](#turn-observations-into-a-small-scale)
- [Capture the supporting design decisions](#capture-the-supporting-design-decisions)
- [Verify before shipping](#verify-before-shipping)
- [Use this in your AI agent](#use-this-in-your-ai-agent)
To capture a border-radius scale from a live website for reuse, inspect repeated components instead of copying one corner by eye. Record the radius used on buttons, cards, inputs, panels, and larger containers, then group the observations into a small scale for your own interface.
Capture repeated components
Start by listing the surfaces that appear more than once:
- Buttons and compact controls
- Text fields and selects
- Cards and list rows
- Modals, panels, and navigation containers
- Large feature blocks or media frames
For each surface, record the apparent radius, border or shadow treatment, padding, and size. A rounded card may look different from a rounded button even when the numeric radius is similar because the surrounding padding and height change the impression.
Do not infer a complete design system from one component. Capture several examples and look for repetition. The two Linear references below help compare recurring choices across pages. Their notes describe a near-black canvas, muted dividers, compact controls, cool accent treatment, and consistent typography. These observations can guide inspection, but they are not proof of an official token list.
Captured pages
Linear typography
- Inter
Weight 400
- Inter
Weight 500
Turn observations into a small scale
Sort the radii from smallest to largest and merge values that are visually indistinguishable in your product. Most interfaces need a short list, not a separate value for every component. A practical draft might include:
- Small: tags, compact controls, and small inputs
- Medium: buttons, fields, and list items
- Large: cards and grouped panels
- Pill: controls that are intentionally capsule-shaped
Use names tied to your own roles, such as control, card, and panel, rather than names based on the source site's page locations. Store the captured value beside the role and component where it appeared. That makes later changes easier to assess.
Check radius together with border width, background, shadow, and spacing. A large radius with a heavy border can feel inflated. The same radius with a thin divider and compact padding can feel restrained. Reuse the relationship only after testing it with your own content and component sizes.
Capture the supporting design decisions
A radius scale rarely works alone. Inspect type family, weights, line heights, color roles, spacing, borders, shadows, gradients, and repeated component states at the same time. The Linear captures provide a concrete typography observation: Inter appears as the primary interface family, with regular and medium weights used for body copy, labels, controls, headings, and emphasized text.
Use a comparison table while reviewing:
| Area | What to record | Reuse decision |
|---|---|---|
| Radius | Repeated corner shapes | Keep, merge, or reject |
| Spacing | Gaps inside and between components | Define a small rhythm |
| Typography | Family, size, weight, line height | Map to your own text roles |
| Color | Background, text, border, accent roles | Check contrast in context |
| Components | Padding, states, dividers, shadows | Rebuild the relationship |
This prevents the common mistake of copying rounded corners while leaving the rest of the interface inconsistent.
Verify before shipping
Test the proposed scale on real content, not empty mockups. Check long button labels, two-line cards, error messages, dense rows, and narrow mobile widths. Make sure focus indicators, selected states, and disabled states remain visible. If a radius feels too soft, reduce it by role rather than changing every component at once.
Label the output accurately. You have captured observed design details and translated them into reusable decisions. You have not automatically discovered or obtained the source website's internal tokens, naming, rationale, or ownership. Treat the result as a reference-based starting point and verify it against accessibility, content, and interaction needs.
Use this in your AI agent
> Inspect the captured website and extract a practical border-radius scale for reuse. Compare repeated buttons, inputs, cards, panels, navigation surfaces, and large containers. For each, report the observed radius range, related padding, border, shadow, and component role. Group similar values into a small named scale, then list which values to keep, merge, or reject. Also summarize the supporting typography, colors, spacing, and surface treatment, clearly labeling observed details as reference findings rather than an official internal design system.
You can install Fudge for your AI agent to inspect a captured site and turn repeated observations into a reusable reference.
How can I tell whether two border radii are really different or just look different because of component size?
Compare corners in context, not as isolated screenshots. A radius on a short button can appear more rounded than the same radius on a tall card because it takes up a larger share of the component's height. Check the radius-to-height relationship, border thickness, background contrast, and whether the component is a pill or a rounded rectangle.
Use repeated examples at the same zoom and note whether the curve reaches a similar proportion of the edge. If two values produce the same visual role across several components, merge them in your reusable scale. Keep them separate only when the distinction survives changes in content, size, and viewport.
Inspect states as well. Hover, focus, selected, and disabled treatments can make a corner appear stronger or softer. Include at least one normal state and one active or focused state before deciding that two values differ.
How do I turn captured website details into CSS without copying the whole design?
Translate observations into roles that make sense for your product. Instead of copying source names, define variables such as --radius-control, --radius-card, --radius-panel, and --space-section. Map each variable to a small set of components and document the observation that led to it.
Apply one category at a time. Start with radius and spacing, check the result on real content, and then adjust typography, colors, borders, and shadows. This makes it easier to see which change improved or weakened the interface. Keep source references beside the notes, but write implementation rules in your own vocabulary.
Do not treat captured details as proof of an official design system. Verify contrast, focus visibility, text wrapping, touch target size, and responsive behavior in your product. The goal is a coherent set of decisions inspired by observed patterns, not a pixel-for-pixel copy of another site's hidden rules.