Kage Design logo kage
chathop.tech
ChatHop call to action component

Design analysis

A focused dark section explains a secondary utility in a headline, short paragraph, and small contextual badge rather than competing with the primary hero CTA.

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-1789193010-4.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-cta

## Before you start
Ask what secondary capability deserves a dedicated moment and what action users should take next. Build this section around that capability, not the reference wording.

Create a centered utility CTA section on a dark page. Use a small uppercase eyebrow, a two-line benefit headline, a concise paragraph describing where the output or capability can go, and a compact status badge or secondary action beneath it. Keep it text-led and calm, with enough spacing to feel like a deliberate chapter break.

Design language: use #030803 as the background, #f4f7ef for the headline, #a4ada0 for body text, and a subtle chartreuse outlined badge around #9cff00. Headline should be 38–48px, body 15–16px with a max width of 420px, and badge text 12–13px. Center everything, use 90–120px vertical padding, and use rounded 999px badges with a 1px translucent green border. Hover states should slightly brighten the badge; do not overanimate the section.

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

More components