## 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/useit-studio/292486c5-265b-4687-bbec-a08df326a6fd-1792648910-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/useit-studio/292486c5-265b-4687-bbec-a08df326a6fd-1792648867851-full.webp
- Component on Kage: https://kage.design/component/useit-feature-grid-2

## Before you start
Ask what core interaction makes the user's product distinctive and what users can change or control. Ask what demo state would communicate that interaction best, then build this pattern around it.

Create a full-width dark feature section with a near-black background (#121212) and generous horizontal padding. Use a two-column layout: on the left, layer two or three rounded product snapshots or UI panels with slight rotation and depth; on the right, place a row of small dark-gray pill chips with one subtle orange indicator, followed by a large two-line white headline and a short gray explanation. Add a wide rounded command/prompt bar below the explanation with a small accent icon, editable-looking text, and a circular orange submit button. Include understated progress or interaction guidance beneath it. Use white #F7F4ED, gray #A9A59C, orange #F28D16, panel gray #202020, 18–24px radii, and very restrained shadows. The composition should feel exploratory but remain immediately scannable; make the prompt bar and any visible controls keyboard/focus accessible.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- reproduce the reference stacked artwork or exact editing sentence
- make the dark section a generic text block without a visible interaction