# Inspect a website's component styles from its URL [Open the live Fudge conversation](https://design.withfudge.com/share/inspect-a-website-s-component-styles-from-its-url) Last updated: 2026-08-25 The fastest way to inspect a website's component styles is to review each visible component with its surrounding layout, typography, color roles, spacing, borders, radii, and states. Start with repeated components, then turn the observations into a small style guide instead of copying isolated values. ## Use a repeatable inspection method 1. **Capture the page at a useful viewport.** Check desktop first, then inspect a narrow view if responsive behavior matters. Record the page state, such as a landing page, dashboard, open menu, focused form, or visible modal. 2. **List repeated components.** Note buttons, links, navigation items, cards, fields, badges, tabs, tables, alerts, and overlays. Describe each component's job before recording its appearance. 3. **Separate structure from decoration.** Structure includes width, height, alignment, gaps, padding, and stacking. Decoration includes typeface, weight, color, border, radius, shadow, gradient, and hover or active treatment. 4. **Look for patterns.** If three cards use the same padding and radius, treat those values as a component rule. If one hero element differs, mark it as an exception. 5. **Check contrast and hierarchy.** Compare primary actions with secondary actions, headings with body copy, and borders with the page background. The Linear references below show a near-black canvas, muted dividers, compact controls, one cool accent, and Inter used across body copy, labels, navigation, headings, and emphasized interface text. Use the references to study relationships between surfaces, spacing, and type weight. Do not assume that a captured appearance proves the site's private source code or official design 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. ## Record each component as a recipe Use the same note format for every repeated component: - **Name:** primary button - **Purpose:** confirms the main action - **Shape:** height, horizontal padding, and radius - **Type:** family, size, weight, line height, and letter spacing - **Color:** text, fill, border, hover, and disabled states - **Layout:** alignment, gap, and icon position - **Depth:** border, shadow, overlay, or none - **States:** default, hover, focus, pressed, and disabled - **Responsive rule:** what changes on a narrow screen For buttons, compare primary, secondary, text, icon-only, disabled, hover, pressed, and focus versions. For cards, record outer width, internal padding, title-to-body gap, media treatment, border, radius, shadow, and behavior when content becomes longer. For fields, record label placement, input height, placeholder color, focus border, error treatment, helper text, icon spacing, and disabled contrast. ## Turn observations into design tokens After reviewing several components, group repeated values into roles such as `page-background`, `surface-muted`, `text-primary`, `text-secondary`, `border-subtle`, `action-primary`, and `focus-ring`. Do the same for spacing, radii, type sizes, and shadows. Map components to those roles. A card may use `surface-muted`, `border-subtle`, a medium radius, and standard padding. A primary button may use `action-primary`, contrasting text, a smaller radius, and a stronger focus ring. Mark each observation as directly visible, repeated across the page, or inferred. This keeps a recreated system honest and useful. ## Verify the result before using it Compare text at different lengths, buttons with and without icons, cards with different content, keyboard focus, readable contrast, responsive widths, and longer labels. Check loading, error, and disabled states when they are visible or relevant. If you do not control the site, use the inspection for learning, comparison, or an original implementation. Do not assume that observed fonts, images, logos, or other assets are cleared for reuse. ## Use this in your AI agent > Inspect the website at [paste URL]. Identify its repeated components, page structure, typography families and variants, spacing, colors by role, borders, radii, shadows, gradients, and visible interaction states. Organize the result by component, distinguish repeated rules from one-off exceptions, flag anything that could not be verified, and finish with reusable design tokens for an original implementation. [Install Fudge for your AI agent](/mcp) to inspect captured website references while you work. --- Use the same checklist for every component. Start with the component's job, then record its size, spacing, alignment, type, colors, border, radius, shadow, and states. For a **button**, compare primary, secondary, text, icon-only, disabled, hover, pressed, and focus versions. Record icon alignment, label casing, and whether the button grows to fit its text. For a **card**, inspect outer width, internal padding, title-to-body gap, media treatment, border, radius, shadow, and behavior when content becomes longer. Check whether cards share one surface or alternate between filled and outlined styles. For a **form field**, record label placement, input height, placeholder color, focus border, error treatment, helper text, icon spacing, and disabled contrast. Test a long label and an error message before treating dimensions as fixed. Repeated values can become shared tokens. Differences should become intentional variants such as `primary`, `quiet`, `danger`, or `compact`, rather than unrelated CSS values. --- Begin with global rules: page background, surface colors, text roles, font families, type scale, spacing steps, radii, borders, shadows, and focus treatment. Give each token a role-based name so the guide remains useful if values change. Add one recipe for each repeated component. Include its default version, variants, dimensions, internal spacing, states, and responsive behavior. Show realistic content, including a long label, missing image, error, and disabled state. Separate directly visible details, repeated patterns, and inferences. You may observe a gap that looks like 12 pixels, but do not call it an official spacing token unless the pattern repeats. Finish with an implementation checklist: confirm font files, test keyboard focus, check contrast, test narrow widths, compare loading and error states, and review the result against the captured reference. This produces an original, verifiable guide instead of a claim about the site's private design system. ## Related questions - [Inspect a website's gradients and backgrounds from its URL](/share/inspect-a-website-s-gradients-and-backgrounds-from-its-url) - [Inspect a website's color roles from its URL](/share/inspect-a-website-s-color-roles-from-its-url) - [How to Check Typography Hierarchy on a Website](/share/how-to-check-typography-hierarchy-on-any-website) - [Inspect a Website's Page Layout from Its URL](/share/inspect-a-website-s-page-layout-from-its-url)