## 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-1789711534-4.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-feature-grid-2

## 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.

Create a three-column explanatory card grid. Start with a centered section eyebrow and heading, then give each card a small icon tile, an uppercase category label, a clear heading, a short description, and a compact example block that visually distinguishes sample data from prose. Use warm cream cards (#eee8da), ivory page background (#f6f2e8), charcoal text (#292721), muted copy (#77736b), subtle beige borders (#d8d0c0), 8–10px corners, and modest internal padding. Keep the example blocks slightly lighter (#f8f5ed) with monospace text at 10–12px. Stack cards gracefully on mobile.

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