## 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/frctl/44ee5e18-5619-4ecf-b1a3-c989d58893aa-1790488993-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/frctl/44ee5e18-5619-4ecf-b1a3-c989d58893aa-1790488956222-full.webp
- Component on Kage: https://kage.design/component/frctl-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary actions are. Then apply the following principles to that product rather than reproducing the reference.

Build a compact dark desktop navigation bar for a creative software product. Use a near-black background (#030303), a thin low-contrast bottom rule (#171317), and a 32px side gutter. Align a small brand mark at left, three short uppercase anchor links around the center/right, then an outlined secondary action and a high-contrast pill login/action at the far right. Use a condensed monospaced uppercase label style at 9–11px with generous letter spacing; keep the primary pill in off-white (#f3f3f3) with black text and a 999px radius. The bar should be 68–72px tall, vertically centered, and become a stacked or scrollable layout on small screens. Add subtle hover colour shifts and a faint magenta accent (#c32679) for active indicators.

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