## 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/geardex-app/fc33b7d0-970c-45a6-93bf-9b94f05b130c-1791941528-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/geardex-app/fc33b7d0-970c-45a6-93bf-9b94f05b130c-1791941487258-full.webp
- Component on Kage: https://kage.design/component/geardex-hero

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

Create a high-impact dark hero whose headline is the dominant element: two short lines, large bold sans-serif type, tight line-height, and one line optionally highlighted in a fresh accent. Center the copy, keep supporting text narrow and low contrast, and place a primary filled CTA beside a secondary dark outlined/demo CTA. Below it, show a wide polished product UI preview with rounded corners, thin border, layered shadow, and believable dense data panels; let it overlap a low-contrast atmospheric background texture or image without making the image the focus. Use #070908, #eef2ed, #a5ada7, emerald #2bd18b, and restrained green-black surfaces. Keep the hero spacious, with the visual beginning after the CTA and ending before the metrics strip; provide responsive stacking and preserve the focal hierarchy.

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