## 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/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789193037-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jackalope/0b3edf93-8385-4e4a-8f92-3c01052ad81d-1789192903236-full.webp
- Component on Kage: https://kage.design/component/jackalope-tabs

## Before you start
Ask what alternative workflows or use cases users need to explore and what action each path should lead to. Use the design rules below with the user's own content.

Build an interactive workflow explorer. Start with a split heading area: a large two-line statement on the left and a brief explanatory paragraph on the right. Under it, place a horizontal numbered tab strip with three equal segments, a clear selected state using an indigo underline or border, and arrow affordances. Below the tabs, show one large rounded illustration/workflow canvas with a short quote-like outcome statement and connected task cards flowing into a result card. Use a pale lavender panel #ecebfa, white cards, thin orange and indigo connector lines, subtle shadows, and 16px radii. Use 48px headline type, 13px tab labels, 20–28px workflow statement text, 24px spacing between structural layers, and animate tab content with a restrained fade/slide. Make the tabs keyboard navigable and responsive by allowing horizontal scrolling on mobile.

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