## 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/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146329-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/goodreads-com/0ed04b7a-0db2-4e11-9788-e963511428af-1789146302680-full.webp
- Component on Kage: https://kage.design/component/goodreads-navigation

## Before you start
Ask what the user's product is and what its brand personality, audience, and primary action should be, then apply the principles below to that product rather than reproducing this reference.

Build a compact desktop header for a reading, discovery, or content product. Use a white horizontal bar with a centered content container, a wordmark area on the left, and room on the right for account or utility actions. Keep the header visually quiet so the hero remains dominant. Use a restrained serif or editorial wordmark, dark charcoal text around `#222222`, a subtle bottom border around `#eeeeee`, and roughly `16px` horizontal padding with a `56–60px` height. If an account card overlaps the hero, allow it to begin just below or beside the header and give it a white surface, `1px solid #dddddd` border, `8px` radius, and a soft shadow. Ensure responsive behavior collapses utility actions cleanly on narrow screens.

Never:
- use Goodreads logos, product names, or exact reference copy
- reuse the reference illustration or imagery
- copy the exact layout or branding