## 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/bolt-new/4e91875d-336e-4c47-bec8-8771acd62040-1789073973-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bolt-new/4e91875d-336e-4c47-bec8-8771acd62040-1789073921-full.webp
- Component on Kage: https://kage.design/component/bolt-new-hero

# Build a product-specific AI builder hero

## Before you start
Ask me what my product does, who it is for, and what its brand personality, colours, typography, and primary conversion goal are. Then apply the principles below to create an original hero for my product rather than reproducing a reference design.

## Design language

Create a dark, full-width hero section for an AI-powered creation product. The hero should make the primary action obvious: describing an idea in natural language and submitting it.

### Layout and alignment
- Use a near-black page background, approximately `#0d0d0f`, with a centered max-width content area around `1180–1240px`.
- Place a simple navigation row above the hero content: brand area on the left, a small group of navigation links in the middle or toward the right, and secondary sign-in plus a bright primary button on the far right.
- Keep the hero panel inset from the viewport edges on desktop, with a rounded outer container around `18–22px`. On mobile, let it become nearly full bleed with smaller corner radii.
- Fill the hero panel with a deep blue atmospheric gradient. Use layered radial gradients rather than a flat colour: electric blue around `#0879ee`, cyan highlights around `#16b9e8`, deep navy around `#06357e`, and black-blue edges around `#07142c`. Add a subtle dark fade toward the bottom so the content remains legible.
- Center the main content horizontally. Use generous vertical padding, approximately `96–120px` above the headline and `72–100px` below the supporting controls.
- Stack the headline, supporting sentence, prompt composer, creation shortcuts, and optional starting-source links with consistent centered alignment.
- Add a restrained trust or ecosystem row below the hero only if it is relevant to the product. Keep it visually subordinate and separated by a dark fade or generous spacing.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly technical feel. Use a heavy weight for the headline, around `700–800`.
- Make the headline large and compact: approximately `44–50px` on desktop, `34–40px` on mobile, with line-height around `1.05`. Keep it to one or two lines.
- Use a short supporting sentence beneath it at `17–19px`, line-height `1.45`, in a cool light grey such as `#cbd5e1`.
- Use small navigation and shortcut labels between `13–15px`, with medium weight and muted contrast.
- Ensure text remains readable over the brightest parts of the gradient; reposition or soften the gradient behind text if needed.

### Prompt composer
- Make the prompt composer the dominant interactive element below the supporting copy, with a maximum width around `640px` and a minimum height around `140px`.
- Use a very dark surface, approximately `#1d1d20`, against the blue background. Give it a `20–24px` radius, a subtle `1px` border around `#30343b`, and a soft shadow.
- Include a muted placeholder that explains what the user can type, but write original copy suited to my product.
- Keep the input area spacious, with the submit action anchored in the lower-right corner. If useful, place an attachment or add button at lower-left and a small mode/options control near the submit button.
- The primary submit button should use a saturated brand accent such as `#1688ed`, with white text or iconography, a pill radius around `999px`, and a clear hover state that becomes slightly brighter.
- Make the composer keyboard accessible, visibly focusable, and usable as a real multiline input rather than a decorative mockup.

### Creation shortcuts
- Beneath the composer, show three to four compact selectable shortcuts for common outcomes relevant to my product, such as a site, app, workflow, document, or prototype.
- Represent each shortcut with a simple monochrome line icon inside a dark translucent rounded square around `56–64px` wide and tall, followed by a small label beneath it.
- Use a subtle blue border or brighter surface for hover and selected states. Do not make every shortcut look like a primary CTA.
- Keep the shortcut group centered with approximately `20–28px` gaps on desktop; allow horizontal wrapping or a scrollable row on small screens.

### Supporting source links
- Optionally include a small line of text such as “Start from” followed by compact pill controls for relevant imports, templates, or integrations.
- Use translucent navy pills around `#123b68` with a `1px` border around `#285b89`, muted text, and tiny interface icons. These are secondary actions and should not compete with the composer.

### Navigation and responsiveness
- Keep the navigation height compact, around `68–76px`, with generous horizontal padding.
- Use understated light-grey navigation text and a single high-contrast CTA. Add chevrons only where a menu has children.
- On mobile, collapse or hide lower-priority navigation links, preserve the primary CTA, reduce hero padding, and make the composer full width.
- Avoid excessive animation. Use gentle gradient movement or hover transitions only if they support the feeling of an active creative tool.

## Never
- Never use the reference product’s logo, product name, navigation labels, headline, placeholder copy, shortcut labels, or integration names.
- Never copy the exact gradient placement, artwork, icons, spacing measurements, or visual composition pixel-for-pixel.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never treat the prompt composer as a static image: it should be a functional, accessible input with clear focus, hover, disabled, and submit states.
- Never sacrifice contrast or responsive usability for the atmospheric background.