## 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/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192867-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cadenya/d064e83b-00ab-4d52-aab7-77367964ea32-1789192832645-full.webp
- Component on Kage: https://kage.design/component/cadenya-tabs

## Before you start
Ask what capabilities the user's product should let visitors explore and what preview best demonstrates the selected capability. Then adapt this interaction to the user's product.

Create a two-column interactive capability explorer on a dark green, lightly gridded background. The left column is a vertical accordion or tab list with four to six items; the active item has a bright vertical rule, expanded supporting copy, and a clear chevron state. The right column contains a large framed product preview, dashboard mock, or code/result visual with a subtle textured treatment. Use a 40/60 or 38/62 column split, align the preview near the top of the list, and keep the section padded with a visible outer frame. Use #0d5d46 background, #d9ef83 for active accents, #ecf1dc text, and semitransparent #5e9176 rules. Use mono 11–13px body text, 18–22px labels, 8–12px radius only inside the preview, and square outer framing. Tabs should be keyboard accessible, announce the active state, animate height/opacity gently, and preserve the layout on mobile by stacking list above preview.

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