Purpose: This guide documents the systematic process for using Chrome DevTools to create exact replicas of website sections, achieving pixel-perfect accuracy in HTML and CSS.

Author: Claude (Sonnet 4.5)
Date: October 15, 2025
Test Case: WPLaunchify.com hero section reproduction

# Guide: Pixel-Perfect Website Cloning Using Chrome DevTools

**Purpose**: This guide documents the systematic process for using Chrome DevTools to create exact replicas of website sections, achieving pixel-perfect accuracy in HTML and CSS.

**Author**: Claude (Sonnet 4.5)  
**Date**: October 15, 2025  
**Test Case**: WPLaunchify.com hero section reproduction

---

## Overview

Pixel-perfect cloning requires methodical inspection of:
1. **Structure** - HTML hierarchy and semantic elements
2. **Typography** - Font families, sizes, weights, spacing
3. **Layout** - Grid systems, flexbox, positioning
4. **Colors** - Exact RGB/hex values for backgrounds, text, borders
5. **Spacing** - Margins, padding, gaps
6. **Visual Effects** - Shadows, gradients, patterns, SVG shapes
7. **Interactive Elements** - Buttons, links, navigation

---

## Process: Step-by-Step Chrome DevTools Inspection

### Phase 1: Initial Page Load & Structure Analysis

**Tool**: `mcp_chrome-devtools_new_page` or `mcp_chrome-devtools_navigate_page`

```javascript
// Navigate to target page
navigate_page(url: "https://example.com", timeout: 10000)
```

**Key Discovery Method**:
```javascript
// Map the basic structure
() => {
  const body = document.body;
  const firstElements = Array.from(body.children).slice(0, 10);
  
  return firstElements.map(el => ({
    tag: el.tagName,
    class: el.className,
    id: el.id,
    height: el.offsetHeight,
    text: el.textContent.trim().substring(0, 100)
  }));
}
```

**What I Found**:
- Main wrapper: `
`
- Header: `
` (156px height)
- Contains both top bar AND main navigation (critical discovery)

---

### Phase 2: Typography Deep Dive

**Critical Areas to Inspect**:
1. Font family declarations
2. Font weights loaded
3. Font sizes (in px, rem, em)
4. Line heights
5. Letter spacing
6. Text transforms

**Method**:
```javascript
() => {
  // Get H1 precise measurements
  const h1 = document.querySelector('h1');
  const h1Style = h1 ? window.getComputedStyle(h1) : null;
  
  return {
    fontFamily: h1Style.fontFamily,
    fontSize: h1Style.fontSize,
    fontWeight: h1Style.fontWeight,
    lineHeight: h1Style.lineHeight,
    letterSpacing: h1Style.letterSpacing,
    textTransform: h1Style.textTransform,
    margin: h1Style.margin
  };
}
```

**What I Found**:
- Font family: `Montserrat, sans-serif`
- Google Fonts URL: `fonts.googleapis.com/css?family=Montserrat:regular,700&display=swap`
- H1: 45px size, 700 weight, 54px line-height, -2.5px letter-spacing
- Subtitle: 24px size, 400 weight, 36px line-height
- CTA heading: 20px size, 700 weight, 3.6px letter-spacing, uppercase
- Nav links: 16px size, 400 weight, 25.6px line-height

**Critical Note**: The exact Google Fonts URL matters - `regular,700` loads weights 400 and 700 only.

---

### Phase 3: Color Extraction

**Method**:
```javascript
() => {
  const elements = {
    topBar: document.querySelector('.site-header-row-container-inner'),
    h1: document.querySelector('h1'),
    subtitle: h1.nextElementSibling,
    ctaBand: document.querySelector('.gb-container-2d05ce62')
  };
  
  return Object.entries(elements).reduce((acc, [key, el]) => {
    if (el) {
      const style = window.getComputedStyle(el);
      acc[key] = {
        color: style.color,
        backgroundColor: style.backgroundColor
      };
    }
    return acc;
  }, {});
}
```

