How to Inspect a Website's Design System

Every website is built on an underlying design system — a consistent set of typography, colors, spacing values, and reusable UI components — even if that system was never formally documented. Inspecting it means identifying those underlying patterns instead of guessing at them from a screenshot.

What Design X-Ray does

Design X-Ray is a Chrome extension for inspecting and exporting the visual design system of a website. Point it at any webpage and it analyzes typography (font families, sizes, weights, line heights), color palettes and theme colors, spacing and layout patterns, and common UI components — buttons, cards, forms, inputs, navigation, tabs, modals, and tables. It also extracts CSS variables and design tokens already defined on the page, detects responsive breakpoints and dark mode support, and flags accessibility issues such as color contrast problems, missing alt text, and incorrect heading hierarchy.

How it works

1. Install Design X-Ray and open the website you want to inspect.
2. Run a scan — Design X-Ray analyzes the page's typography, colors, spacing, and components automatically.
3. Review the results in the design insights dashboard, which scores design consistency, design system maturity, theming, and accessibility.
4. Export what you need — as JSON, Tailwind CSS, CSS Variables, SCSS, Styled Components, shadcn/ui, or as an AI coding prompt for tools like Cursor or Claude.

When this matters

Inspecting a design system is useful before a redesign, when documenting an existing product's UI for a design system library, during a competitive or inspiration audit, or when rebuilding a reference site's look in code. Instead of manually opening DevTools for every element, Design X-Ray produces a structured overview in one pass.