## 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/elva/1eb2f570-9576-4b74-bb9a-568459f8b568-1789452093-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/elva/1eb2f570-9576-4b74-bb9a-568459f8b568-1789452038199-full.webp
- Component on Kage: https://kage.design/component/elva-feature-grid-2

## Before you start
Ask what configuration or collaboration workflow the user's product needs to explain, which states users choose between, and what kind of changes should be previewed. Build the section around that product logic.

Create a wide dark product-workspace section. Introduce it with a centered icon or small status badge, a 42–54px heading, and two lines of muted explanatory copy. Below, place a large rounded application frame (#0d0d10) with a subtle #25252b border and 14–18px radius. Add a compact stepper or tab row at the top with one highlighted violet state (#8f72ff), then show a 2x2 grid of selectable option cards. Give selected cards a faint violet background, brighter border, and visible check indicator; unselected cards remain nearly black. Underneath, show a second wide change-review panel with a header, red/green schema-diff rows, status pills, and a concise impact column. Use 12px labels, 14–16px card text, 20–24px internal padding, and strong alignment to a shared grid. Include realistic hover, selected, and expandable diff states. On mobile collapse the option grid to one column and let the diff panel scroll horizontally if necessary.

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