How do I audit a site's design before rebuilding it?

What this is

A methodology for cleanly extracting an existing site's design tokens before rebuilding it from scratch. Use when you're converting a page builder site to hand-coded, replatforming a CMS, or building a new template that has to match an existing aesthetic.

The order matters

Fonts → colors → images → layout. Always.

• Fonts first because they're the highest-risk to get wrong and the hardest to fix later. The wrong font weight or letter-spacing makes everything else look off, even when colors and layout are perfect.
• Colors second because they're independently verifiable from CSS custom properties and inline styles, and the palette grounds every later visual decision.
• Images third because you can't decide on layout until you know what you're laying out.
• Layout last because every other decision feeds into it. Audit layout while fonts and colors are still floating and you'll redo the layout doc three times.

Setup

Inside the project directory, create:

{project}/
  _audit/
    01-FONTS.md
    02-COLORS.md
    03-IMAGES.md
    04-LAYOUT.md
    source/
      home.html
      about.html
      services.html
      ...

Pull the rendered HTML

Curl the rendered HTML for every page (do not mirror with wget). For sites with a sitemap:

for page in $(curl -s http://oldsite.local/page-sitemap.xml | grep -oE '<loc>[^<]+</loc>' | sed 's|<[^>]*>||g'); do
  slug=$(echo "$page" | sed 's|http://oldsite.local/||; s|/$||; s|/|_|g')
  curl -s "$page" > "_audit/source/${slug:-home}.html"
done

This gives you a stable reference that doesn't change while you audit. Always work from View Source, not DevTools' computed styles — DevTools shows you what the browser did, which is downstream of bugs and overrides.

01-FONTS.md

What to capture

For every distinct text element on the site:

• Font family
• Font weight
• Font size (in px or rem)
• Line-height
• Letter-spacing
• Text-transform (if any)
• Mobile override values (if different)

Elements to cover at minimum: h1, h2, h3, h4, body paragraphs, navigation links, button labels, form labels, fine print/legal text, hero text if distinct.

Where to find it

• Avada/Fusion sites: typography tokens live in wp-content/uploads/fusion-styles/{hash}.min.css. Grep for --awb-typography{1-4}-* and --h{1-6}_typography-* variables.
• Other WP themes: check Google Fonts <link> tags and @font-face declarations in the theme stylesheet.
• Modern frameworks: look in the project's tailwind.config.js, design tokens file, or CSS custom properties.
• Anything else: View Source on a representative page, scroll through the inline styles and CSS link tags.

Output format

Include a CSS variable mapping table that becomes the build target:

| Element | Font | Weight | Size | Line-height | Letter-spacing | CSS var |
|---------|------|--------|------|-------------|----------------|---------|
| h1      | Syne | 800    | 64px | 1.05        | -0.02em        | --type-h1 |
| h2      | Syne | 700    | 40px | 1.15        | -0.01em        | --type-h2 |
| body    | Instrument Sans | 400 | 16px | 1.65 | 0 | --type-body |
| nav     | JetBrains Mono | 500 | 14px | 1.4 | 0.05em | --type-nav |

02-COLORS.md

What to capture

• The full palette with hex values
• Where each color is used (background, body text, headings, accents, link, button, etc.)
• Edge-case colors that only appear in one place — note them, don't hide them in the palette
• Any opacity variants that matter (e.g., 0.6 of the brand color used for muted text)

Where to find it

• Avada: palette is --awb-color1 through --awb-color8 in fusion-styles CSS.
• Other themes: CSS custom properties in the main stylesheet, plus inline style="..." attributes for one-offs.
• Computed colors: if a color appears computed (e.g., rgba(0,0,0,0.5) on a transparent overlay), record both the source color and the effective rendering.

Output format

| Token | Hex | Usage |
|-------|-----|-------|
| --color-bg     | #faf8f5 | Site background |
| --color-text   | #1a1520 | Body text, headings |
| --color-muted  | #6b6370 | Captions, fine print, time stamps |
| --color-accent | #c4882e | Buttons, link hovers, key emphasis |
| --color-rule   | rgba(26,21,32,0.12) | Borders, dividers |

03-IMAGES.md

What to capture

• Full inventory of original-size images (skip the auto-generated -{width}x{height} thumbnails)
• Which page each image appears on
• Role: hero, gallery, decorative, logo, icon, thumbnail
• Whether it's needed at all in the rebuild — some old sites have legacy images you can drop

Where to find it

• WordPress: wp-content/uploads/{year}/{month}/ — originals only
• Slider plugins: wp-content/uploads/revslider/ or equivalent
• Logos and favicons: theme assets, root, or media library

Don't copy

• Plugin assets (icons, sprites, default placeholders)
• Theme assets (chrome, default backgrounds, fallbacks)
• WP core files
• CSS/JS from plugins

04-LAYOUT.md

What to capture

For every page:

• Section order (top to bottom)
• Container widths (max-width and any per-section overrides)
• Breakpoints in use (which widths the layout changes at)
• The repeating schema for header and footer (these usually share across pages)
• Spacing between sections (vertical rhythm)
• Any page-specific quirks worth flagging

Header/footer schema

Header and footer typically repeat across all pages — extract them once, reference everywhere:

## Header
- Logo (left)
- Primary nav: Home, Services, About, Contact (center)
- Phone number + CTA button (right)
- Sticky on scroll, semi-transparent
- Height: 80px desktop, 64px mobile

## Footer
- Three columns: Address, Quick Links, Social
- Newsletter signup (bottom band)
- Copyright + privacy/terms links
- Height: ~280px on desktop

Per-page section order

## Home
1. Hero (full-bleed image + h1 + CTA)
2. Service Lanes (3-up grid)
3. Portfolio strip
4. Testimonial rotator
5. CTA band

## About
1. Page hero (image + h1)
2. Founder narrative (2-col text+image)
3. Process timeline
4. Team grid
5. CTA band