Get the media styles from a live website

Contents

• [Start with a media inventory](#start-with-a-media-inventory)
• [Record the treatment, not just the asset](#record-the-treatment-not-just-the-asset)
• [Turn observations into reusable rules](#turn-observations-into-reusable-rules)
• [Check before you reuse the style](#check-before-you-reuse-the-style)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The fastest way to get media styles from a live website is to document each image and video by role, crop, placement, treatment, and behavior rather than saving screenshots alone. Build a short media inventory first, then turn repeated patterns into reusable rules for your own pages.

Start with a media inventory

Review the page from top to bottom and record every meaningful visual asset. For each item, capture:

• Role: hero media, product demo, editorial image, testimonial portrait, logo, background texture, or decorative illustration.
• Format: still image, looping video, animated illustration, carousel, or interactive media.
• Placement: full-bleed, contained, inside a card, beside text, behind text, or floating over another section.
• Aspect ratio: note whether the source appears wide, square, tall, or intentionally cropped into a custom shape.
• Priority: mark whether the media carries the message or simply supports it.

This separates a site's media system from its individual files. A hero video and a small card thumbnail may use different crops and loading behavior even when they share the same visual style.

The captured references below show several ways media can shape a marketing page. Pangram AI Detector combines illustration and video with a bold editorial palette. Refero is video-led, while Bland and Fin Apex also use captured video alongside product or launch storytelling. Use these references to compare visual patterns, then verify the same details on the website you are studying.

Record the treatment, not just the asset

For each media type, check the details that change how it feels on the page:

1. Crop and focal point: Is the subject centered, aligned to the top, or intentionally pushed toward one edge?
2. Container shape: Does the media use a rectangle, rounded card, circle, mask, border, or no visible container?
3. Overlay: Look for gradients, tinting, captions, controls, badges, logos, or text placed over the image.
4. Motion: Note autoplay, looping, playback speed, hover movement, scroll-triggered animation, and whether controls are visible.
5. Surface treatment: Check borders, shadows, blur, grain, color grading, and the amount of empty space around the media.
6. Responsive behavior: Compare desktop and narrow views if available. A wide video may become a shorter crop, a stacked block, or a still image on smaller screens.

Write observations as rules. For example: "Product demos sit inside wide rounded containers, keep the main interface near the center, and use a quiet dark overlay behind labels." That is more useful than "There is a video in the hero."

Turn observations into reusable rules

Group repeated choices into a small media style guide:

Keep the first version short. Five to ten clear rules are easier to apply than a catalog of every visible asset. Add exceptions only when a repeated pattern cannot explain them.

Check before you reuse the style

Before copying a media pattern, test it against three questions:

• Does the crop keep the important subject visible at every target size?
• Can text remain readable without depending on a particular image's colors?
• Does the motion help explain the product, or does it compete with the page's main action?

Also separate observed details from assumptions. You can document that a video loops or that an image is cropped, but do not assume why the original team chose that behavior. A website capture can help you inspect page sections, media crops, overlays, playback, and responsive states in one place.

Use this in your AI agent

> Inspect this captured website for its media style system. List every important image, video, illustration, and animated element by page section. For each one, report its role, format, aspect ratio, crop and focal point, container shape, borders, radius, shadow, overlay, color treatment, motion behavior, controls, and responsive changes. Separate repeated rules from one-off exceptions, then produce a concise media style guide with implementation-ready recommendations for hero media, supporting cards, product demos, and mobile fallbacks.

Install Fudge for your AI agent to inspect captured website media while you work.

Treat video as both a visual style and a behavior system. Alongside the usual crop, ratio, radius, border, and overlay notes, record whether the video autoplays, loops, starts muted, shows controls, uses a poster frame, and changes on hover or scroll.

A useful video worksheet has four parts:

• Framing: source ratio, visible crop, focal point, and whether the frame fills or fits its container.
• Playback: autoplay, loop, muted state, controls, duration, and any visible transition at the start or end.
• Context: what the video demonstrates and whether nearby text explains it.
• Fallback: poster image, still-image replacement, reduced-motion behavior, and narrow-screen treatment.

Compare at least one hero video, one product or feature demo, and one small supporting video. If all three use the same radius and muted palette but different playback rules, record those as shared surface styles with separate behavior rules. This keeps your guide flexible instead of forcing every video into one component.

Use this checklist before you build:

1. List the page sections that contain meaningful media.
2. Label each asset as hero, demo, editorial, testimonial, background, or decorative.
3. Record the ratio, crop anchor, container shape, radius, border, shadow, and overlay.
4. Note whether the asset is still, looping, interactive, or triggered by scroll or hover.
5. Check desktop and narrow layouts for crop, height, stacking, and fallback changes.
6. Mark which rules repeat across sections.
7. Test the most important crop with real copy over it.
8. Check readability without relying on a lucky image background.
9. Separate confirmed observations from guesses about intent.
10. Turn the repeated observations into component rules and keep exceptions beside the component that needs them.

A strong final guide should let another designer choose a media treatment without reopening the reference page. If they still need to guess the crop, overlay, or playback behavior, add one more concrete example to the rule.

Related questions

• Get the page layout from a live website
• Get Interaction Patterns from a Live Website
• Get the shadow styles from a live website
• Get the Spacing Scale From a Live Website