Design analysis

The hero pairs a large product title and italic editorial statement with concise explanatory copy and a right-aligned purchase block. Two contrasting pill buttons make the primary product purchase obvious while retaining a secondary suite offer.

Prompt preview

## 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/father/e7444c2f-2da8-491a-acc7-45230a85c8b9-1789538598-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/father/e7444c2f-2da8-491a-acc7-45230a85c8b9-1789538499004-full.webp
- Component on Kage: https://kage.design/component/father-hero

## Before you start
Ask what the user's product is, who it serves, what action matters most, and which brand traits should shape the visual tone. Build an original version using those answers.

Create a dark, two-column product hero directly below the global navigation. Align all content to a shared max-width grid with a small uppercase eyebrow, a very large clean sans-serif title, and a refined italic serif or display statement beneath it. Put readable supporting copy in the left column and a compact price/offer module in the right column. Use near-black #121315, off-white #f1f1ef, muted gray #999b9f, and a restrained accent such as #d13b68 only for tiny rules or labels. Keep typography highly hierarchical: title 60–72px desktop, statement 22–28px italic, body 15–17px with a comfortable 1.6 line-height. Use a bright filled pill for the primary CTA and a transparent outlined pill for the secondary CTA, both with 999px radius and 1px borders. Include ample vertical whitespace and a subtle divider at the section end. Stack columns on mobile and move the offer below the copy.

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