1. All checks
  2. Production design standards in the rendered UI

Production design standards in the rendered UI

Review token discipline, WCAG AA contrast, hierarchy, spacing rhythm, mobile rules, and component consistency.

medium

Content & schema
50tests fired in this category
modules
8dedicated content & schema checks
every scan
299+tests across all categories

Why it matters

A design system is experienced through repeated details: whether the primary action is clear, whether spacing gives content room to breathe, and whether a control remains usable on a 375 to 390 pixel screen. FixWeb evaluates those details as a system rather than as isolated decoration.

How it works

The crawl records viewport configuration, pinch-zoom behavior, small tap targets, and declared image dimensions. A model reviews screenshot-visible hierarchy, colour and contrast, spacing rhythm, token discipline, mobile composition, and whether buttons, cards, and icons behave like one component system. WCAG AA targets include 4.5:1 for normal text and 3:1 for large text and UI elements, but computed CSS values are not available to a passive crawl.

Site impact

Competing primary actions, cramped targets, weak contrast, layout shift, and inconsistent components make pages harder to scan and operate. Screenshot judgment can identify likely issues, but it does not replace a measured contrast audit across every state or a full device and assistive-technology test.

How FixWeb tests for it

FixWeb renders representative pages at the mobile-oriented viewport, captures the signals and screenshots available to the evaluator, and scores the visible composition plus crawl evidence. It does not simulate every breakpoint, hover or focus state, browser, or user journey, so findings should be confirmed in the actual design system and supported states.

How to improve

Define tokens for colour, type, spacing, and radii and reuse a small set of button, card, and icon variants. Give each page one clear H1 and primary action, preserve a consistent spacing scale, declare image dimensions, and set width=device-width without disabling zoom. Verify 44 by 44 pixel targets, 16 pixel form text where needed, and WCAG AA contrast in real states.

Run it on your own site

Keep improving while FixWeb keeps watch.

FixWeb crawls public pages like a real browser, then organizes crawl, search, content, accessibility, performance, media, form, runtime, browser-compatibility, owner-data, and repo findings into practical improvement prompts for Cursor, Claude, and Copilot.

  • $9 once, no subscription
  • Just paste a URL — we crawl, analyze, and report
  • Severity-graded quality issues, deduped to signal only
  • Current, AI-ready improvement prompts you can paste into Cursor, Claude, Copilot
Check my site →latest modules · practical fixes · better websites

Production design standards in the rendered UI — Quality Spotlight · FixWeb