How to Inspect Website UI Before Creating a Redesign Brief
Quick Answer
- Before a redesign, inspect the current site's typography, colors, spacing, layout, buttons, cards, forms and repeated components.
- Record what is actually rendered in the browser instead of relying only on old design files or screenshots.
- Separate real inconsistencies from intentional variations. A pricing card and a blog card do not need identical styling.
- Use a whole-site style report first, then inspect individual elements where you need exact computed values.
- Your redesign brief should explain what to keep, standardize, simplify and change—not just say the site feels outdated.
- Use CSSPeek to inspect selectors, spacing, typography, colors and layout directly on the live page.
A redesign brief is much stronger when it begins with evidence. Instead of writing “the website needs cleaner spacing” or “the typography feels inconsistent,” you should be able to show exactly where the inconsistency exists and what the browser is actually rendering.
Table of contents
Why Inspect the Existing UI Before Redesigning It?
Redesign projects often begin too quickly with inspiration boards, new fonts and fresh color palettes.
The problem is that you can accidentally redesign things that were already working while missing the inconsistencies that actually create friction.
A short UI inspection gives you a baseline:
• Which fonts and sizes are really being used?
• Are spacing values consistent across similar components?
• How many button styles exist?
• Which colors repeat across the interface?
• Are cards using the same radius and shadow logic?
• Which exceptions are intentional and which look accidental?
Step 1: Create a Website Style Report
Do not start by clicking random elements. First get a broad picture of the site's visual system.
CSSPeek's Site Style Report can analyze a public URL and surface recurring design values such as:
Foregrounds, backgrounds, borders, fills and strokes.
Font families used across the site's stylesheets.
Repeated padding, margin and gap values.
Border radii and box-shadow patterns.
This gives you the vocabulary of the existing design before you judge it. A site using 4px, 8px, 16px and 24px spacing repeatedly may already have a usable spacing scale. A site using 11px, 13px, 17px, 22px and 29px without a clear pattern may need consolidation.
Important: a URL-based style report may not capture every runtime style. JavaScript-injected CSS, some CSS-in-JS output and shadow-DOM styling can be missed. Use the report as the broad audit, then inspect live elements for the exact rendered values.
Step 2: Inspect the Components That Matter
Once you understand the general system, inspect the UI components users actually interact with.
☐ Primary and secondary buttons
☐ Main navigation
☐ Hero heading and body copy
☐ Pricing cards
☐ Forms and input fields
☐ Product or feature cards
☐ Alerts, badges and status components
☐ Footer and secondary navigation
CSSPeek's live inspector shows computed values rather than forcing you to trace the entire cascade first. That is useful in redesign work because your brief normally cares about what the user sees: actual padding, resolved font size, line-height, colors and display behavior.
If you want a deeper walkthrough of that workflow, see how to inspect and copy useful CSS from a website.
Step 3: Audit Typography as a System
Do not list every font size you encounter and call that a typography audit.
Look for roles:
| Role | Check |
|---|---|
| H1 | Size, weight, line-height, max width |
| Section heading | Whether equivalent sections use equivalent styles |
| Body text | Font size, line-height and text color |
| Labels / captions | Whether small text remains readable and consistent |
The CSSPeek typography inspector exposes font family, resolved font size, line-height, weight, letter-spacing, alignment and text styling for the selected element.
Step 4: Record Decisions, Not Just CSS Values
A redesign brief should not become a spreadsheet containing hundreds of CSS properties. Record the values that reveal a pattern or problem.
| Current UI | Finding | Brief Direction |
|---|---|---|
| Buttons use 8px, 10px and 14px radii | Similar CTAs lack one shape rule | Standardize primary/secondary buttons |
| Card gaps vary between 18px and 32px | Layout rhythm changes by section | Define spacing scale |
| Three different muted gray text colors | Secondary text lacks a clear token | Create one or two semantic text colors |
| Pricing card has a unique shadow | Intentional emphasis | Keep distinction; refine rather than remove |
That last row matters. A redesign audit should not automatically standardize everything. Sometimes the exception is doing useful visual work.
Do Not Ignore the Box Model
A page can use good colors and typography and still feel inconsistent because of spacing.
Inspect padding and margin on repeated components. If three feature cards look visually related but use completely different internal spacing, that belongs in the redesign brief.
CSSPeek's box-model view reports content size, padding, borders and margins together, which makes comparison easier than measuring elements from screenshots.
Save the Selector When the Brief Needs to Reach Engineering
“The card below the second heading has too much padding” may be enough during a design discussion. It is not ideal when a developer has to find the exact component later.
For important findings, add the relevant class or selector to the audit.
The selector inspection workflow can expose the element's classes and generate a more stable selector path when needed.
Turn the UI Audit Into a Redesign Brief
Once the audit is finished, organize the brief into four buckets.
Patterns that already work and should survive the redesign.
Inconsistent components that should follow one rule.
Unnecessary visual variants, decoration or spacing complexity.
Patterns that create readability, usability or brand problems.
Example redesign brief entry
Component: Primary CTA
Current: 3 different horizontal paddings and 2 border radii across key pages.
Problem: The same action feels visually inconsistent.
Recommendation: Define one primary button component with shared height, radius and typography.
Keep: Current brand color and clear hover distinction.
Recommended screenshot
Show the same website in two views: CSSPeek Site Style Report on one side and live per-element inspection on the other. Highlight typography, padding, color and border-radius values being transferred into a redesign-audit sheet.
5 Mistakes to Avoid During a Website UI Audit
1. Auditing only the homepage. Pricing, checkout, account and content pages may use completely different patterns.
2. Treating every difference as an error. Some components need intentional visual hierarchy.
3. Copying another site's UI. Competitor research should reveal patterns and ideas, not become a cloning exercise.
4. Looking only at desktop. A redesign brief should note where spacing, typography or layout changes at smaller viewports.
5. Recording values without recommendations. “Padding: 22px” is data. “Three equivalent cards use different padding; standardize them” is a redesign finding.
CSSPeek or DevTools?
Use CSSPeek when you need a fast visual read of the current interface: selector, box model, typography, colors and final computed values.
Use Chrome DevTools when the redesign audit turns into debugging—CSS variables, cascade conflicts, pseudo-states, network-loaded assets or deeper layout behavior.
The two tools are complementary. CSSPeek is useful for the design-audit pass; DevTools remains the stronger environment for implementation debugging. The visual CSS inspection guide explains where each type of tool fits.
Website Redesign Audit Checklist
☐ Extract the site's main color palette.
☐ Identify the typography scale.
☐ Record recurring spacing values.
☐ Compare buttons and form controls.
☐ Compare repeated card components.
☐ Check radii and shadow patterns.
☐ Inspect desktop and mobile states.
☐ Note intentional exceptions separately.
☐ Add selectors for developer-facing issues.
☐ Convert observations into Keep / Standardize / Simplify / Change decisions.
FAQs About Inspecting Website UI
What should I inspect before redesigning a website?
Start with typography, color, spacing, buttons, cards, forms, navigation, borders, shadows and repeated layout patterns. Then identify which patterns should stay and which need standardization or change.
What is a website style report?
A website style report summarizes recurring design values such as colors, font families, spacing, border radii and shadows so you can understand the existing visual system before redesigning it.
Should I copy CSS from another website for a redesign?
Use other sites for research and pattern analysis rather than cloning their visual design. Study individual decisions—spacing, hierarchy, layout or component behavior—then create a system appropriate for your own brand and users.
Can CSSPeek inspect React or JavaScript websites?
The live CSSPeek extension inspects the DOM as it is currently rendered, so it can inspect modern frameworks such as React, Vue and Svelte. A URL-based style report may miss styles that only appear after runtime JavaScript executes.
Is CSSPeek a replacement for Chrome DevTools?
No. CSSPeek is faster for focused visual inspection, while DevTools is better for deep debugging, editing, CSS variables, cascade analysis and implementation work.
Inspect the current UI before replacing it
See the actual spacing, typography, colors, selectors and layout behind the live website, then build your redesign brief from evidence instead of guesswork.
Try CSSPeek Free