Scan reports

A scan report is a snapshot of how much design debt a front-end codebase is carrying: every colour, spacing value and type size written as a literal where a token belongs, every component that exists in more than one version, the accessibility pairs that fail WCAG AA, and a prioritised plan for fixing them.

It comes out of tostada-scan as two files:

The JSON is an open format. You own your report, and the viewer that renders it is part of the open-source app: nothing about reading your own findings is locked behind the commercial engine that produced them.

Opening a report

1. Go to Reports in the top navigation.
2. Drop report.json onto the page, or click to pick it.

The file is read in your browser. It is not uploaded, not stored, and not persisted between visits — close the tab and it is gone. Re-dropping takes a second, which is the trade for a report never touching a server.

What you see

• Overview — the debt score out of 100 (higher is worse), the grade, and a Highlights block: three to five one-line findings with the number behind each one. These are generated from the report, not written by hand, and they are the same lines that appear in report.md.

• Before / After Tostada — only on a re-scan run with --baseline. Shows what moved: colour occurrences, duplicate groups, failing contrast pairs.

• Stack — what the scanner found the repo to be built from. It lists what is there and nothing else; a repo with nothing recognisable gets one sentence saying so rather than a list of absences.

• Hardcoded values — every literal, with a swatch, what it was doing, and what it should become. Expand any row for the exact files and line numbers.

  A colour used in more than one way gets one row per use. #ffffff used twenty-nine times might be twenty-two pieces of text, four borders and three backgrounds — three different recommendations, not one. Each row opens on its own files, so the border row shows you a border.

  The Becomes column names the token to reach for, and hovering it explains why. Where a value sits on a surface the scan could establish, the recommendation is the one that stays legible on that surface — a light border on a dark panel becomes the grey that reads as a border there, not the colour closest to what was written. Where the surface could not be worked out, the row says so instead of guessing.

• Needs human input — under the values, when there is something the design system genuinely cannot absorb: a colour computed at render time, a gradient with too many stops. Each names what it is, why it cannot be taken, and the decision somebody has to make. If nothing needs you, the section is not there.

• Components — what the UI is built from, what the library offers in each one's place, which are anchors (used the most, so a fix propagates furthest), and which exist in several diverged implementations. A component with no library equivalent says so plainly — that is not a failure, it is the row that tells you what the migration actually costs.

• Accessibility (EAA) — failing colour pairs with the measured contrast ratio and the ratio the pair needed, plus flagged markup patterns. Pairs that cannot be measured honestly — a translucent colour, a gradient — are counted and reported as unmeasurable rather than passed or failed.

• Remediation plan — Now / Next / Later, with impact and effort. The Now tier is the proposed first scope.

• Methodology — the thresholds used, and every approximation the scan made.

Click any number to jump to the evidence behind it; press Esc to collapse everything you opened.

Exporting a PDF

Export PDF prints the whole report: every row expanded, every table un-truncated, forced to a light theme, one section per page. It uses your browser's print-to-PDF, so — like everything else here — the report never leaves your machine.

Getting a report

Run it in any React + Tailwind repo:

npx @tostada-ui/scan

The scan runs on your machine and sends the finished report to a one-time link; a free account opens it. Pro shows every finding and the remediation plan, and can export the report.json this page renders.