## 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/agentgrid-io/a4a816d7-f557-4fb4-82e6-3348f23e6057-1792994473-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/agentgrid-io/a4a816d7-f557-4fb4-82e6-3348f23e6057-1792994443669-full.webp
- Component on Kage: https://kage.design/component/agentgrid-feature-grid

## Before you start
Ask what the user's product and brand are, then apply these principles to that product rather than copying the reference.

Create a two-column before-and-after comparison section. Begin with a small uppercase eyebrow and centered heading, then place two equal cards with a 16px gap. Give each card a pale gray background, thin #e8e8e8 border, 8px radius, 24px padding, status pill, concise heading, and supporting text. The left card should feel cluttered and fragmented through layered paper/document tiles; the right should feel ordered through a single shared artifact with a few collaborator chips. Keep the lower visual area tall enough to make the contrast obvious. Use muted red/orange for the old state and teal/green for the new state, but keep the overall page quiet.

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