## 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/scalebrowser/2a4622f4-ebe3-4b20-ac5d-aef2ae1302c9-1792216897-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/scalebrowser/2a4622f4-ebe3-4b20-ac5d-aef2ae1302c9-1792216866183-full.webp
- Component on Kage: https://kage.design/component/scalebrowser-feature-grid

## Before you start
Ask what foundational capability of the user's product should be explained first, what proof it needs, and what product UI can demonstrate it. Build around that answer.

Create a bordered feature panel with a small coloured eyebrow, a two-line heading, and a two-column lower area. Put four concise benefit rows on the left; each row has a small custom icon, bold label, and one or two lines of explanation. Highlight the active row with a thin blue left rule. Put a large product screenshot/mock UI on the right in a dark or tinted frame. Finish with a centered text link beneath the columns. Use #1769d2 for emphasis, #17202a for headings, #66717b for copy, #eef1f3 dividers, 12–16px corners, and 64px internal padding. On mobile, place the visual after the benefit list.

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