How to Analyze Visual Consistency Across a Multi-Page Website

A website feels professional when every page looks like it belongs to the same family. Over time, though, sites drift: a new page uses a slightly different blue, a landing page brings its own fonts, buttons come in five sizes. A consistency audit finds the drift so you can fix it.

1. Pick the pages

Choose one example of each page type: home, a listing, a detail page, an article, a form, a landing page, the checkout or contact page, and any page built by a different team or tool. Ten to fifteen pages usually show the patterns.

2. Check typography

On each page, click the headings, body text, buttons, captions and links with Font Detector. It shows the font family, size, weight, style, line height and color. Note:

• How many font families appear across the site.
• Whether each heading level uses the same size and weight everywhere.
• Whether body text is the same size and line height on all pages.

3. Check color

Color Palette Extractor lists the 20 most-used colors on a page. Compare the lists across pages. Several near-identical blues or greys usually mean colors were picked by eye rather than from a shared set.

4. Use CSS Overview

Chrome DevTools has a CSS Overview panel (three-dot menu → More tools). It lists every color, font and media query a page uses, with counts. A page with 40 text colors or a dozen font sizes is a sign of drift.

5. Compare components

Take screenshots of buttons, forms, cards, navigation and footers from each page and put them side by side. Look for:

• Different button shapes, sizes or colors for the same action.
• Form fields styled differently on different pages.
• Cards with varying corner radius, shadows or spacing.
• Navigation that changes between sections.

6. Check spacing

Inspect the gaps between sections and elements. Consistent sites use a small set of spacing values, often multiples of 4 or 8 pixels.

7. Score and prioritize

Make a simple sheet: one row per page, columns for fonts, colors, buttons, forms and spacing, marked consistent or not. Fix the problems that appear on the most-visited pages first.

Prevent future drift

Define shared values once, as design tokens or CSS variables, and build pages from shared components. See design tokens and reverse-engineering a design system.