## 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/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146540-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chime-com/8a783617-6b1d-44ef-a500-84b69ae63fa0-1789146449552-full.webp
- Component on Kage: https://kage.design/component/chime-hero

## Before you start
Ask what the user's product is, what its strongest customer promise is, and what brand system should guide the design. Then create a product-specific hero using these principles.

Build a full-width hero directly below navigation with a deep forest-green background around #003B2B or #004831. Use a two-column layout: the left side contains a large, bold, high-contrast headline, three concise benefit bullets with check icons, and an email field paired with a filled CTA; the right side contains one dominant product visual or abstract device composition, angled slightly to add energy without reducing legibility. Use a 56–72px headline on desktop with tight line-height, 16–18px supporting text, and generous 24–32px gaps between hierarchy levels. Use light text #F7FBF6, muted mint secondary text, a bright green CTA around #19C477, 8px radius, and a low-contrast field border. Add a slim credibility/proof row below the main content with compact labels and adequate contrast. Ensure the visual never overlaps the form or headline and stack the columns on mobile.

Never: copy the reference's product name, headline, claims, phone render, card render, logos, illustrations, imagery, or exact copy.