How to Audit a Competitor's Design System in Under Five Minutes
What a design audit is for, and what it's not
Doing a design audit on a competitor is standard practice in product development, but I see teams misunderstand its purpose all the time.
The real goal of an audit is benchmarking, education, and inspiration. You audit a market leader to see how they build a typographic hierarchy that feels readable, or how they handle spacing to make a dense dashboard look clean. It gives you a structural baseline for your own decisions.
An audit is not an excuse to copy. Ripping off brand assets, ignoring trademarks, or straight-up cloning a competitor's primary brand color is unethical and often illegal. You want to reverse-engineer the mechanics of their design system, not steal their identity. To see how these mechanics work under the hood, read what DESIGN.md is.
The five-minute workflow
It used to take hours of digging through DevTools to do a proper design audit. Today, you can automate the whole thing in under five minutes.
Step 1 is the easiest part: grab the competitor's URL and paste it into designmd.run. The tool will fetch the page and start parsing their stylesheets and component structures in the background.
Step 2 is checking the result card. Keep a close eye on the confidence score and lint status. A high confidence score means the data you're looking at actually reflects the live site, rather than just some hallucination from a confused parser.
Step 3 is the visual scan. Before you even download anything, scan the extracted palette, typography, and core components right in your browser. This gives you an immediate, high-level sense of their constraints.
Step 4 is securing the data. Download the DESIGN.md file. Now you have a permanent, offline record of the audit to keep in your team's docs.
Step 5 is where the real work happens: synthesis. Open the file and drop your findings into your team's audit document. Compare their numbers against your own. If you want a deeper look at different ways to do this, check out our guide on how to extract a design system from a website.
What to look for
When you open that extracted DESIGN.md file, focus on four key areas.
First, check their palette discipline. Count the total number of colors. The best systems—like the Stripe design system—are incredibly disciplined. They usually stick to a tight set of grays and just one vivid primary color. Look at how they handle contrast for primary text against different surfaces.
Second, look at the type system. Don't just check the font family; look at the exact pixel values of their type scale and their body line height. That's usually the secret to their readability.
Third, check their spacing rhythm. See if they use a strict 4pt or 8pt grid, and measure the padding inside their main cards. Finally, look at component restraint. Notice how few button variants they actually ship to production.
How to present audit findings
How you present this data matters just as much as how you extracted it.
From what I've seen, the best format is a simple two-column "their system / our system" layout. Put their extracted spacing scale right next to yours. This instantly shows exactly why your product feels cramped compared to theirs.
Focus the conversation on alignment and divergence. Call out where you agree (like, "we both use a strict 8pt grid") and where you intentionally diverge ("they use heavy shadows; we use flat borders for a faster feel"). This frames the audit as a strategic tool, not an instruction manual to copy them. Want to see this in action? Take a look at the Linear design system breakdown.
Ethical guardrails
As you bring rapid audits into your workflow, you need to set some clear ground rules for your team.
Make it clear that the extracted DESIGN.md file is for structural benchmarking, not 1:1 copying. When you present insights from the file, always link to the source URL so the team knows exactly where the inspiration came from. Most importantly, respect trademarks. If you find a highly custom component in a competitor's system, learn from how they handled the padding and typography, but design your own unique interface. You can see more examples of ethical audits in our gallery.
Frequently asked questions
Is extracting a competitor's design system legal?
Yes. Extracting public, front-end CSS values (like colors, spacing, and font sizes) for internal benchmarking is completely legal and standard practice. Copying their brand identity or assets is not.
How accurate is the extracted data?
It depends on your tool. Using designmd.run gives you a confidence score, so you know the data you're auditing accurately matches the live CSS.
Can I use the extracted DESIGN.md file directly in my codebase?
Don't do this. The file contains their specific brand colors and typography. Use it as an educational reference, then build your own.
Get Started
Run your first audit in 3 minutes — paste any URL. Head to the designmd.run homepage to start your extraction.