Kage Design logo kage
cortexdocs.dev
Cortex hero component

Design analysis

The hero uses oversized two-line typography, a small eyebrow, concise explanatory copy, and paired calls to action before transitioning into the product preview.

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/cortex/48e48c32-4544-4e71-94d3-849a84be1bb9-1789279408-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cortex/48e48c32-4544-4e71-94d3-849a84be1bb9-1789279340596-full.webp
- Component on Kage: https://kage.design/component/cortex-hero

## Before you start
Ask what the user's product does, who the audience is, and what brand direction to follow. Then apply these layout principles with original content.

Create a dark, centered hero directly below the navigation. Use a tiny mint or brand-accent eyebrow in uppercase monospace lettering, followed by an exceptionally large two-line headline with the first line in bright white (#f4f4f2) and the second line in a dimmer gray (#77797d) to create hierarchy. Center a short two-line description beneath it in muted gray (#a2a3a5), constrain it to roughly 500px, and finish with two horizontally aligned buttons: a light primary button and a dark outlined secondary button.

Give the hero generous vertical breathing room: approximately 340–400px tall on desktop, with headline sizing around 60–68px, tight line-height near 0.95, and responsive scaling below 48px. Use a black background (#090a0a), subtle grid or radial atmospheric texture only if it supports the brand, 8px button corners, and clear hover/focus states.

Never: use the reference's logos, product names, copy, illustrations, imagery, or exact CTA labels.

More components