# Fidel

> Fidel is an automated design validation tool that compares live web pages to Figma designs. It detects mismatches in spacing, typography, color, border-radius, and layout in seconds. Available as a web app, Chrome extension, and GitHub Action for CI.

Fidel is for frontend developers, QA engineers, product designers, and design system teams shipping web UI.

## What it does

- Compares a live URL (staging, localhost, or production) against a Figma frame
- Reads your Figma design and live page directly — no screenshot comparison, so results are more accurate and specific
- Matches 28 CSS properties per element: spacing, typography, color, border-radius, dimensions, layout direction, and more
- Produces a match score (0–100) and a severity-ranked list of issues (Critical/High/Medium)
- Web app generates shareable report links — no login required to view
- GitHub Action posts issues directly to the PR with expected vs actual values
- Chrome extension validates any page in your browser
- Results exportable as Markdown, JSON, or shareable links

## Who it's for

- Frontend developers validating UI before merge
- QA engineers checking design fidelity before release
- Product designers getting objective validation instead of subjective sign-offs
- Design system teams catching token and property drift

## Common use cases

- Comparing staging URLs against Figma before merging a PR
- Running a design QA check before a release
- Validating that a new component matches the design spec
- Checking whether a redesign was implemented correctly
- Sharing validation reports with designers and stakeholders

## How it's different

Unlike visual regression tools (Percy, Chromatic, BackstopJS) that compare against a previous baseline, Fidel compares against the Figma design — the source of truth. It reports expected vs actual values per property, not just "something changed." No baseline to set up, no test suite to maintain, no selectors to write. Useful from your very first deployment.

## Performance

- Median validation time: 3.4 seconds (57% of runs complete in under 5 seconds)
- Compares 28 CSS properties per element
- Perceptual color comparison using CIEDE2000 (not RGB euclidean distance)
- Based on internal benchmarks across 22 production page validations, March 2026

## Main

- [Fidel landing page](https://usefidel.com/): Product overview and primary entry point.
- [Get Early Access](https://usefidel.com/?utm_source=llms&utm_medium=referral&utm_campaign=ai_discovery): Sign up for early access.
- [Web App](https://app.usefidel.com/): Paste a Figma URL and live URL, get a shareable validation report.
- [Privacy Policy](https://usefidel.com/privacy): How Fidel handles your data.
- [Terms of Service](https://usefidel.com/terms): Terms and conditions.

## Comparisons

- [Fidel vs Percy](https://usefidel.com/vs/percy/): How Fidel differs from Percy visual regression testing.
- [Fidel vs Chromatic](https://usefidel.com/vs/chromatic/): How Fidel differs from Chromatic visual testing.
- [Fidel vs Manual Review](https://usefidel.com/vs/manual-review/): How Fidel replaces manual design QA.
- [Fidel vs Hypermatic](https://usefidel.com/vs/hypermatic/): How Fidel differs from Hypermatic.

## Contact

- [Email](mailto:team@usefidel.com): Product questions and partnerships.