## 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/outbid-lol/7d6cde02-1b78-43c8-adde-d87a2555099d-1789142023-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/outbid-lol/7d6cde02-1b78-43c8-adde-d87a2555099d-1789139288987-full.webp
- Component on Kage: https://kage.design/component/outbid-lol-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary actions are. Then apply the principles below to create an original navigation for that product.

Build a compact two-row desktop navigation. Keep the main content centered in a max-width container around 700–760px, with a small brand mark on the left, a subtle live/status indicator beside it, and low-emphasis utility links on the right. Place a second horizontal category/filter strip below the main row using small rounded pills; make the active filter a warm coral filled pill and keep inactive filters on a very pale cream surface.

Use an off-white background around #fffdf9, near-black text #242321, muted text #817a72, coral accent #df765e, pale blush #f7ebe4, and thin borders around #eee7df. Use a friendly geometric sans-serif, with 13–14px navigation text, 11–12px metadata, 8–10px radius on pills, and 20–28px vertical breathing room. Align all rows to the same container and allow horizontal scrolling for categories on narrow screens. Make links and filter pills keyboard accessible and visibly focusable.

Never use the reference's logo, product name, copy, icons, category labels, or exact visual assets.