## 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-1789193038-6.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-form

## Before you start
Ask what personalization options matter for the user's product and what preview should update when they change them. Then implement this interaction with the rules below.

Build a personalization section with a left column containing a large heading, concise explanatory copy, a row of four or five circular color swatches, a small selected-color label, and a segmented light/dark control. On the right, show a framed live preview panel that updates with the chosen accent and theme. Use a very light neutral background #f7f7fa with subtle organic texture, white preview surfaces, charcoal text #181821, and vivid but accessible accent options such as orange #f47b20, teal #1ab38d, indigo #5144ed, and coral #ed4661. Use 44–52px heading type, 14px body copy, 44px circular swatches, 8–10px control radii, and a 1px border around the preview. Clearly indicate focus and selected states, and animate the preview color/theme transition.

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