## 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/ultracite-v8/2cfe6d77-9aac-44fd-bb06-05dad12091d2-1792303305-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ultracite-v8/2cfe6d77-9aac-44fd-bb06-05dad12091d2-1792303236925-full.webp
- Component on Kage: https://kage.design/component/ultracite-v8-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and preferred navigation links are. Apply the principles below to that product rather than reproducing this reference.

Build a compact desktop-first documentation navigation bar. Use a white or warm off-white background, a small brand mark and wordmark aligned to the left, evenly spaced low-emphasis links across the middle, and two or three icon-only utilities at the right. Keep the navigation height around 44–52px, with a 1px muted border underneath and generous horizontal padding. Use a neutral sans-serif at 12–13px for links, medium weight for the brand, and subtle hover color changes rather than loud buttons. Align everything to one baseline and let the main content below use the same page gutters.

Use near-black text such as #171716, a warm background such as #f7f7f4, and a divider around #deded9. Icons should be simple line icons in a 16px box with accessible labels and keyboard focus states. On narrow screens, collapse the links into a menu while preserving the brand and utility affordances.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never make the navigation taller than the hero needs or add a visually dominant CTA.
- Never rely on icon-only controls without accessible labels.