Kage Design logo kage
idlen.io
Idlen hero component

Design analysis

The hero uses a deep blue radial glow, an oversized two-line headline, compact supporting copy, paired installation CTAs, and a large dark IDE/chat product preview. The preview makes the unfamiliar earning proposition concrete before the user scrolls.

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/idlen/09112380-17fc-499b-a8d2-71eed663a053-1789538552-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/idlen/09112380-17fc-499b-a8d2-71eed663a053-1789538482510-full.webp
- Component on Kage: https://kage.design/component/idlen-hero

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to that product rather than copying this reference.

Create a dark developer-focused hero with a subtle navy-to-electric-blue radial glow behind the content. Center a small eyebrow badge, a large two-line headline with the second line in a softer gray, one concise supporting sentence, and a row of two high-contrast actions plus quiet inline links. Below the actions, include a wide rounded product preview showing an IDE-like workspace with a file tree, code editor, and AI chat panel; it should feel like a real interface, not a decorative screenshot.

Design rules:
- Center the hero copy in a max-width of roughly 620px, then let the preview expand to 820–860px.
- Use a 52–64px bold headline, 16px supporting copy, 13–14px buttons, and 11–12px utility links.
- Approximate colours: background #071126 with glow #123b9b and #061b42, white #f6f8fb, muted #9ca8bb, primary blue #4d9cff, preview surface #111318.
- Give the preview a 10–14px radius, thin #283248 border, soft shadow, and realistic internal separators.
- Keep the first CTA filled and the secondary action light or dark outlined; use short verbs.
- On mobile, stack CTAs and crop or simplify the preview without removing its core editor/chat relationship.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the exact headline, interface, code, or product screenshot.
- Never let the visual preview overpower the main conversion action.

More components