chathop.tech
Design analysis
A dark, high-contrast narrative band reframes a frustrating moment, supports it with concise explanation, and resolves it with a large centered visual.
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/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789193009-2.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/chathop/788ba903-59f3-47ff-b1c8-618bf4f4ae3c-1789192974293-full.webp - Component on Kage: https://kage.design/component/chathop-hero-2 ## Before you start Ask what recurring user frustration the product removes and what kind of original visual could symbolize the solution. Adapt this section to the user's product and brand. Build a full-width problem-to-solution storytelling section. Start with a small uppercase label, a bold headline that names the obstacle and turns toward optimism, then a short supporting paragraph. Place a large, centered visual below the copy so the section feels like a cinematic reveal rather than a conventional feature card. Keep the message and visual in one coherent vertical band. Design language: use a near-black background around #030803, white headline text, muted gray-green body copy, and chartreuse accents around #9cff00. Use a soft radial green glow behind the upper content that fades into black. Headline size should be 42–52px with tight leading; body width 360–440px and 15–16px text. Use generous vertical spacing, approximately 72px above the label, 18–24px between text blocks, and 70–110px before the visual. The visual may be an original illustration, product abstraction, or motion object, but it must support the idea. Include subtle reveal motion only if it does not impair reading. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage