How do I scan a design system?

Paste a public GitHub repository URL above. Buoy clones it, finds its design tokens and components, and lists the hardcoded colors, spacing and font sizes that bypass them, with a 0–100 design health score and the changes that would raise it. For a private repository, run `npx @buoy-design/cli show health` in a checkout.

What does the scan check?

Hardcoded design values (colors, spacing, font sizes, radii, shadows) in React, Vue, Svelte, Angular, Tailwind, CSS and Sass; whether a token system exists and its tokens are used; naming conflicts; and color contrast between text and background on the same element.

What does it leave alone?

Icons and logos, email templates, Open Graph images, tests and stories, example and demo apps, layout math such as calc() and 100dvh, 1px hairlines, and values the code marks as deliberate with a comment or a 2–3px optical nudge.

Is it free, and what happens to my code?

It is free. Only public GitHub repositories are scanned here: Buoy clones the default branch, runs the open-source CLI, keeps the report and deletes the checkout. Reports are cached for a day.

How long does a scan take?

Usually under a minute. The 20 codebases on the reports page took about half a minute each at the median; very large monorepos take a few minutes.

How do I keep drift from coming back?

Install the Buoy GitHub App to get the same checks on every pull request, limited to lines the PR adds and with a committable fix when a token exists, or run `npx @buoy-design/cli drift check --staged` before each commit.

Scan a design system from a GitHub URL

Find the hardcoded colors, spacing and font sizes that bypass the design system, get a design health score, and see exactly what it would take to reach 100. Free, for any public repository.

Try formbricks/formbricks, twentyhq/twenty, calcom/cal.com, shadcn-ui/ui

What it finds

Literal colors, spacing, font sizes, radii and shadows where a token belongs, in React, Vue, Svelte, Angular, Tailwind, CSS and Sass, each with the existing token to use when there is one.

What it leaves alone

Icons, email templates, tests, demo apps, layout math, and values the code marks as deliberate with a comment. A scan that flags correct code gets ignored.

What you get

A 0–100 design health score, the most repeated literals, the worst files, and the path to 100: every point missing and the change that earns it.

Scanned so far

20 well-known open-source codebases, 35,458 components: median design health 90/100, 2,685 hardcoded-value findings, and 307 values left alone as deliberate. See every report.

Private repository?

Run the same scan locally. Nothing leaves your machine.

npx @buoy-design/cli show health

Frequently asked questions

How do I scan a design system?: Paste a public GitHub repository URL above. Buoy clones it, finds its design tokens and components, and lists the hardcoded colors, spacing and font sizes that bypass them, with a 0–100 design health score and the changes that would raise it. For a private repository, run `npx @buoy-design/cli show health` in a checkout.
What does the scan check?: Hardcoded design values (colors, spacing, font sizes, radii, shadows) in React, Vue, Svelte, Angular, Tailwind, CSS and Sass; whether a token system exists and its tokens are used; naming conflicts; and color contrast between text and background on the same element.
What does it leave alone?: Icons and logos, email templates, Open Graph images, tests and stories, example and demo apps, layout math such as calc() and 100dvh, 1px hairlines, and values the code marks as deliberate with a comment or a 2–3px optical nudge.
Is it free, and what happens to my code?: It is free. Only public GitHub repositories are scanned here: Buoy clones the default branch, runs the open-source CLI, keeps the report and deletes the checkout. Reports are cached for a day.
How long does a scan take?: Usually under a minute. The 20 codebases on the reports page took about half a minute each at the median; very large monorepos take a few minutes.
How do I keep drift from coming back?: Install the Buoy GitHub App to get the same checks on every pull request, limited to lines the PR adds and with a committable fix when a token exists, or run `npx @buoy-design/cli drift check --staged` before each commit.

Guides: how to audit a design system · find hardcoded colors and spacing · what is design drift