idlen.io
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.
kage