## 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/milepost/daa1b44b-e646-4a0f-860e-b6d9c76440c8-1791871475-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/milepost/daa1b44b-e646-4a0f-860e-b6d9c76440c8-1791871382204-full.webp
- Component on Kage: https://kage.design/component/milepost-navigation

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

Build a minimal full-width navigation bar. Keep the height compact, align a small brand mark and wordmark to the left with generous inset spacing, and leave the rest intentionally quiet unless the product needs one or two high-priority actions. Use a warm off-white background around #f4f3ef, near-black text around #111315, a compact bold sans-serif wordmark, and a small rounded-square icon with a subtle shadow. Maintain 20–28px horizontal padding and 8–12px internal gap. Make the bar sticky only if useful; otherwise let it scroll naturally. Ensure the logo/mark is accessible and the layout collapses cleanly on mobile.

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