**What I Found**:
- Top bar background: `rgb(229, 91, 16)` - orange
- H1 color: `rgb(45, 55, 72)` - dark gray
- Subtitle color: `rgb(229, 91, 16)` - orange (brand color)
- Hero background: `rgb(247, 250, 252)` - light blue-gray
- CTA band background: `rgb(11, 50, 142)` - dark blue
- CTA button background: `rgb(229, 91, 16)` - orange

**Key Insight**: The orange `rgb(229, 91, 16)` is the brand color used consistently across buttons, links, and accents.

---

### Phase 4: Layout & Structure Discovery

**Challenge**: Finding the exact HTML hierarchy and layout system.

**Method - Walk the DOM Tree**:
```javascript
() => {
  const target = document.querySelector('img[src*="shadow"]'); // Find logo images
  const parents = [];
  let current = target;
  
  for (let i = 0; i < 10 && current && current !== document.body; i++) {
    current = current.parentElement;
    const style = window.getComputedStyle(current);
    parents.push({
      level: i,
      tag: current.tagName,
      class: current.className,
      display: style.display,
      gridTemplateColumns: style.gridTemplateColumns,
      flexWrap: style.flexWrap,
      gap: style.gap,
      width: current.offsetWidth,
      height: current.offsetHeight
    });
  }
  
  return parents;
}
```

**What I Found**:
- Logo grid uses: `display: flex`, `flex-wrap: wrap`, `justify-content: center`
- Grid wrapper: `.gb-grid-wrapper-1bf8c6a6` (900px wide, 6 columns visible)
- Individual logos: 86px × 86px
- Gap between logos: 30px
- Header uses: `display: grid` with `grid-template-columns: 227px 746px`

**Critical Discovery**: The site has TWO header rows:
1. Top bar (orange, 76px height) - announcement
2. Main navigation (white, 80px height) - logo + nav + CTA button

---

### Phase 5: Hidden Elements - SVGs, Patterns, Pseudo-Elements

**Most Challenging Part**: Finding decorative elements that aren't immediately visible in the DOM.

**Method - Search for SVGs**:
```javascript
() => {
  const allSvgs = Array.from(document.querySelectorAll('svg'));
  return allSvgs.map(svg => ({
    viewBox: svg.getAttribute('viewBox'),
    innerHTML: svg.innerHTML.substring(0, 300),
    parentClass: svg.parentElement.className,
    nearCTA: svg.closest('.gb-container-2d05ce62') !== null
  }));
}
```

**What I Found**:
- Two SVG wave shapes with `viewBox="0 0 1200 96.2"`
- Path data: `"M0 96.2h1200V72.9l-50-8.9c-50-8.6-150-26.9-250-22.2C800 46.2 700 72.9 600 64 500 55.4 400 10.4 300 1.8 200-7.1 100 19.5 50 32.9L0 46.2v50z"`
- Container: `.gb-shapes` with `position: absolute`
- Top wave: `transform: scaleY(-1)`, fill `rgb(247, 250, 252)`
- Bottom wave: no transform, fill `rgb(11, 50, 142)`

**Method - Search for Background Patterns**:
```javascript
() => {
  const allElements = Array.from(document.querySelectorAll('*'));
  return allElements.filter(el => {
    const style = window.getComputedStyle(el);
    return style.backgroundImage.includes('url(') || 
           style.backgroundImage.includes('radial');
  }).map(el => ({
    class: el.className,
    bgImage: window.getComputedStyle(el).backgroundImage,
    bgSize: window.getComputedStyle(el).backgroundSize,
    bgPosition: window.getComputedStyle(el).backgroundPosition
  }));
}
```

**What I Found**:
- Pattern background: `url("https://wplaunchify.com/wp-content/uploads/2021/04/5.png")`
- Applied to: `.gb-container-976f3e68` (logo section container)
- Background size: `cover`
- Background position: `50% 50%` (center center)
- Base color: `rgb(229, 91, 16)` with pattern overlay

**Pro Tip**: Always search for:
- `radial-gradient` (dotted patterns, subtle textures)
- `linear-gradient` (color transitions)
- `url()` (image patterns, SVGs)
- Pseudo-elements `::before` and `::after`

