Kage Design logo kage
lemonade.com
lemonade.com hero component

Design analysis

The hero uses a large centered statement, brief supporting line, strong pink CTA, and a quiet illustrated neighbourhood scene that reinforces coverage categories without competing with the message.

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/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146825-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146795796-full.webp
- Component on Kage: https://kage.design/component/lemonade-hero

## Before you start
Ask what the user's product, target customer, and brand personality are, then apply these principles to that context.

Create a centered landing-page hero with a large two-line display headline, one concise supporting sentence, and one primary CTA. Give the content substantial vertical breathing room and place a low-contrast, monochrome contextual illustration or product visual along the lower edge so the headline remains dominant. Use a near-white background #ffffff, charcoal type #454545, and a saturated accent such as #f50087 for the CTA with a soft accent shadow. The headline should be approximately 42–52px desktop with 1.05 line-height and a readable 18–20px mobile equivalent; supporting copy should be 15–17px. Constrain text to about 600px, center-align it, and use a rounded 4–6px CTA with 16–24px horizontal padding. Add hover and focus states, and ensure the visual is decorative and does not reduce contrast.

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

More components