## 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/relic/11197dbe-e39c-44cc-b0a1-5cdca0c05213-1789279378-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/relic/11197dbe-e39c-44cc-b0a1-5cdca0c05213-1789279305759-full.webp
- Component on Kage: https://kage.design/component/relic-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand personality and primary action are. Apply the principles below to that product rather than reproducing the reference.

Build a responsive top navigation for a calm, editorial software landing page. Use a centered max-width container with a small brand mark on the left, low-contrast text links in the middle, and a right-side sign-in link plus a bright primary CTA and compact menu button. Keep the header visually light and slightly translucent so it can sit over a warm hero background. Use near-black text `#171714`, warm cream `#f4efe3`, muted gray-brown `#716b5f`, and an amber/yellow CTA around `#f4b900`; use a 999px pill radius for buttons, 1px low-contrast borders, 12–16px horizontal gaps, and a 44–52px header height. Typography should be a restrained sans serif with small navigation labels and a clearly heavier CTA. Collapse links into the menu control on narrow screens, with visible hover and focus states.

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