## 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/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073818-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/prisma-io/a9579200-8b41-4bc5-a193-79d074877e51-1789073789-full.webp
- Component on Kage: https://kage.design/component/prisma-hero

# Before you start
Ask me what my product does, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create a tailored hero for my product—do not reproduce the reference literally.

## Build a confident developer-product hero
Create a responsive landing-page hero for a software platform. The section should communicate a clear end-to-end product promise, make the value understandable within a few seconds, and move visitors toward a primary conversion while giving them a lower-commitment secondary path.

### Layout and alignment
- Use a full-width page with a slim announcement strip at the very top. Give it a subtle dark-to-colour gradient background, centered announcement content, a compact pill-shaped action, and a close affordance aligned to the far right.
- Place the main hero inside a large, pale, softly textured or softly gradient panel with generous rounded corners and comfortable outer margins on desktop. Avoid literal texture assets if none are available; use layered radial gradients and a very subtle noise effect instead.
- Add a clean navigation row at the top of the panel: brand mark and wordmark on the left, primary navigation near the centre, and search, sign-in, and a dark rounded CTA on the right. Collapse this into a simple menu on smaller screens.
- Centre-align the hero content. Use a constrained text column around 760–900px wide. Give the headline generous top spacing below navigation and enough breathing room before the supporting copy.
- Under the copy, show three short benefit statements in one horizontal row on desktop. Each begins with a small coloured checkmark; distribute them evenly and allow them to wrap or stack on mobile.
- Place primary and secondary actions beneath the benefits. The primary button should be visually dominant; the secondary should be outlined and quieter.
- Add a compact proof row below the CTAs with three credibility metrics or customer signals separated by small dots. Use bold emphasis only for the key numbers.
- Finish with a large product preview window overlapping or emerging from the lower part of the panel. It should be centred, wide, slightly elevated, and cropped by the viewport or section edge to create continuation below the fold.
- The preview can be a believable abstract dashboard: browser-like top bar, left navigation rail, content area, cards, controls, and skeleton/detail states. It should support the product promise without becoming the primary focal point.

### Typography hierarchy
- Use a modern grotesk or geometric sans-serif with a clean technical feel.
- Set the headline in near-black, approximately #171717, with a large desktop size around 56–64px, tight line-height around 0.98–1.05, medium-to-semibold weight, and restrained letter spacing. Use two or three lines with intentional wrapping rather than an overly wide single line.
- Set supporting text around 18–20px with 1.45–1.6 line-height, using muted gray #6B6B6B or #707070.
- Use benefit, navigation, and button labels around 14–16px. Keep labels direct and sentence case.
- Use proof-row text around 14px; emphasize metrics with #3E3E3E and keep surrounding labels muted.

### Colour and atmosphere
- Base the main panel on warm white #FAFAF8 or #FFFFFF, with extremely subtle gray variation rather than a flat sterile background.
- Use near-black #151515 for primary text, buttons, and strong interface elements.
- Use muted gray #6A6A6A for secondary copy and navigation.
- Introduce a restrained accent system of cyan #24C5D6, yellow #F2D13D, coral #F06B73, and soft green #C9F2D0. Use accents for checkmarks, faint glows, announcement gradients, and preview details—not for large blocks of body text.
- Add soft, blurred radial glows behind and around the product preview: cool cyan/green on one side and warm yellow/coral on the other. Keep opacity low enough that the UI remains legible.
- Ensure colour contrast meets accessibility requirements and provide a visible focus state for every interactive control.

### Borders, shadows, and radius
- Use a thin, low-contrast border around the main panel and product preview, approximately rgba(20,20,20,.08).
- Use large panel corners around 24–32px; use 16–20px for the preview window and 999px for pills and buttons.
- Keep shadows diffuse and subtle: a broad shadow such as 0 20px 60px rgba(0,0,0,.10), with a faint coloured ambient glow behind the preview.
- The preview should feel like a crafted product window, not a generic card: include a narrow top chrome area, small circular controls, and carefully spaced internal dividers.

### Interaction and responsive behaviour
- Buttons should have clear hover, pressed, and keyboard-focus states. A dark primary CTA may slightly lift or brighten on hover; the outlined CTA may gain a lightly tinted background.
- Navigation links should use a restrained colour transition or underline; do not add distracting animations.
- Keep the hero static and fast-loading. If adding motion, use only a gentle ambient glow or a very subtle preview fade/translate on entry, respecting prefers-reduced-motion.
- On tablet and mobile, reduce headline size to roughly 38–46px, reduce panel padding, stack benefits and actions, simplify the navigation, and let the preview extend beyond the horizontal viewport with a controlled crop rather than shrinking it until unreadable.
- Preserve a strong vertical rhythm: announcement strip, navigation, headline, copy, benefits, actions, proof, then preview.

### Content guidance
- Write original, product-specific copy for my product. The headline should state the transformation or outcome, not merely list features.
- Keep the supporting paragraph to two or three concise lines.
- Use exactly three benefit statements when space allows, and make the proof row believable and relevant to the product.
- Use action labels that clearly distinguish the primary commitment from the secondary exploration path.

## Never
- Never use the reference’s logos, wordmarks, product names, taglines, statistics, navigation labels, or exact copy.
- Never copy the reference screenshot, dashboard, illustration, stripe motif, or any other distinctive imagery.
- Never use branded assets or recreate a competitor’s identity; create an original brand mark or use a neutral placeholder based on my product’s brand.
- Never turn the hero into a generic template with invented claims that are not appropriate for my product.
- Never sacrifice readability, accessibility, responsive behaviour, or performance for decorative effects.