## 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/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146823-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146766657-full.webp
- Component on Kage: https://kage.design/component/bilt-navigation

## Before you start
Ask what the user's product, audience, and brand direction are. Apply the following principles to their product rather than reproducing the reference.

Build a compact navigation bar for a dark, premium consumer-finance website. Use a full-width transparent or near-black surface, a restrained wordmark area on the left, and a small set of high-priority navigation links and account/action controls aligned to the right. Keep the bar approximately 56–72px tall with generous horizontal padding and a strong z-index over the hero.

Design language: use a deep navy background around #020c16, off-white text around #f4f7f8, muted text around #9ba8b2, and a pale blue primary action around #a9d8f5. Use a modern grotesk sans-serif, medium-weight labels, and a clear contrast hierarchy. Space items on a 12px or 16px rhythm; use 8px radius on buttons, subtle 1px borders around secondary controls, and no heavy shadows. Make the navigation responsive: collapse links into a menu on narrow screens while preserving the main action.

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