lemonade.com
Design analysis
A compact utility header combines audience links on the left, account access on the right, and a centered wordmark. Its generous white space keeps the opening experience calm and premium.
Prompt preview
## 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/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146825-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lemonade-com/fec12946-54bf-4cf0-ac52-dcd9bbeb95c9-1789146795796-full.webp - Component on Kage: https://kage.design/component/lemonade-navigation ## Before you start Ask what the user's product, audiences, and brand are, then apply the following principles to that product rather than reproducing the reference. Build a responsive global navigation bar for a trustworthy consumer product. Keep the header short and airy, with a slim top accent line, a left-aligned set of audience/category links, a centered brand mark or wordmark, and a right-aligned account or sign-in action. Use a white background, dark charcoal text around #3f3f3f, and a vivid brand accent around #f50087 only for the top rule and high-value actions. Use a restrained sans-serif for navigation labels; if the brand has a distinctive display face, reserve it for the wordmark. Align everything to a 24–48px horizontal container, vertically center the controls, and use 14–16px type with comfortable 24px gaps. Make links keyboard accessible, add a subtle hover colour transition, and collapse secondary links into a mobile menu without shifting the brand mark. Never: copy logos, product names, copy, illustrations, or imagery from the reference.
kage