## 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/useit-studio/292486c5-265b-4687-bbec-a08df326a6fd-1792648910-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/useit-studio/292486c5-265b-4687-bbec-a08df326a6fd-1792648867851-full.webp
- Component on Kage: https://kage.design/component/useit-hero

## Before you start
Ask what the user's product does, what transformation it promises, and what visual asset best demonstrates it. Ask for the brand colors and preferred voice, then apply these rules to that product.

Create a spacious split hero directly below the navigation. Use a warm cream background (#F5F1E7), with a left text column around 42% wide and a right visual panel around 48% wide. Add a tiny uppercase eyebrow with a warm orange dot, a large two-line sans-serif headline with one emphasized word in an expressive italic serif, and a short two-to-three-line explanation. Place a dark rounded primary button beside a light outlined secondary button, both with compact arrow affordances. On the right, show a large softly rounded rectangular product/demo image or generated visual on an off-white surface; keep it framed rather than edge-to-edge. Finish with a low-contrast capability sentence beneath the actions. Use near-black #111111, muted gray #5F5C56, orange #F39A19, and subtle cream borders. Maintain strong left alignment, approximately 64–72px vertical padding, and responsive stacking below tablet width.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the reference headline or recreate its exact artwork
- overload the hero with more than two actions