## 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-0.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-navigation

# Before you start

Ask the user what their product is, who it serves, and what visual brand they want to express. Then apply the principles below to create an original announcement bar and navigation header for their product—not a copy of any reference.

## Design language

Build a responsive, two-tier website header for a modern developer-focused or SaaS product.

### Layout and alignment

- Use a full-width near-black header background, approximately `#050505` to `#080808`.
- Place a slim announcement bar at the very top, separated from the main navigation by a subtle 1px bottom border in warm charcoal, approximately `#2a2521`.
- Keep the announcement content centered on desktop and allow it to wrap naturally on narrow screens.
- Use a compact height of roughly 38–42px for the announcement row.
- Include a short promotional message, an inline text link, a right-pointing arrow, and a small dismiss control positioned near the far right edge of the viewport. Keep the dismiss control visually secondary.
- Below it, create a navigation row approximately 70–76px tall. Constrain its contents to a centered max-width container, around 1120–1180px, with balanced left and right breathing room.
- Align the brand at the left, the primary navigation links in the middle, and account/action controls at the right.
- On smaller screens, collapse or simplify the middle navigation into a menu button while preserving the brand and primary CTA. Do not allow the header to become cramped.

### Typography hierarchy

- Use a clean modern sans-serif, such as Inter, Geist, or a similar neutral grotesk.
- Announcement text: 12–13px, regular weight, muted gray, approximately `#898989`.
- Announcement link: same size, brighter gray or white, medium weight.
- Navigation links: 14px, regular to medium weight, muted gray, approximately `#8e8e8e`.
- Brand wordmark text, if the user's product uses one: 17–19px, medium or semibold, bright off-white.
- Secondary account link: 14px, muted gray.
- Main CTA: 14px, semibold, high-contrast off-white.
- Use comfortable line-height and avoid excessive typographic contrast; the CTA should be the strongest emphasis.

### Colour and effects

- Use off-white text around `#f2f1ef` rather than pure white for a softer premium feel.
- Use muted gray text around `#858585` for secondary navigation.
- Use warm amber accents sparingly, approximately `#b97832` or `#d08a3d`, primarily as a very subtle glow around the main CTA.
- The CTA can use a near-black fill with a thin warm-gray border, approximately `#4d4035`, plus a soft amber outer glow with low opacity. Keep the glow restrained and diffuse.
- The announcement divider and other rules should be low contrast; they should structure the header without looking like prominent lines.

### Borders, radius, and controls

- Give the primary CTA a pill shape with approximately 999px border radius, 1px border, and horizontal padding around 17–20px.
- Use a small arrow icon inside the CTA, aligned after the label, with a compact gap of 8–10px.
- Use a simple text or icon-only close button for the announcement bar, with a 28–32px hit area even if the visible mark is only 12–14px.
- Dropdown navigation items should show a small downward chevron with a restrained gap; make the entire label-and-chevron area interactive.
- Avoid heavy shadows, gradients, cards, or decorative treatments in the navigation itself.

### Interaction

- Add a gentle color transition on navigation links: muted gray to off-white on hover and keyboard focus.
- On hover or focus, the CTA may brighten slightly and intensify its warm glow, but it should remain understated.
- Make dropdown indicators rotate or otherwise clearly change state when a menu opens.
- Ensure visible keyboard focus rings using a warm accent or high-contrast outline.
- The announcement close control should dismiss the bar without shifting or breaking the main navigation layout.
- Provide accessible labels for the close button, menu button, dropdowns, and arrow-only affordances.

### Responsive behavior

- Preserve the full-width dark background across all breakpoints.
- At tablet and mobile widths, reduce horizontal padding and hide nonessential announcement detail if necessary, but keep the offer link understandable.
- Replace desktop navigation links with a compact menu trigger below an appropriate breakpoint, and keep the CTA prominent.
- Prevent text overlap and ensure the CTA remains comfortably tappable.

## Never

- Never reuse the reference product's logo, wordmark, product name, or exact brand identity.
- Never copy the reference's announcement copy, navigation labels, CTA wording, or URL structure.
- Never copy the reference layout pixel-for-pixel; adapt the hierarchy and spacing principles to the user's product and brand.
- Never use the reference's exact icons, illustration style, imagery, or decorative assets.
- Never make the amber glow, pill CTA, or dark palette mandatory if they conflict with the user's brand; treat them as adaptable design principles.
- Never sacrifice accessibility, responsive behavior, semantic navigation, or keyboard usability for visual similarity.