## 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/alexandria-by-firecrawl/0b1c70de-f8b6-4b9f-90b5-f9bf706672fa-1790229690-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/alexandria-by-firecrawl/0b1c70de-f8b6-4b9f-90b5-f9bf706672fa-1790229655966-full.webp
- Component on Kage: https://kage.design/component/alexandria-by-firecrawl-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand voice and visual identity are. Apply the principles below to that product rather than copying this reference.

Build a full-width desktop-first navigation bar with a strong brand area at left, a centered row of grouped product/resource links, and compact utility actions at right. Use a restrained 16–20px horizontal gutter, align all items to one baseline, and keep the primary action visually prominent without making the header tall. Use the product's brand color as the background, near-white text, subtle low-contrast separators, small 12–14px navigation typography, and a compact pill-shaped sign-up button with a contrasting light fill. Add chevrons only where menus are implied, preserve generous click targets, and make the layout collapse into a menu button on narrow screens.

Never: use Firecrawl or Alexandria logos, names, copy, illustrations, imagery, or exact menu labels from the reference.