## 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/quiethint-r/a06c27ca-94cd-4cb7-8750-fd2be8cedd1f-1789711422-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/quiethint-r/a06c27ca-94cd-4cb7-8750-fd2be8cedd1f-1789711327026-full.webp
- Component on Kage: https://kage.design/component/quiethint-r-navigation

## Before you start
Ask me what my product is, who it is for, and what its brand personality and visual identity are. Then apply the principles below to create an original navigation for my product, not a copy of the reference.

Build a full-width desktop navigation with a compact utility bar and a branded masthead area. Use a dark near-black background around #171818, a very subtle square grid, condensed uppercase utility labels, and one high-contrast primary action. Keep the layout aligned to a centered content rail of roughly 600px at this viewport, with the product mark on the left, small section links beside it, and the main download or signup action on the right. Use orange #f05a16 only for active states and small accents, white #f4f4f0 for primary text, and muted gray #8c8c88 for secondary text. Typography should be geometric sans for headings and a narrow mono or condensed sans for metadata. Keep controls rectangular, with minimal or no radius, 1px borders, and generous horizontal padding. Add a subtle scroll cue on the far right if the page is long. On hover, invert or orange the active link and preserve a crisp, instantaneous interaction.

Never use the reference's logos, product names, copy, illustrations, imagery, or exact navigation labels.