# Website Design Analyzer for Border Radii and Shadows

[Open the live Fudge conversation](https://design.withfudge.com/share/website-design-analyzer-for-border-radii-and-shadows)

Last updated: 2026-08-25

A website design analyzer for border radii and shadows should help you identify patterns across cards, buttons, inputs, panels, menus, and overlays. The useful result is not one isolated number. It is a record of which values repeat, which components use different treatment, and what each treatment does for hierarchy and usability.

## Start with a component checklist

Review the page in this order:

1. **Cards and panels:** note corner radius, border treatment, shadow strength, and whether neighboring surfaces use the same values.
2. **Buttons and controls:** compare their radius with cards and inputs. A rounded button beside sharper cards may be intentional, but inconsistent values can also signal separate decisions.
3. **Inputs and menus:** check for a shared radius, a smaller control radius, or a fully rounded pill shape.
4. **Overlays:** inspect dialogs, popovers, dropdowns, and tooltips separately. They often need stronger separation from the page.
5. **States:** compare default, hover, focus, active, disabled, and error treatments when those states are available.

For every observation, record the component, approximate radius, border visibility, shadow direction, softness, spread, opacity, and relationship to the background. If the captured page does not prove an exact value, label it as an estimate.

The supplied Linear captures are useful references for restrained surface treatment. Both notes describe a near-black canvas, muted dividers, compact controls, and one cool accent. They do not provide measured radius or shadow values, so use them to study relationships rather than to claim exact tokens.

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

## Compare patterns, not isolated effects

Use a small comparison table:

| Component | Radius pattern | Shadow pattern | What to check |
| --- | --- | --- | --- |
| Card | Small, medium, or large | None, soft, or layered | Does elevation come from shadow or contrast? |
| Button | Matches controls or stands apart | Usually subtle | Does the shape reinforce the action? |
| Input | Shared with buttons or restrained | Often none | Does focus rely on an outline? |
| Dialog | Usually more pronounced | Strongest separation | Does it remain clear over the page? |

Look for repetition first. If several components appear to share one radius, treat it as a possible token candidate. If the same component changes radius between sections, check whether the difference follows a clear hierarchy, such as compact controls versus feature panels.

Describe shadows by visible behavior: a faint edge separating a card from the background, a broad soft lift for a dialog, or a darker offset under a floating menu. Do not copy a shadow only because it looks attractive in one screenshot. Test it on lighter and darker surfaces and confirm that it does not overpower content or replace a visible focus state.

## Turn observations into reusable values

After reviewing the page, create a small token draft. These values are placeholders for your measurements, not claims about the supplied captures:

```css
:root {
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --shadow-card: 0 4px 20px rgb(0 0 0 / 0.08);
  --shadow-overlay: 0 16px 48px rgb(0 0 0 / 0.18);
}
```

Replace the placeholders after checking the captured page. Then test the tokens against light and dark surfaces, dense and spacious layouts, responsive widths, and keyboard focus states. A good token set reduces needless variation while preserving meaningful differences in role and elevation.

## Use this in your AI agent

> Inspect this website capture for border radii and shadows. Group observations by cards, buttons, inputs, menus, dialogs, and other repeated components. For each group, report the visible radius pattern, border treatment, shadow behavior, surface contrast, and any state differences. Separate measured or clearly observed details from estimates, identify repeated token candidates, and finish with a concise CSS variable draft plus a checklist of details that still need verification.
>
> [Install Fudge for your AI agent](/mcp)

---

Document them by component family and role, not by screenshot position. Start with tokens such as `radius-control`, `radius-card`, `radius-overlay`, `shadow-surface`, and `shadow-overlay`. For each token, include the observed value or range, where it appears, and whether it is verified or estimated.

Add examples for a button, input, card, and dialog so another designer can see the token in context. Include exceptions only when they serve a clear purpose, such as a pill-shaped status control or a dialog that needs stronger separation.

For shadows, describe both the CSS-style ingredients and the visual job. For example, a broad soft shadow may separate an overlay from a dark page, while a card may need only a faint edge because the background already provides contrast. Record changes on hover, focus, or active states. Finish by checking responsive widths, light and dark surfaces, keyboard focus, and any states unavailable during review.

---

Ask the agent to compare the same component categories on both sites and keep observations separate before drawing conclusions. Cover cards, buttons, inputs, navigation, menus, dialogs, badges, and empty states.

For each category, request the radius shape and consistency, border visibility, shadow softness, surface contrast, spacing around the component, and visible interaction states. Then ask which patterns repeat within each site and which differences appear tied to hierarchy rather than inconsistency.

Ask the agent to distinguish visible facts from inferences. A screenshot may show a soft separation effect, but it may not prove the exact blur, spread, or opacity. Use terms such as observed, approximate, or needs verification. End with decisions: patterns worth testing, patterns too specific to copy, neutral tokens for your own interface, and accessibility checks for focus outlines and contrast.

## Related questions

- [Website design analyzer for color roles](/share/website-design-analyzer-for-color-roles)
- [Inspect a Website's Typography Hierarchy from Its URL](/share/inspect-a-website-s-typography-hierarchy-from-its-url)
- [Website design analyzer for component styles](/share/website-design-analyzer-for-component-styles)
- [Inspect a Website's Spacing Scale from Its URL](/share/inspect-a-website-s-spacing-scale-from-its-url)