Kage Design logo kage
ancher.ai
Ancher 2.0 navigation component

Design analysis

A compact fixed-looking header establishes the product identity, centered navigation, and two contrasting account/actions on the right.

Prompt preview
## 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/ancher-2-0/49a60068-1f5d-45e9-9623-df337c2895cf-1791871457-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/ancher-2-0/49a60068-1f5d-45e9-9623-df337c2895cf-1791871353691-full.webp
- Component on Kage: https://kage.design/component/ancher-2-0-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary action should be. Apply the principles below to that product rather than reproducing the reference.

Build a slim, dark website navigation bar. Use a left-aligned wordmark area, a small centered or balanced set of text links, and right-aligned secondary/sign-in plus one warm accent CTA. Keep the bar about 32–40px tall, with 12–16px horizontal padding and generous empty space. Use a near-black background (#111111), muted gray links (#898681), warm orange accent (#f28b24), and a very subtle bottom border (#252525). Use a small sans-serif type scale: 10–12px links, medium weight for the CTA, and a compact pill radius of 999px. On smaller screens collapse links behind a menu button while retaining the primary action.

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

More components