## 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/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146555-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/betterment-com/48b23e19-a777-4bc7-89e7-1aceabf18629-1789146502433-full.webp
- Component on Kage: https://kage.design/component/betterment-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply these principles to that product rather than copying the reference.

Build a responsive two-level site header: a very slim dark audience switcher above a larger primary navigation. Use a deep blue background (approximately `#0874c9` / `#0868b8`), white navigation text, a compact brand mark area at left, and generously spaced dropdown links in the middle. Put a high-contrast warm yellow primary button (approximately `#ffc928`) at the far right with dark text, an 8px radius, and a minimum 44px hit area. Keep the header content inside a centered max-width container with 20–24px mobile gutters. The audience bar should use tiny uppercase labels and a subtle active underline. On mobile, collapse links into a menu button while preserving the primary action. Add visible hover/focus states and a sticky or transparent-to-solid transition only if it suits the product.

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