extract_brand_dna
Extract colors, fonts, logos, and design tokens from any site
Overview
Your clone should look and feel like the original. This tool extracts the complete visual identity from a live WordPress site — colors, fonts, logo URLs, spacing patterns, and UI component styles — including styles loaded by JavaScript.
How It Works
- Fetches the target WordPress site's homepage and renders it fully, including JavaScript.
- Extracts primary, secondary, and accent colors from stylesheets and inline styles.
- Identifies font families, sizes, and weights used across the site.
- Locates logo images and favicon URLs.
- Analyzes JavaScript-rendered content to catch dynamically-loaded branding.
Input Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
url |
string |
required | The homepage URL of the site to analyze |
What You Get Back
- Color palette (primary, secondary, accent, background, text colors)
- Typography (font families, heading/body sizes, weights)
- Logo and favicon URLs
- CSS custom properties / design tokens
Example Use Case
Before building your React clone, run this on the original WordPress site. It returns the exact hex colors, Google Font names, and logo URLs so your Tailwind config matches perfectly from day one.
Tips
Run this early in your cloning project — it informs your design system setup.
JavaScript-rendered styles are included automatically, so nothing gets missed.
The output includes CSS custom property names, so you can map them directly to Tailwind or CSS variables.