## 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/papermark-data-rooms/d90c2ffc-2788-45c6-a044-36fe7b171e0c-1792994580-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/papermark-data-rooms/d90c2ffc-2788-45c6-a044-36fe7b171e0c-1792994482140-full.webp
- Component on Kage: https://kage.design/component/papermark-data-rooms-feature-grid-3

## Before you start
Ask which workflows users need to understand before conversion and what screenshots or live states can prove them. Apply the principles below to that product.

Build a pair of alternating workflow demonstration rows. Each row should contain a compact heading, one or two sentences, a single action button, and a product screenshot or diagram; alternate the text and visual sides between rows. Keep each row spacious, align content to a shared grid, and use consistent image framing. Use 28–34px row headings, 14–16px body text, 12–14px buttons, 48–80px gaps between rows, pale framed visuals, 8px radius, and a mostly white palette with one dark or accent CTA. Add subtle image hover movement only if it does not distract from the information. Stack text above imagery on mobile.

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