## 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/ffffinder/236e01a7-b902-40d9-8cf2-9e70faeb5362-1790748892-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ffffinder/236e01a7-b902-40d9-8cf2-9e70faeb5362-1790748796754-full.webp
- Component on Kage: https://kage.design/component/ffffinder-feature-grid

## Before you start
Ask what the user's product does, which workflow should be demonstrated first, and what brand system should govern the UI. Apply the following principles to that product.

Create a feature band with a brief technical description above a large visual demonstration. Keep the copy left-aligned and compact, then place a rounded, pale backdrop around a centered product screenshot or live mockup. The section should explain one workflow at a time and use the visual to prove it.

Design rules:
- Stack copy and visual vertically on desktop, with consistent left/right insets and no competing side column.
- Preserve generous whitespace between the explanatory line and the preview.
- Use small monospace or utilitarian type for labels and body copy; make the feature title modest rather than oversized.
- Use a soft neutral panel around the preview, approximately `#E9EDF3`, with dark UI imagery inside it.
- Radius: 14–18px for the outer panel; use subtle depth and avoid ornamental borders.
- On smaller screens, scale the preview fluidly and allow horizontal cropping only when it preserves the workflow.

Never:
- Never reuse the reference's copy, product name, logo, interface, or image assets.
- Never turn this into a generic icon grid disconnected from the actual workflow.