CASAN/design-qa.md

CASAN report redesign — Design QA

Comparison target

• Source visual truth:
  • /Users/thanhnguyen/Downloads/hình ảnh (1).png — 1844 × 862 px.
  • /Users/thanhnguyen/Downloads/hình ảnh (2).png — 1796 × 795 px.
• Rendered implementation:
  • tmp/design-qa/h6-default-final.png — 866 × 2165 px.
• Product state: Core Local Assurance Viewer, H6, stale/insufficient telemetry, six successful runs, technical disclosures collapsed.
• Browser viewport: 866 × 1043 CSS px, DPR 2. The browser capture is stored at CSS-pixel width; the reference screens are wider desktop compositions, so comparison is by hierarchy, density and visualization pattern rather than pixel-identical scaling.
• Responsive verification: 390 × 844 CSS px, document scrollWidth 390 px.

Full-view comparison evidence

The two reference reports and the final implementation were opened together in one comparison input. CASAN intentionally preserves the references' strongest patterns—headline metrics, measured distributions, explicit provenance and forensic detail—while moving from an all-dark engineering sheet to the existing CASAN light decision workspace.

Required fidelity surfaces

• Fonts and typography: the references use dense monospace throughout. CASAN intentionally uses the existing system sans hierarchy for decision content and reserves monospace for IDs, timestamps and evidence values. Headings, labels and body copy wrap without clipping.
• Spacing and layout rhythm: four executive metrics, decision findings, outcome distribution and evidence quality form a consistent vertical sequence. Technical content is removed from the default reading path.
• Colors and tokens: navy, cyan, green, amber and red follow the existing CASAN semantic palette. Every colored state also has a visible label or value.
• Image and asset fidelity: neither reference contains raster product imagery. No placeholder image, generated asset or replacement illustration is needed.
• Copy and content: all values and warnings come from canonical report data. Missing token/cost values remain unavailable and no maturity claim is inferred.

Focused-region comparison

The final full-page capture is readable at original resolution, including the executive metrics, decision findings, outcome bar, coverage bars and collapsed technical disclosure. A separate crop was not needed.

Interaction and accessibility checks

• Filter and technical sections are native details/summary controls.
• Technical telemetry becomes visible when expanded and hidden when collapsed.
• Responsive navigation opens from one labeled button and closes with Escape.
• At 390 px the document has no horizontal overflow.
• Reduced-motion CSS remains present.
• Browser console warning/error check returned no entries.

Comparison history

Iteration 1

• Finding: P2 — tablet navigation consumed too much report width at the default 866 px browser viewport.
• Evidence: tmp/design-qa/h6-default.png.
• Fix: raised the local viewer navigation-collapse breakpoint from 820 px to 960 px.

Iteration 2

• Post-fix evidence: tmp/design-qa/h6-default-final.png.
• Result: the report uses the full tablet canvas, the menu remains keyboard operable, all content is readable, and no actionable P0/P1/P2 mismatch remains.

Follow-up polish

• A multi-run trend chart can be added only after the report contract exposes a truthful ordered series. It must not be inferred from incomplete snapshots.

final result: passed