## 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/thinking-orbs/1e178b90-85cc-40c4-86e5-bc16130bc9ab-1791180317-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thinking-orbs/1e178b90-85cc-40c4-86e5-bc16130bc9ab-1791180214590-full.webp
- Component on Kage: https://kage.design/component/thinking-orbs-navigation

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

Build a compact documentation navigation bar for a dark developer tool. Use a nearly black background (#050505), a 1px hot-pink accent line (#d51d52) along the top, and muted gray text (#8e8e8e) in a small 11–12px sans-serif. Keep the content in a centered max-width container with generous horizontal breathing room. Put the product mark/name at the left, a few documentation anchors beside it, and small utility links/actions at the right. Make the active item a subtle pink 1px rounded outline with 8–12px horizontal padding. Align everything vertically in a 38–44px row, keep the hierarchy quiet, and provide hover/focus states that brighten text and preserve keyboard visibility.

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