How to Check Component Styles on Any Website

To check component styles on any website, review repeated interface pieces in their normal, hover, focus, disabled, and selected states. Start with buttons, links, inputs, cards, navigation, and status messages. Compare typography, spacing, colors, borders, radii, shadows, alignment, and visible behavior.

Start with the component inventory

Do not inspect one attractive section and assume it represents the whole site. Build a short inventory first:

• Navigation: logo area, primary links, menus, breadcrumbs, tabs
• Actions: primary buttons, secondary buttons, icon buttons, text links
• Forms: text fields, selects, checkboxes, radio controls, validation messages
• Surfaces: cards, panels, tables, popovers, dialogs
• Feedback: alerts, badges, toasts, progress indicators, empty states
• Content: headings, body copy, labels, captions, metadata

For every component, capture one representative example and record its width, height, padding, gap, text size, weight, line height, color, border, radius, shadow, and alignment. Then record what changes when someone interacts with it.

The captured Linear examples below provide a comparison reference: a near-black canvas, muted dividers, compact controls, and one cool accent. The supplied font evidence identifies Inter at weight 400 for body copy, labels, navigation, and controls, and Inter at weight 500 for headings and emphasized interface text. Use these observations as reference details for the captured pages, not as a claim that every page in the product uses identical rules.

Compare states, not just screenshots

A component's style includes its response to interaction. Check default, hover, pressed, disabled, and focus states for buttons; default, hover, visited when visible, and focus for links; empty, filled, focused, invalid, and disabled for inputs; and default, hover, and selected states for cards.

Record the full signal, not only the color. A selected tab may gain a line, a background, heavier type, or several changes together. A button may change its fill, shadow, and movement. A card may become clickable only when its surface and cursor treatment change together.

Measure the relationships between pieces

Component review is mostly about relationships. Compare the gap between a label and input, the space between an icon and button text, the distance from a card edge to its content, and the rhythm between stacked sections. Look for repeated values rather than trying to measure every pixel.

Typography deserves its own pass. Record family, weight, size, line height, letter spacing, and casing for headings, body text, labels, and metadata. In the captured Linear examples, Inter is used across ordinary interface text and emphasized text, with weight contributing to hierarchy.

Check whether cards, inputs, and menus share a radius, border treatment, or shadow style. Repeated relationships are often more useful than a single attractive component.

Write a component style sheet

Turn observations into a compact record another person can use:

Repeat this for the main components, then add a comparison column for pages or sections. Mark each detail as repeated, occasional, or unique. Repeated details are the best candidates for shared styles. Occasional details may belong to a section. Unique details should remain examples until stronger evidence appears.

This approach describes visible styles without claiming access to private source files or an official internal design system. Keep the source and confidence of each observation attached. If you later convert the notes into CSS or a handoff document, preserve those limits and distinguish observed values from approximations.

Use this in your AI agent

> Check the component styles on this website. Inventory navigation, buttons, links, inputs, cards, surfaces, feedback components, and text styles. For each repeated component, report dimensions, spacing, typography, colors, borders, radii, shadows, alignment, and visible interaction states. Compare at least two sections or pages, separate repeated patterns from one-off details, and finish with a practical component style sheet I can use as a design reference.

Install Fudge for your AI agent when you want to inspect captured references and compare component patterns across pages.

Start with navigation, primary buttons, text fields, cards or panels, headings and body text, then feedback states.

Navigation reveals spacing, alignment, logo treatment, link hierarchy, and active-state patterns. Primary buttons show the main action color, typography, radius, padding, and hover or focus behavior. Inputs expose border contrast, label placement, validation treatment, and vertical spacing. Cards show how the site groups information through surfaces, dividers, shadows, and internal padding.

After that, inspect one complete content section rather than isolated pieces. Check how a heading, paragraph, action, image, and card relate to one another. If the site has a product flow, prioritize the first screen where someone must act. If it is editorial, prioritize navigation, article headings, metadata, links, and related-content cards. Capture one default state and one interactive or feedback state for each priority component.

Abstract repeated decisions instead of copying page-specific content. Keep the structural rule, style values, and condition that triggers each state. Replace headlines, images, labels, and brand marks with neutral placeholders.

For example, document a button as a compact control with a medium-weight sans-serif label, rounded corners, strong accent fill, darker hover fill, visible focus ring, and muted disabled treatment. That is a reusable pattern. A literal headline, one-off illustration, or unique decorative gradient is content, not a shared component rule.

Group the notes into foundations such as type, color, spacing, and radius; components such as buttons and cards; states such as hover and validation; and composition such as section width and vertical rhythm. Mark every value as observed, approximate, or needing verification. Then test the reference on a small unrelated screen. If it works without forcing the original copy or imagery, you extracted a useful design reference rather than reproduced a page.

Related questions

• How to Check Gradients and Backgrounds on Any Website
• How to Check Color Roles on Any Website
• How to Check Image and Video Use on Any Website
• How to Check Border Radii and Shadows on Any Website