# Impeccable vs Fudge for website design feedback

[Open the live Fudge conversation](https://design.withfudge.com/share/impeccable-vs-fudge)

Last updated: 2026-08-04

Use **Fudge** when you have a website and want to decide what to improve. Use **Impeccable** when you are working in the codebase and want an agent to design, edit, or check the interface.

There is real overlap. Both can critique an interface, work with coding agents, and help establish a design direction. The useful distinction is where each one starts and what it gives you next.

| | Fudge | Impeccable |
| --- | --- | --- |
| Starts with | A public URL, screenshot, or idea | A codebase or running development site |
| Main job | Reviews the website, compares it with relevant sites, and helps you decide what to change | Gives a coding agent design commands, source-editing workflows, and checks for common interface problems |
| Website references | Searches real websites and brings the selected examples into the conversation | Can inspect a page and use the project files and design documents already available to the agent |
| Result | A scored review, visual evidence, references, and an implementation prompt | Code changes, interface variants, and deterministic checks inside the development workflow |
| Design foundation | Helps you work out a direction from references, then can create a project design guide | Can create `PRODUCT.md` and `DESIGN.md` files for the project |
| After changes | Rechecks the live website and compares it with the earlier review | Runs its critique, audit, and detector checks against the changed interface |
| Price | Free review, then Pro at $29/month or Studio at $99/month | The core project is open source under Apache 2.0; its site also describes additional Pro material |

If the question is “What is wrong with this page, and what should it look like instead?”, start in Fudge. If the question is “Can my coding agent make this interface better?”, start in Impeccable. A practical workflow is to review the live site in Fudge, take the implementation prompt into Impeccable or another coding agent, then bring the updated URL back to Fudge for a recheck.

## What that looks like in Fudge

Here is a review of [mectrics.app](https://mectrics.app), a landing page for a macOS menu-bar system monitor. The desktop capture shows the whole page. I also checked the live page at a 390-pixel mobile viewport before scoring the mobile experience.

```fudge-website-review
{"schemaVersion":1,"reviewKind":"initial","state":"complete","target":{"submittedUrl":"https://mectrics.app/","finalUrl":"https://mectrics.app/","canonicalOrigin":"https://mectrics.app"},"score":8,"scoreTitle":"Clear, distinctive, and close to excellent","explanation":"The page makes the product easy to understand and gives the real interface a central role. Its strongest weaknesses are local: two low-contrast text styles, an uneven first feature layout, limited trust beside the download, and a repeated section composition.","categories":[{"id":"purpose_clarity","score":9,"summary":"The headline, product description, download action, and interface screenshots explain the product immediately.","findingIds":["download-trust"]},{"id":"visual_hierarchy","score":8,"summary":"The hero and product images carry the page well, although the first feature column is noticeably tighter than the sections around it.","findingIds":["feature-column","repeated-composition"]},{"id":"readability_accessibility","score":7,"summary":"Primary text is highly legible, but the pink eyebrow and muted section copy miss small-text contrast requirements.","findingIds":["eyebrow-contrast","body-contrast"]},{"id":"consistency_polish","score":8,"summary":"Typography, color, and product imagery feel cohesive; the two major feature sections repeat too much of the same arrangement.","findingIds":["repeated-composition"]},{"id":"mobile_experience","score":9,"summary":"At 390 pixels wide, the product, main action, and supporting trust copy fit comfortably in the first screen and remain easy to scan.","findingIds":[]}],"strongest":{"title":"The page shows the product instead of asking visitors to imagine it","summary":"The menu-bar preview, settings screen, and detailed popovers make an unfamiliar utility understandable before the visitor has to read much copy.","evidenceIds":["desktop-product-proof","mobile-opening"]},"findings":[{"id":"eyebrow-contrast","number":1,"priority":"high","title":"Darken the pink eyebrow text","preview":"The repeated pink label measures 3.00:1 against the warm section background, which is too light for text at this size.","detailAccess":"included","evidenceMappingIds":["map-eyebrow-contrast"],"referencePinIds":["4489"]},{"id":"body-contrast","number":2,"priority":"high","title":"Darken the muted section copy","preview":"The muted paragraph color measures 4.25:1 against its background, narrowly missing the 4.5:1 AA requirement for normal text.","detailAccess":"included","evidenceMappingIds":["map-body-contrast"],"referencePinIds":["4489"]},{"id":"feature-column","number":3,"priority":"medium","title":"Give the first feature copy more room","preview":"The first feature headline breaks across three short lines while the product image has considerably more horizontal space.","detailAccess":"included","evidenceMappingIds":["map-feature-column"],"referencePinIds":["5622","8813"]},{"id":"download-trust","number":4,"priority":"medium","title":"Put verifiable trust beside the download","preview":"The page says the app is free, open source, and private, but the main action would be stronger with a concise safety or provenance detail beside it.","detailAccess":"included","evidenceMappingIds":["map-download-trust"],"referencePinIds":["4674"]},{"id":"repeated-composition","number":5,"priority":"low","title":"Vary the second feature section","preview":"Both major feature sections use large copy beside a dominant product image, so the page loses momentum as the same composition repeats.","detailAccess":"included","evidenceMappingIds":["map-repeated-composition"],"referencePinIds":["5622","8813"]}],"foundation":{"decision":"page_changes_first","title":"Keep the design system and fix the page","explanation":"The typography, palette, image treatment, spacing rhythm, and mobile behavior already form a coherent design foundation. These findings can be handled as focused page changes without replacing that system.","findingIds":["eyebrow-contrast","body-contrast","feature-column","download-trust","repeated-composition"],"affectedAreas":["color","spacing_layout","accessibility_interaction"]}}
```

```fudge-review-map
{"schemaVersion":1,"frames":[{"frameId":"mectrics-desktop-home","inspectionId":"mectrics-review-desktop-2026-07-31","pageUrl":"https://mectrics.app/","pageTitle":"Mectrics","viewport":"desktop","screenshotUrl":"https://api.withfudge.com/v1/shares/4a3b24bc-699b-4d3f-a6a3-8e01a1ff6cd9/attachments/1.jpg","screenshotWidth":1440,"screenshotHeight":3211,"completeness":"complete","markers":[{"findingId":"eyebrow-contrast","findingNumber":1,"findingTitle":"Darken the pink eyebrow text","mappingId":"map-eyebrow-contrast","region":{"x":1400,"y":5640,"width":1700,"height":380,"scale":10000}},{"findingId":"body-contrast","findingNumber":2,"findingTitle":"Darken the muted section copy","mappingId":"map-body-contrast","region":{"x":1400,"y":4020,"width":3000,"height":720,"scale":10000}},{"findingId":"feature-column","findingNumber":3,"findingTitle":"Give the first feature copy more room","mappingId":"map-feature-column","region":{"x":1300,"y":3380,"width":3100,"height":1900,"scale":10000}},{"findingId":"download-trust","findingNumber":4,"findingTitle":"Put verifiable trust beside the download","mappingId":"map-download-trust","region":{"x":3550,"y":1060,"width":2900,"height":620,"scale":10000}},{"findingId":"repeated-composition","findingNumber":5,"findingTitle":"Vary the second feature section","mappingId":"map-repeated-composition","region":{"x":1100,"y":5550,"width":7800,"height":3500,"scale":10000}}]}]}
```

```fudge-finding-evidence
{"schemaVersion":1,"findingId":"eyebrow-contrast","findingNumber":1,"crops":[{"mappingId":"map-eyebrow-contrast","screenshotUrl":"https://api.withfudge.com/v1/shares/4a3b24bc-699b-4d3f-a6a3-8e01a1ff6cd9/attachments/1.jpg","sourceWidth":1440,"sourceHeight":3211,"crop":{"x":900,"y":5300,"width":5000,"height":1600,"scale":10000},"alt":"Pink Click for more label above the second feature heading","caption":"The small pink eyebrow is used repeatedly. At 3.00:1 against the warm background, it needs a darker color to remain readable."}]}
```

```fudge-finding-evidence
{"schemaVersion":1,"findingId":"body-contrast","findingNumber":2,"crops":[{"mappingId":"map-body-contrast","screenshotUrl":"https://api.withfudge.com/v1/shares/4a3b24bc-699b-4d3f-a6a3-8e01a1ff6cd9/attachments/1.jpg","sourceWidth":1440,"sourceHeight":3211,"crop":{"x":900,"y":3500,"width":5000,"height":2200,"scale":10000},"alt":"First feature heading and muted supporting paragraph","caption":"The supporting paragraph is readable at a glance but measures 4.25:1 against the section background, just below AA for normal text."}]}
```

```fudge-finding-evidence
{"schemaVersion":1,"findingId":"feature-column","findingNumber":3,"crops":[{"mappingId":"map-feature-column","screenshotUrl":"https://api.withfudge.com/v1/shares/4a3b24bc-699b-4d3f-a6a3-8e01a1ff6cd9/attachments/1.jpg","sourceWidth":1440,"sourceHeight":3211,"crop":{"x":800,"y":3000,"width":8200,"height":2800,"scale":10000},"alt":"First feature section with a narrow copy column and large settings screenshot","caption":"The headline is forced into three short lines while the screenshots occupy most of the row. A modestly wider copy column would make the section easier to scan."}]}
```

```fudge-finding-evidence
{"schemaVersion":1,"findingId":"download-trust","findingNumber":4,"crops":[{"mappingId":"map-download-trust","screenshotUrl":"https://api.withfudge.com/v1/shares/4a3b24bc-699b-4d3f-a6a3-8e01a1ff6cd9/attachments/1.jpg","sourceWidth":1440,"sourceHeight":3211,"crop":{"x":2300,"y":500,"width":5400,"height":2100,"scale":10000},"alt":"Mectrics hero with the macOS download action and supporting claims","caption":"The hero makes the download easy to find. A verifiable detail such as notarization, code signing, or a direct source link would give cautious visitors stronger reassurance at the decision point."}]}
```

```fudge-finding-evidence
{"schemaVersion":1,"findingId":"repeated-composition","findingNumber":5,"crops":[{"mappingId":"map-repeated-composition","screenshotUrl":"https://api.withfudge.com/v1/shares/4a3b24bc-699b-4d3f-a6a3-8e01a1ff6cd9/attachments/1.jpg","sourceWidth":1440,"sourceHeight":3211,"crop":{"x":700,"y":5150,"width":8600,"height":4300,"scale":10000},"alt":"Second large feature section with heading, supporting copy, and product screenshots","caption":"The second feature section repeats the same large-copy-plus-screenshot rhythm. Changing the image scale or giving the two product views separate explanations would make the page develop as the visitor scrolls."}]}
```

## Why the score is 8 out of 10

The page does the difficult work well. It has a clear product, a memorable visual character, real interface evidence, and a strong mobile opening. The remaining problems are specific enough to fix without redesigning the site.

The two accessibility problems are the most objective. The pink `#f43b5d` eyebrow on `#ebe6df` measures 3.00:1. The muted `#706b66` body copy on the same background measures 4.25:1. Darkening those colors to roughly `#c52245` and `#6b6661` raises both above 4.5:1 while keeping the existing palette intact.

## References for the changes

## Foundation decision

Keep the current design system. The typography, warm neutral palette, product imagery, and mobile behavior already belong together. A new design guide would slow this work down. Make the five page changes first, then recheck the result.

## First change

Fix the repeated low-contrast text styles. One color-token change improves every eyebrow and section paragraph before any layout work begins.

## Implementation prompt

```text
Improve the existing Mectrics landing page without redesigning it.

Preserve the current typography, warm neutral palette, product screenshots, rounded controls, and overall section order.

1. Change the pink eyebrow color from #f43b5d to #c52245, or another nearby color that reaches at least 4.5:1 against #ebe6df.
2. Change muted section copy from #706b66 to #6b6661, or another nearby color that reaches at least 4.5:1 against #ebe6df.
3. Widen the first feature copy column enough for “Make the menu bar yours.” to read in two balanced lines on desktop. Keep the product screenshots dominant.
4. Add one concise, verifiable trust detail beside or directly below the macOS download action. Use a fact the project can prove, such as notarization, code signing, or the public source repository.
5. Give the “The detail behind the number.” section a different rhythm from the section above. Keep both product images, but separate their explanations or change their scale so the section does not repeat the same composition.

Keep the existing mobile opening intact. Check both desktop and 390-pixel mobile layouts after the changes, and verify normal text contrast against the final backgrounds.
```

Impeccable’s [design workflow](https://impeccable.style/designing/) can help a coding agent carry out and check those changes in the project. Fudge’s role is to establish the outside view: what the live page communicates, which changes matter, what comparable sites can teach you, and whether the result improved when it is published.

If this review covers your website and something is wrong, outdated, or should be removed, email [simdi@withfudge.com](mailto:simdi@withfudge.com).

## Captured pages

[![Raycast - Your shortcut to everything](https://pin.fontofweb.com/4674?format=jpg)](https://design.withfudge.com/share/pin-4674)

[Raycast - Your shortcut to everything](https://design.withfudge.com/share/pin-4674)

[![boringBar - Taskbar Dock Replacement for macOS](https://pin.fontofweb.com/8813?format=jpg)](https://design.withfudge.com/share/pin-8813)

[boringBar - Taskbar Dock Replacement for macOS](https://design.withfudge.com/share/pin-8813)

[![Monocle for macOS - Noise-cancelling for your screen](https://pin.fontofweb.com/5622?format=jpg)](https://design.withfudge.com/share/pin-5622)

[Monocle for macOS - Noise-cancelling for your screen](https://design.withfudge.com/share/pin-5622)

[![Welcome to Cosmos](https://pin.fontofweb.com/4489?format=jpg)](https://design.withfudge.com/share/pin-4489)

[Welcome to Cosmos](https://design.withfudge.com/share/pin-4489)