## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060561-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Component on Kage: https://kage.design/component/strawberrybrowser-hero

## Before you start
Ask what the user's product is, who it is for, and what visual brand system they want to use. Then apply the principles below to create an original hero for that product rather than reproducing this reference.

## Build this section
Create a spacious SaaS/product hero for a modern software product. The composition should communicate the product's value immediately, then support the claim with a large, partially cropped product interface preview.

### Layout and alignment
- Use a warm off-white page background and a centered max-width container of approximately 1080–1160px.
- Place a compact top navigation inside the same container: brand area on the left, a small horizontal set of navigation links near the center, and account/action controls on the right.
- Keep the hero content centered. Use a large headline around 52–64px on desktop, with a tight line height around 0.98–1.05 and a maximum width of roughly 700px.
- Add a short supporting paragraph beneath the headline, constrained to approximately 560px so it wraps into two balanced lines.
- Place two adjacent CTAs below the paragraph: one visually dominant filled button and one quieter outlined button.
- Position the product preview below the CTAs with a small overlap into the lower hero area. Make it wide—roughly 90–100% of the container—and crop its lower portion at the section boundary or viewport to create anticipation.
- Let the preview feel like a real application window: browser chrome or a top toolbar, tabs/context controls, a mostly open workspace, and a visible input or command area near the bottom.
- If adding decorative accents, keep them small and sparse around the top edge of the preview. Use abstract brand-specific forms or characters only if they suit the user's product; they should never overpower the product UI.
- On mobile, stack the navigation controls appropriately, reduce the headline to roughly 38–46px, stack CTAs if necessary, and allow the preview to extend beyond the viewport with horizontal cropping rather than shrinking it until unreadable.

### Design language
- Overall feeling: calm, optimistic, intelligent, polished, and approachable rather than futuristic or overly technical.
- Background: warm white around `#FAF9F6` or `#FCFBF8`, with a very low-contrast repeating dot/grid texture using `#EEEDE8` at approximately 10–20% opacity behind the hero content.
- Primary text: near-black charcoal around `#202020`.
- Supporting text and navigation: muted neutral gray around `#6F6D69`.
- Primary CTA: dark charcoal fill around `#242424`, white text, subtle hover lift or slightly lighter fill.
- Secondary CTA: white or transparent fill, `#DCDCD8` border, charcoal text, with a soft hover background around `#F3F2EF`.
- Use a clean contemporary sans-serif for UI and body copy. The headline should be bold but not excessively heavy; navigation and button labels should be medium-weight and compact.
- Establish hierarchy through scale and weight, not excessive colour. Keep the headline dominant, the paragraph readable, and controls understated.
- Use thin neutral borders around the preview, approximately `#D8D8D4`, with a soft shadow such as `0 12px 35px rgba(30,30,25,0.08)`.
- Give the product preview a rounded top edge around 14–18px; use smaller 5–8px radii for controls and fields. Keep the page itself mostly open and uncluttered.
- Use generous vertical spacing: roughly 28–36px from headline to paragraph, 26–32px from paragraph to CTAs, and 88–110px from CTAs to the preview. Adjust responsively to preserve the same visual rhythm.

### Interaction and behaviour
- Navigation links should have a subtle colour transition on hover.
- Buttons should have clear hover, focus, and pressed states; preserve strong contrast and visible keyboard focus rings.
- The preview may include restrained ambient motion—such as a cursor, loading state, or content reveal—but the hero must remain understandable and usable with animation disabled.
- Respect `prefers-reduced-motion`; do not make the product preview or decorative elements distracting.
- Ensure the hero has an accessible heading structure, descriptive button labels, sufficient contrast, and a responsive layout that does not rely on imagery to explain the product.

## Never
- Never copy the reference's logos, product names, trademarked characters, exact copy, or brand-specific assets.
- Never reuse the reference's screenshots, illustrations, imagery, interface text, or decorative artwork.
- Never recreate the hero as a pixel-for-pixel clone; derive a new layout, message, interface, and visual identity from the user's product and brand.
- Never use vague placeholder copy if the user's product context is available.
- Never sacrifice legibility or accessibility for the oversized preview effect.