Website Design Analyzer for Border Radii and Shadows
Learn how to check border radii, shadows, and related UI details on a website, then turn the observations into a practical design checklist.
website design analyzer for border radii and shadows
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:
- Cards and panels: note corner radius, border treatment, shadow strength, and whether neighboring surfaces use the same values.
- 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.
- Inputs and menus: check for a shared radius, a smaller control radius, or a fully rounded pill shape.
- Overlays: inspect dialogs, popovers, dropdowns, and tooltips separately. They often need stronger separation from the page.
- 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
Linear typography
- Inter
Weight 400
- Inter
Weight 500
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:
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
How should I document border radii and shadows for a design handoff?
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.
What should I ask an AI agent to check when comparing two websites?
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.