## 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/resend-com/a5fe426a-0829-45e6-9969-dd938a799528-1789141644-10.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/resend-com/a5fe426a-0829-45e6-9969-dd938a799528-1789137406155-full.webp
- Component on Kage: https://kage.design/component/resend-feature-grid-6

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than reproducing the reference.

Build a product-control showcase with a centered abstract visual, heading, and explanatory copy. Add three equal-width selectable tabs or pills above a large dashboard preview. Use dark outlined controls (#252628), a brighter active state, compact icons, and a wide framed preview with a 14px radius. The dashboard can be a neutral CSS skeleton with charts, table rows, and panels; it should communicate depth without borrowing reference imagery. Make tabs keyboard accessible, update the preview state, and stack controls horizontally scrollable on mobile.

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