> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wrldwide.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Website Design Inspector

> Extract colors, fonts, and design systems from any website in seconds

# Website Design Inspector

**Extract the complete design system from any website** — colors, typography, background/text combinations, and contrast ratios — in seconds. Perfect for competitive analysis, brand inspiration, or recreating a design aesthetic.

**Credit Cost:** 2 credits per inspection\
**Access:** [app.wrldwide.ai/website-inspector](https://app.wrldwide.ai/website-inspector)

***

## Overview

Enter any URL and the Website Design Inspector will:

1. **Screenshot** the live website
2. **Extract** all colors used (backgrounds, text, accents)
3. **Identify** all fonts and their weights/sizes
4. **Map** background-text combinations with contrast ratios
5. **Deliver** a complete, copy-ready design report

***

## What Gets Extracted

### 🎨 Colors

The inspector categorizes colors into three groups:

| Category             | What It Shows                                        |
| -------------------- | ---------------------------------------------------- |
| **Main Backgrounds** | Primary background colors and their usage frequency  |
| **Main Text Colors** | Body text, heading, and label colors                 |
| **Accent Colors**    | CTA buttons, highlights, links, interactive elements |
| **All Colors**       | Complete palette sorted by usage percentage          |

For each color you get:

* **HEX code** (e.g., `#7c5cfc`)
* **RGB values** (e.g., `rgb(124, 92, 252)`)
* **Color name** (e.g., "Medium Slate Blue")
* **Usage percentage** — how much of the site uses this color

***

### ✍️ Typography

Font extraction reveals:

| Data             | What It Shows                                        |
| ---------------- | ---------------------------------------------------- |
| **Font Family**  | Typeface name (e.g., "Inter", "Geist", "DM Sans")    |
| **Weights Used** | Which weights are active (300, 400, 600, 700, etc.)  |
| **Sizes Used**   | Font size range (e.g., 12px, 14px, 16px, 24px, 48px) |
| **Usage**        | How frequently the font appears                      |

***

### 🔲 Background-Text Combinations

The most actionable section — shows exactly which colors are used together:

* **Background color** + **Text color** pairings
* **Count** — how many times this combination appears
* **Contrast ratio** — accessibility score (WCAG compliance)
* **Visual preview** — see the actual combination rendered

***

## How to Use

<Steps>
  <Step title="Open Website Design Inspector">
    Navigate to [app.wrldwide.ai/website-inspector](https://app.wrldwide.ai/website-inspector)
  </Step>

  <Step title="Enter Website URL">
    Type or paste the full URL of the website you want to inspect.

    **Examples:**

    * `https://apple.com`
    * `https://shopify.com`
    * `https://yourcompetitor.com`

    Works on any public website.
  </Step>

  <Step title="Click Extract">
    Click **Extract Design** (costs 2 credits). The inspector will:

    * Load and screenshot the live site
    * Process colors, fonts, and combinations
    * Return results in \~10-20 seconds
  </Step>

  <Step title="Review Colors">
    Browse the color sections — Main Backgrounds, Main Text Colors, Accent Colors. Click any color to copy its HEX code instantly.
  </Step>

  <Step title="Review Typography">
    See which fonts are used and at which weights. Note the font family names for use in your own designs or prompts.
  </Step>

  <Step title="Review Combinations">
    The background-text combinations section shows the actual color pairings used. Check contrast ratios for accessibility.
  </Step>

  <Step title="Copy and Apply">
    Use the one-click copy buttons to grab HEX codes, font names, or full color palettes. Apply to your brand assets or image generation prompts.
  </Step>
</Steps>

***

## Key Features

<AccordionGroup>
  <Accordion title="Live Website Screenshot">
    The inspector loads and renders the actual live website — including dynamic elements, CSS variables, and current design. You see what visitors see.
  </Accordion>

  <Accordion title="Usage-Weighted Color Ranking">
    Colors are ranked by how frequently they appear. The top colors are what define the site's visual identity — not just what exists in CSS files.
  </Accordion>

  <Accordion title="Contrast Ratio Analysis">
    Each background-text combination is scored for accessibility compliance. This is useful for both design inspiration and ensuring your own designs meet WCAG standards.
  </Accordion>

  <Accordion title="One-Click Copy">
    Every color value (HEX, RGB) has a copy button. Font names can be copied directly. No manual transcription required.
  </Accordion>

  <Accordion title="Visual Screenshot Preview">
    See a screenshot of the inspected website alongside the extracted data — so you can cross-reference colors with what you're seeing visually.
  </Accordion>
</AccordionGroup>

***

## Use Cases

### Competitive Design Research

Inspect competitor websites to understand their design language:

* What color palette do they use?
* Are they using warm or cool tones?
* What's their accent color for CTAs?
* Which fonts signal their brand personality?

### Brand Cloning for Ads

Extract the exact colors and fonts from a successful brand, then use them in your own creative prompts:

```
Generate a skincare product ad using this color palette:
Background: #F5F0E8 (warm off-white)
Text: #1A1A1A (near-black)
Accent: #C4956A (warm gold)
Font style: Clean sans-serif, similar to "Canela" typeface
```

### Design System Documentation

Inspect your own website to document your live design system — useful for brand guidelines, onboarding designers, or auditing consistency.

### Style Transfer Inspiration

Use the extracted palette in [Style Transfer](/en/features/style-transfer) to apply a website's visual aesthetic to your product images.

***

## Prompt Engineering with Extracted Data

Use inspector results directly in image generation prompts:

**Before (vague):**

```
Product photo in Glossier style
```

**After (precise, using extracted data):**

```
Product photo, background color #F5F0EB (warm cream), 
accent color #E8C4B8 (dusty rose), clean sans-serif typography,
minimal white space, soft diffused lighting, premium DTC aesthetic
```

The more precise your color and font references, the more accurate your AI-generated visuals.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Image Generation" icon="image" href="/en/features/image-generation">
    Use extracted colors in image prompts
  </Card>

  <Card title="Style Transfer" icon="paintbrush" href="/en/features/style-transfer">
    Apply design aesthetics to product images
  </Card>

  <Card title="Logo Creation" icon="star" href="/en/features/logo-creation">
    Create logos using your color palette
  </Card>

  <Card title="Ad Insight" icon="magnifying-glass-chart" href="/en/features/ad-insight">
    Analyze competitor ad creatives
  </Card>
</CardGroup>