---

### Phase 6: Spacing & Dimensions

**Critical Measurements Needed**:
1. Section padding (top, bottom, left, right)
2. Element margins
3. Container max-widths
4. Button padding
5. Gap between flex/grid items

**Method**:
```javascript
() => {
  const measurements = {};
  
  // Top bar
  const topBar = document.querySelector('.site-header-row-container-inner');
  measurements.topBar = {
    height: topBar.offsetHeight, // 76px
    padding: window.getComputedStyle(topBar).padding
  };
  
  // Main header
  const header = document.querySelector('.site-main-header-inner-wrap');
  measurements.header = {
    height: header.offsetHeight, // 80px
    gridGap: window.getComputedStyle(header).gap
  };
  
  // H1 spacing
  const h1 = document.querySelector('h1');
  measurements.h1 = {
    marginBottom: window.getComputedStyle(h1).marginBottom // 22.5px
  };
  
  // Logo grid
  const logoGrid = document.querySelector('.gb-grid-wrapper-1bf8c6a6');
  measurements.logoGrid = {
    gap: window.getComputedStyle(logoGrid).gap, // Should show gap
    maxWidth: logoGrid.offsetWidth // 900px
  };
  
  // CTA button
  const ctaButton = document.querySelector('a[href*="calendly"]');
  measurements.ctaButton = {
    padding: window.getComputedStyle(ctaButton).padding, // 8.64px 21.6px
    borderRadius: window.getComputedStyle(ctaButton).borderRadius // 5px
  };
  
  return measurements;
}
```

**What I Found**:
- Top bar: 76px height, centered content
- Main header: 80px height, grid layout
- H1 margin-bottom: 22.5px
- Logo grid gap: 30px
- Logo section padding: 80px top, 100px bottom
- CTA button padding: `8.64px 21.6px`
- CTA button border-radius: `5px`
- Container max-width: 1200px

---

### Phase 7: Navigation Structure Deep Dive

**Challenge**: Understanding the exact navigation layout and button placement.

**Method**:
```javascript
() => {
  // Get header rows
  const headerRows = document.querySelectorAll('[class*="header-row"]');
  
  return Array.from(headerRows).map(row => {
    const style = window.getComputedStyle(row);
    const children = Array.from(row.children).map(child => ({
      class: child.className,
      text: child.textContent.trim().substring(0, 50)
    }));
    
    return {
      class: row.className,
      height: row.offsetHeight,
      display: style.display,
      gridTemplateColumns: style.gridTemplateColumns,
      children
    };
  });
}
```

**What I Found**:
- Main header row uses CSS Grid: `grid-template-columns: 227.164px 746.836px`
- Left section: Logo only
- Right section: Contains both "Book FREE Call" button AND navigation menu
- Right section uses: `display: flex`, `justify-content: flex-end`
- "Book FREE Call" appears BEFORE the nav menu in the flow

**Critical Structure**:
```

  
 (grid)
    
 (flex)
      
    
    
 (flex, justify-end)
      Book FREE Call
      
    
  

```

---

### Phase 8: Button & Interactive Element Details

**Method**:
```javascript
() => {
  const buttons = Array.from(document.querySelectorAll('header a, header button'));
  const bookCallBtn = buttons.find(btn => 
    btn.textContent.includes('Book') && btn.textContent.includes('FREE')
  );
  
  const style = window.getComputedStyle(bookCallBtn);
  
  return {
    text: bookCallBtn.textContent.trim(),
    href: bookCallBtn.href,
    bg: style.backgroundColor,
    color: style.color,
    fontSize: style.fontSize,
    fontWeight: style.fontWeight,
    padding: style.padding,
    borderRadius: style.borderRadius,
    display: style.display
  };
}
```

**What I Found**:
- Header CTA: `12.8px` font-size, `3.84px 8.96px` padding, `3px` border-radius
- Main CTA: `21.6px` font-size, `8.64px 21.6px` padding, `5px` border-radius
- Both use same background: `rgb(229, 91, 16)`
- Both use same color: `rgb(255, 255, 255)`
- Display: `inline-block` for header, `inline-flex` for main CTA

