## 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/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389758-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/inbox-zero/752b92b1-2db1-4db8-be4f-72f48a430ed6-1792389697138-full.webp
- Component on Kage: https://kage.design/component/inbox-zero-feature-grid-2

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

Build a product-benefit feature section explaining automatic organization. Use a centered two-line heading, a muted supporting paragraph, and a large visual comparison below with clearly labeled “before” and “after” states. Represent messages as layered rounded rows or cards, with the after state cleaner and grouped by colored category pills. Use a mostly white canvas, near-black #202020 headings, gray #777777 body text, pastel blue/purple/yellow category accents, 20–28px rounded containers, and very soft shadows. Keep the illustration wide and airy, with overlap used sparingly to show transformation. On mobile, stack the states vertically.

Never use the reference's logo, product name, copy, illustrations, or imagery.