## 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/promptic/b6d3638e-158e-4f4b-839a-22e1c64a625e-1790402540-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/promptic/b6d3638e-158e-4f4b-839a-22e1c64a625e-1790402502341-full.webp
- Component on Kage: https://kage.design/component/promptic-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality, colours, and navigation destinations it needs. Apply the principles below to that product rather than reproducing the reference.

Build a responsive dark-mode announcement bar plus primary navigation. Use a nearly black background around #0b0b0b, a slightly lighter charcoal announcement pill around #1d1d1d, warm orange accent around #ff6a1a, and off-white text around #f2f2f2. Put a short announcement in a full-width inset pill with a small info icon and an orange rounded action on the right. Under it, align a compact wordmark area on the left, centered navigation links, and a secondary outlined CTA on the right. Use a 12–14px neutral sans-serif for links, generous horizontal padding, 1px borders around #2a2a2a, and 999px radius for pills. Keep the layout stable at desktop widths and collapse links into a menu on mobile; preserve visible focus and hover states.

Never: use logos, product names, copy, illustrations, or imagery from the reference.