## 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/palomino/b08bb039-2732-4831-94dd-d664e600a54a-1792216872-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/palomino/b08bb039-2732-4831-94dd-d664e600a54a-1792216834141-full.webp
- Component on Kage: https://kage.design/component/palomino-navigation

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

### Design rules
- Use a single horizontal row with a restrained max width and generous side padding.
- Keep the brand lockup left-aligned; place utility/social links and primary destinations on the right.
- Use a compact sans-serif hierarchy: product name around 14–16px, links around 11–13px.
- Let the navigation blend into the hero with a transparent or subtly translucent background rather than a heavy bar.
- Use an atmospheric deep blue palette near `#16345f`, white text near `#f7fbff`, and muted blue-gray secondary text near `#b9c8d8`.
- Keep icon buttons small and evenly spaced; provide visible hover and keyboard focus states.
- Use approximately 16–24px horizontal padding, 12–16px vertical padding, and a restrained radius around 8px for any hover surfaces.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never overcrowd the navigation with secondary actions.
- Never make the brand mark or links hard to read against the hero background.