## 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/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106716-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/noodle-seed/892ab390-1bf9-4a7d-a1b3-8cebe5820ba8-1789106640138-full.webp
- Component on Kage: https://kage.design/component/noodle-seed-hero

## Before you start
Ask the user what their product does, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original hero for that product—not a recreation of this reference.

## Build this section
Create a full-width, dark-mode landing-page hero for a modern software product. The section should feel confident, premium, technical, and calm, with the value proposition doing most of the visual work.

### Layout and alignment
- Use a near-black page background, approximately `#050505` to `#080808`.
- Stack three layers:
  1. A slim announcement bar at the very top.
  2. A compact navigation row beneath it.
  3. A large, centered hero content block.
- Keep the announcement bar full width and approximately 38–42px tall. Center its message horizontally, with a small dismiss control aligned to the far right.
- Constrain the navigation and hero to a generous max width, approximately 1120–1180px, with responsive horizontal padding of 24px on small screens and 5–6vw on larger screens.
- The navigation should align the brand at left, links in the middle, and account/action controls at right. Hide or collapse secondary links on small screens.
- Give the hero generous vertical breathing room. Place the main content around the middle of the viewport, with the headline, supporting text, and actions in one centered column.
- Set the hero headline to a maximum width of roughly 850–950px so it wraps into two intentional lines on desktop. On mobile, allow natural wrapping and reduce the size rather than forcing an awkward line break.
- Add a thin divider or subtle bottom boundary near the base of the hero. If the product benefits from support or chat, reserve a small floating utility control in the lower corner without letting it cover the primary content.

### Typography hierarchy
- Use a clean contemporary sans-serif with a light or regular weight for the headline; avoid heavy display styling.
- Make the headline exceptionally large and airy: approximately 76–116px on desktop, 48–64px on tablet, and 42–52px on mobile, with a tight line-height around `0.92–1.02`.
- Use near-white headline text, approximately `#F4F4F2` or `#FAFAF8`.
- Set the supporting paragraph at approximately 18–20px desktop and 16–18px mobile, with a relaxed line-height around `1.45–1.6` and a readable max width of 620–700px.
- Use muted gray text for navigation, announcement copy, and supporting content: approximately `#858585` to `#A0A0A0`.
- Keep navigation labels compact, around 14–16px. Use medium or semibold weight only for primary actions.

### Colour, borders, and surfaces
- Keep most of the composition monochrome: near-black background, white type, and subdued gray secondary text.
- Introduce one restrained warm accent—soft amber, bronze, or the user's brand accent—only in focus areas such as the primary button glow, announcement boundary, or subtle ambient halo. A suitable starting range is `#A66A32` to `#D49A58`.
- Use transparent dark surfaces for buttons, approximately `rgba(255,255,255,0.04–0.08)`, rather than bright filled cards.
- Use fine borders around secondary actions and controls, approximately `rgba(255,255,255,0.14–0.22)`.
- Use small to medium radii: about 999px for pill buttons and 10–16px for utility surfaces. Avoid excessive rounded cards.
- Add a very soft radial amber glow behind or below the primary action, using low opacity and substantial blur. It should be barely noticeable at rest.

### Interaction and states
- The primary CTA should be a pill-shaped button with a subtle accent glow, clear semibold text, and a directional arrow or equivalent affordance.
- The secondary CTA should be visually quieter: transparent or near-transparent fill, thin border, and the same directional affordance.
- On hover, slightly brighten the border and text, lift the button by 1px, and increase the glow modestly. Keep transitions around 180–240ms with an ease-out curve.
- Navigation dropdown indicators should be small and understated; dropdowns may open on click or hover depending on the product's interaction model.
- The announcement dismiss control should be keyboard accessible and have a visible focus state.
- Preserve strong keyboard focus rings using the brand accent or a high-contrast neutral colour.
- Make all touch targets at least 44px high, and ensure the hero remains legible and well-spaced at narrow widths.

## Never
- Never copy the reference's logo, product name, navigation labels, CTA copy, announcement copy, or exact marketing language.
- Never reuse the reference's brand identity, distinctive iconography, or exact spacing and line breaks.
- Never include the reference's chat widget, imagery, illustrations, or decorative assets unless the user's product independently needs an equivalent utility.
- Never make the hero dependent on a large image or video; the design should work as a typography-led composition.
- Never sacrifice accessibility, responsive behavior, semantic heading structure, or readable contrast for visual similarity.