## 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/zola-com/ad1936e8-70c2-47e9-b9d5-59869832f93f-1789146311-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/zola-com/ad1936e8-70c2-47e9-b9d5-59869832f93f-1789146280251-full.webp
- Component on Kage: https://kage.design/component/zola-card

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than reproducing this reference.

Create a split section with a narrow text/navigation column and a larger visual showcase. Give the section a quiet off-white background #FAFAF7, thin warm-grey dividers #D5D4CE, and an oversized visual panel in a bold accent such as #8F0D49. The left column should contain a short editorial heading followed by stacked clickable benefit rows with subtle separators and arrow affordances. The right panel should use rounded corners, layered cards, and a simple progress or contribution state to demonstrate the feature without overwhelming the page. Use black or deep charcoal text, 16px body type, and 24px panel radius. Make rows keyboard accessible and visibly indicate hover/focus states.

Never:
- copy logos, product names, or reference copy
- reuse reference imagery or illustrations
- reproduce the exact brand styling