## 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/partiful-com/97ae038c-0277-4e29-93fa-45b4a481f7ba-1789146241-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/partiful-com/97ae038c-0277-4e29-93fa-45b4a481f7ba-1789146205210-full.webp
- Component on Kage: https://kage.design/component/partiful-navigation

## Before you start
Ask what the user's product and brand are, then apply the principles below to their context rather than reproducing this reference.

Build a responsive top-of-page navigation with:
- A very thin announcement strip above the header, using a playful accent background and compact centered message.
- A transparent or image-backed main nav with the brand mark at left, 5–7 primary links in the middle, and two contrasting actions at right.
- Use a bold, friendly sans-serif; small nav text around 14px and clear 16px button labels.
- Keep the header content in a max-width container with generous horizontal padding; align all controls on one baseline.
- Use a dark translucent surface or subtle blur when placed over imagery. Primary action should be light/filled, secondary action dark/outlined.
- Buttons should have about 6px radius, 12–18px horizontal padding, and visible hover/focus states.

Never:
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the navigation depend on the reference site's categories.