## 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/stowdrop-app/2ca5946d-e8e0-4e0c-8652-e4352b3d8fe1-1789067821-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/stowdrop-app/2ca5946d-e8e0-4e0c-8652-e4352b3d8fe1-1789060554-full.webp
- Component on Kage: https://kage.design/component/stowdrop-hero

## Before you start
Ask what the user's product is, who it is for, and what visual brand direction they already have. Then apply the principles below to create an original hero for that product—not a replica of this reference.

## Build this section
Create a dark, conversion-focused SaaS hero that introduces a product through a bold promise and an oversized product preview. The composition should feel like a polished desktop utility or developer tool: editorial, confident, technical, and tactile.

### Layout and alignment
- Use a near-black full-width hero surface, approximately `#080909` or `#0A0A0A`, with a centered content container around 1120–1240px wide.
- Place a compact navigation row at the top with the brand mark and name on the left, lightweight navigation links in the middle/right, and one rounded trial or primary action on the far right. Keep the nav visually quiet so the hero message dominates.
- Center the hero content horizontally. Add a small announcement pill above the headline, followed by a short uppercase metadata row that communicates three concise product attributes.
- Use a large headline spanning roughly two to three lines. Keep the text width controlled—approximately 700–850px—so the line breaks feel intentional. Highlight one short phrase in a vivid accent colour rather than colouring the entire headline.
- Put a brief supporting paragraph below the headline, followed by one prominent pill-shaped CTA and a small reassurance line beneath it.
- Anchor a large product UI preview beneath or partially behind the hero content. It should look like a real application window, not a generic browser mockup: dark chrome, a search field, tabs or filters, a navigation/list pane, a detail pane, and a compact status/footer bar.
- If adding a secondary floating element such as a survey, assistant, notification, or chat card, position it to overlap the hero/product preview at the lower-right. It should support the product story while remaining clearly secondary.
- On small screens, stack the hero naturally, reduce headline size, hide nonessential nav links, and let the product preview crop or scroll horizontally rather than becoming unreadably small.

### Typography hierarchy
- Use a modern grotesk or system sans-serif with crisp rendering and slightly tight headline tracking.
- Headline: very large, approximately 72–96px on desktop, 44–58px on mobile, weight 600–750, line-height around 0.95–1.05.
- Supporting copy: 17–20px, line-height 1.5–1.65, in a muted grey such as `#A2A2A0`.
- Metadata and utility labels: 10–12px, uppercase or compact monospace styling, increased letter spacing, in `#777875` with the key attribute using the accent colour.
- Navigation and app controls should use 12–14px text with restrained contrast. Make the main CTA label 14–16px and medium weight.

### Colour and atmosphere
- Use near-black backgrounds around `#080909`, with panels around `#101111` to `#151515`.
- Primary text should be warm white, approximately `#F1F0ED` rather than pure white.
- Use one warm, energetic accent—orange or coral around `#F26B2D`, `#FF7A32`, or a brand-appropriate equivalent—for highlighted headline text, badges, active controls, and CTA indicators.
- Add a very subtle warm radial glow behind the lower center of the hero, fading into the black background. Keep it diffuse and low opacity.
- Add a sparse, low-contrast dotted or fine-grid texture behind the hero, using grey dots/lines around `#252626` at low opacity. It should provide depth but never reduce text legibility.
- Use secondary semantic colours sparingly inside the product preview: muted green, blue, purple, and yellow may distinguish categories or statuses, but should remain subdued.

### Borders, surfaces, and radius
- Use thin borders around `#282929` or `rgba(255,255,255,0.12)`.
- Give the main product preview a 12–16px radius, subtle shadow, and a slightly lighter top chrome area.
- Use 10–14px radii for cards and fields; use fully rounded pills for announcements, tabs, and CTAs.
- Keep shadows soft and broad, with a faint warm glow around the primary CTA or floating accent card rather than heavy elevation.
- Separate app panes with 1px dividers. Avoid excessive card nesting; the preview should feel like one coherent product surface.

### Interaction and visible states
- Make the announcement pill, primary CTA, nav links, tabs, search field, and product preview controls feel interactive with hover and focus states.
- Use subtle transitions: accent colour shifts, a 1–2px lift, or a soft border glow. Avoid bouncy or exaggerated motion.
- The product preview should include believable static data and selected states: one highlighted list row, one active category tab, and a focused detail area. Keep these elements legible enough to communicate the workflow at a glance.
- Ensure keyboard focus is visible and colour contrast is accessible. Preserve the hierarchy when the floating card overlaps the preview.

### Content guidance
- Write original product-specific copy after learning the user's product and brand. The headline should express a clear outcome, not a list of features.
- Keep the CTA singular and action-oriented. Use the reassurance line to reduce friction with a trial, privacy, pricing, or setup detail relevant to the product.
- Make the mock application demonstrate the product's core job through structure and states, not through decorative filler.

## Never
- Never copy the reference's logos, product name, navigation labels, headline, announcement text, CTA wording, or sample data.
- Never reuse the reference's exact app layout, icons, chat/survey content, or branded imagery.
- Never add a logo, product name, copy, illustrations, or imagery from the reference.
- Never treat the product preview as a static decorative screenshot if the surrounding product can support an interactive or semantically structured version.
- Never sacrifice readability for the grid texture, glow, oversized type, or floating card.