## 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/kilo-code-for-ios-and-android/a36b68a0-c268-4b03-b068-c86b233a401a-1789538727-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/kilo-code-for-ios-and-android/a36b68a0-c268-4b03-b068-c86b233a401a-1789538626553-full.webp
- Component on Kage: https://kage.design/component/kilo-code-for-ios-and-android-navigation

## Before you start
Ask the user what their product, brand, navigation labels, and announcement status are, then apply the principles below to that product rather than copying this reference.

Build a responsive stacked announcement bar and global navigation. Use a near-black background (#090a09), a compact high-contrast announcement strip in a brand accent such as warm yellow (#f4f45a), and a centered max-width content row. Keep the announcement message visually secondary to a compact dark pill link and a dismiss control. Below it, align the brand mark at left, lightweight utility links and one filled primary action toward the right, with a square menu button at the far edge. Use a monospaced or technical sans typeface, small uppercase/compact labels, 24–28px horizontal padding, and 1px low-contrast borders. Keep the nav height generous enough for touch targets and make the menu, dismiss, and CTA keyboard accessible.

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