---

## Key Lessons & Discoveries

### 1. **Font Loading is Critical**
The exact Google Fonts URL matters:
- Wrong: `Montserrat:400,700` (loads specific weights)
- Right: `Montserrat:regular,700` (matches live site exactly)

### 2. **Hidden Structure Layers**
Don't assume the visual structure matches the DOM:
- WPLaunchify has 2 header rows, not 1
- The orange bar is INSIDE the header, not separate
- SVG shapes are positioned absolutely in a wrapper

### 3. **CSS Grid vs Flexbox**
Know which layout system is used:
- Header: CSS Grid (`grid-template-columns: 227px 746px`)
- Logo grid: Flexbox (`flex-wrap: wrap`, `justify-content: center`)
- Navigation: Flexbox (`display: flex`)

### 4. **Decimal Precision Matters**
Live sites use fractional pixels:
- Padding: `8.64px 21.6px` (not `9px 22px`)
- Font size: `12.8px` (not `13px`)
- Line height: `25.6px` (not `26px`)
These come from responsive calculations or design systems.

### 5. **Color Consistency**
Track brand colors across the site:
- Orange: `rgb(229, 91, 16)` - buttons, links, accents
- Dark blue: `rgb(11, 50, 142)` - CTA band
- Light background: `rgb(247, 250, 252)` - hero section
- Dark text: `rgb(45, 55, 72)` - headings

### 6. **SVG Waves Technique**
The curved divider is created with:
- Two identical SVG paths
- Top one flipped: `transform: scaleY(-1)`
- Different fill colors matching adjacent sections
- `preserveAspectRatio="none"` for responsive scaling

### 7. **Background Patterns**
Subtle textures are often:
- PNG images with transparency
- Applied with `background-size: cover`
- Layered over solid colors
- May not be visible in screenshots

---

## Tools & Methods Summary

### Essential Chrome DevTools Functions

1. **`window.getComputedStyle(element)`** - Get final computed CSS values
2. **`element.offsetHeight/offsetWidth`** - Get actual rendered dimensions
3. **`element.offsetTop/offsetLeft`** - Get position relative to parent
4. **`document.querySelectorAll(selector)`** - Find elements by CSS selector
5. **`element.closest(selector)`** - Walk up DOM to find parent
6. **`element.parentElement`** - Get immediate parent
7. **`element.children`** - Get direct children
8. **`window.getComputedStyle(el, '::before')`** - Check pseudo-elements

### Inspection Patterns

**Pattern 1: Walk Up the Tree**
```javascript
let current = targetElement;
for (let i = 0; i < 10; i++) {
  current = current.parentElement;
  // Inspect each level
}
```

**Pattern 2: Search by Content**
```javascript
const allElements = Array.from(document.querySelectorAll('*'));
const found = allElements.find(el => 
  el.textContent.includes('Search Text') && 
  el.children.length < 3
);
```

**Pattern 3: Filter by Style**
```javascript
const patterned = allElements.filter(el => {
  const style = window.getComputedStyle(el);
  return style.backgroundImage.includes('url(');
});
```

**Pattern 4: Map Structure**
```javascript
const structure = Array.from(parent.children).map(child => ({
  tag: child.tagName,
  class: child.className,
  styles: window.getComputedStyle(child)
}));
```

---

## Common Pitfalls & Solutions

### Pitfall 1: Missing Duplicate Elements
**Problem**: WPLaunchify has duplicate header rows for mobile/desktop.  
**Solution**: Check `display` property and `offsetHeight` - hidden elements have height 0.

### Pitfall 2: Assuming Font Weights
**Problem**: Font looks "bold" but isn't weight 700.  
**Solution**: Always check `window.getComputedStyle(el).fontWeight` - could be 600, 500, or even 400 with font-weight-specific rendering.

### Pitfall 3: Missing SVGs
**Problem**: SVGs can be small, transparent, or positioned off-screen.  
**Solution**: Search for ALL `