Kage Design logo kage
copilot.money
copilot.money hero component

Design analysis

A large dark product-introduction band transitions from a centered brand emblem and positioning statement into an availability line and a layered desktop/mobile product preview. The visual is strongest because the copy precedes a single concrete proof point.

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/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146601-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/copilot-money/645bb157-e222-4315-91ed-1b76fbb9bd6b-1789146540058-full.webp
- Component on Kage: https://kage.design/component/copilot-money-hero-2

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and colours are. Apply the principles below to that product rather than reproducing this reference.

Create a dark product-introduction section with:
- A small centered abstract product symbol at the top, followed by a large centered statement of the core user outcome in 34–42px type.
- A short availability/platform line in 18px muted text.
- A layered product showcase below: a wide desktop dashboard behind a tall mobile screen, centered and slightly overlapping, with a soft shadow and subtle blue edge glow.
- Use near-black navy #020d1b, card surfaces #061a30, primary text #e5ebf3, muted text #95a6ba, and restrained cyan/blue accents.
- Give the section 80–110px top padding and 100px bottom padding; keep the preview within a max-width of 720px and use responsive scaling.
- Add accessible captions or labels for the preview, but do not make the image necessary to understand the value proposition.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference;
- copy the exact dashboard UI, metrics, or device mockups;
- use a stock image where a neutral product placeholder or user-specific UI would be more appropriate.

More components