## 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/wealthfront-com/3e3be85e-7bdd-4e6a-8630-f389b2c5e8da-1789146563-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfront-com/3e3be85e-7bdd-4e6a-8630-f389b2c5e8da-1789146504390-full.webp
- Component on Kage: https://kage.design/component/wealthfront-navigation

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

Build a full-width desktop header with three stacked layers: a very slim utility notice, a celebratory announcement strip with a lightly textured or festive surface, and a dark saturated navigation bar. Keep the content centered in a max-width container. Use a strong sans-serif for navigation, small accessible text for the notice, and a clearly differentiated primary CTA beside a quieter login/secondary action. Align the brand mark at left, a small set of product categories in the middle, and account actions at right. Use deep indigo/purple backgrounds around #24105f and #37139a, white text, a pale announcement surface around #e8e5f5, and an accent pink/red rule only if it fits the user's brand. Use 8px button radius, 1px translucent borders on secondary controls, and generous horizontal padding. Make dropdown links keyboard accessible and keep the header responsive with a collapsed menu on narrow screens.

Never: copy the reference's logos, product names, copy, illustrations, imagery, or exact navigation labels.