## 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/shrine/ff477ea2-1694-4783-bdc4-4322fec31da4-1792130651-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/shrine/ff477ea2-1694-4783-bdc4-4322fec31da4-1792130580085-full.webp
- Component on Kage: https://kage.design/component/shrine-navigation

## Before you start
Ask what the user's product is, who it is for, and what their brand personality and visual assets are. Then apply the principles below to create an original navigation for that product.

- Use a compact, full-width header with generous horizontal breathing room and a clear left-to-right reading order.
- Put the brand identifier on the left and one primary action on the right; avoid filling the header with secondary links.
- Use a crisp dark neutral for text, a white or near-white background, and a small bordered button with a subtle radius around 5–7px.
- Keep the header height intentionally short, with vertically centered content and a thin divider only if the product needs one.
- Use a friendly display face or restrained pixel-inspired detail only where it supports the user's brand; keep navigation labels highly legible.
- Make the primary action keyboard accessible and add a visible hover/focus state without changing layout.

Never: use the reference's logo, product name, copy, illustrations, imagery, or exact visual assets.