Kage Design logo kage
qagent.in
QAgent card component

Design analysis

A centered section introduces a visual audit report card made of numbered evidence rows, status labels, and a highlighted expected-behavior block.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711535-7.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/qagent/ac07fafb-2e50-4f4b-8444-88a4bcf31a5f-1789711433120-full.webp
- Component on Kage: https://kage.design/component/qagent-card

## Before you start
Ask what the user's product is, who it serves, and what brand personality and visual system it should use. Then apply the principles below to that product rather than reproducing this reference.

Build an audit-trail showcase section with a centered eyebrow, heading, and explanatory subtitle above a large report-style panel. The panel should have a soft cream background, border, and rounded corners, then stack compact evidence rows with numbered badges, status chips, quoted inputs/outputs, and one visually emphasized expected-result row. Use clear grouping, 12–16px internal gaps, 12px radius, #eee8da surfaces, #f8f5ed nested rows, #d8d0c0 borders, charcoal text, muted gray copy, and brick-red accents for warnings or active states. Make the report readable on mobile by stacking paired columns.

Never: use logos, product names, copy, illustrations, or imagery from the reference.

More components