## 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/sineframe-m3/9bef993c-d1bd-4942-a7c3-753981df67d7-1791525887-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/sineframe-m3/9bef993c-d1bd-4942-a7c3-753981df67d7-1791525776498-full.webp
- Component on Kage: https://kage.design/component/sineframe-m3-navigation

## Before you start
Ask what the user's product and brand are, then apply the following principles to that product rather than reproducing this reference.

Build a restrained desktop-first top navigation for a technical software product. Use a centered max-width shell with a small product mark and product name aligned left, followed by a muted descriptor separated by a thin divider. Align documentation, repository, and account actions to the right; make the primary account action a small outlined button. Use a warm off-white background (#f7f6f3), near-black text (#171717), muted gray secondary text (#77746f), 1px borders (#d5d3ce), compact 8px radius, and generous horizontal padding. Typography should be a clean grotesk sans-serif: product name at 12–13px semibold, utility links at 12px, and a 13px button label. Keep the bar around 56px tall and vertically center all controls. Make links keyboard accessible and give buttons a subtle darker hover state.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference