## 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/backdrop/a4be162f-a1b8-4e5c-8da7-09cb7d37c0e3-1792130678-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/backdrop/a4be162f-a1b8-4e5c-8da7-09cb7d37c0e3-1792130585649-full.webp
- Component on Kage: https://kage.design/component/backdrop-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary action should be. Then apply the following principles to that product rather than reproducing this reference.

Build a minimal desktop-first navigation bar. Keep a small brand mark/wordmark aligned to the left inside a max-width container, place a short set of text links near the center or right, and reserve the far-right position for one black pill-shaped primary action. Use generous horizontal whitespace, a white background, near-black text (#0a0a0a), a subtle bottom or container guide (#eeeeee), 14px sans-serif text, and a 20–24px horizontal page gutter. The primary action should be a compact 32–36px-high pill with white text and a soft shadow; links should have understated hover color transitions. Collapse to a menu button on narrow screens.

### Never
- Never use the reference logo, product name, link copy, or exact wording.
- Never copy reference imagery or illustrations.
- Never make the navigation visually heavy or crowded.