## 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/descript-com/c210b18a-1678-4bef-91b5-c444a8589f04-1789146911-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/descript-com/c210b18a-1678-4bef-91b5-c444a8589f04-1789146857587-full.webp
- Component on Kage: https://kage.design/component/descript-tabs

## Before you start
Ask which audiences and use cases matter most for the user's product. Turn those into an original set of selectable stories.

Create a dark use-case explorer with a centered heading and brief supporting copy at the top. Below, use a two-column layout: a vertical numbered list of use cases on the left and a large media/content panel on the right. Give the active row a brighter accent number, stronger text, and a visible divider; keep inactive rows quiet but readable. The panel should contain a wide media frame, a contextual headline, one or two sentences, and a single action button. Use near-black #21040b, warm off-white #fff3ef, muted rose #b98d97, coral #ff4d4d, and thin #6b3945 dividers. Keep the selector and panel aligned to a shared grid, with 32–56px gaps and 14–18px radii on the media frame. Make the tabs or rows keyboard navigable, support swipe or horizontal scrolling on mobile, and animate content changes without excessive motion.

### Never
- Never reuse the reference's use-case names, video stills, product name, or copy.
- Never make inactive options too faint to discover or select.