## 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/ledger-com/abaab959-f9d6-43c3-8f0c-09f584ac8799-1789146870-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ledger-com/abaab959-f9d6-43c3-8f0c-09f584ac8799-1789146801441-full.webp
- Component on Kage: https://kage.design/component/ledger-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand voice and visual identity are. Apply the following principles to that product rather than reproducing the reference.

Build a responsive header with two announcement strips above a primary navigation row. Use a near-black background (`#050505`), white text, muted gray secondary text (`#b8b8b8`), and one restrained accent color for emphasis. Keep the announcement copy compact, with one prominent link and a subtle divider between strips. The main row should use a constrained max-width layout, align the brand mark to the left, navigation links in the middle, and locale plus utility actions on the right. Use a clean grotesk sans-serif, 12–14px utility text, generous horizontal spacing, and a 1px translucent border. Keep the navigation height around 64px and make mobile behavior explicit: collapse links into a menu while preserving the primary action.

Visible interactions should include hover states, an accessible mobile menu, and dismissible or non-distracting announcement bars. Ensure keyboard focus is visible.

### Never
- Never copy logos, product names, copy, illustrations, or imagery from the reference.
- Never make the header visually noisy or allow announcement bars to overpower the navigation.