## 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/parallax/9ca98bac-0bc3-4cc4-b310-031492d1188c-1792216893-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/parallax/9ca98bac-0bc3-4cc4-b310-031492d1188c-1792216865980-full.webp
- Component on Kage: https://kage.design/component/parallax-navigation

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

Build a compact dark-mode SaaS navigation bar spanning the viewport. Use a small brand mark and wordmark at the left, low-contrast text links in the middle, and one outlined high-contrast action on the right. Keep the header short, horizontally aligned to a centered max-width container, and separated from the page with only a very subtle bottom rule. Use near-black `#0b0b0b`, warm-gray text `#8f8b89`, off-white primary text `#f1efec`, and a restrained pink-red accent around `#d9345b`. Typography should be small and slightly tracked for navigation labels, with a medium-weight button and a 7–9px radius. Include a small theme/icon control without letting it compete with the primary action. Make links and buttons keyboard accessible with visible focus states.

Never:
- use logos, product names, or copy from the reference
- reuse its exact icon or brand mark
- add illustrations or imagery from the reference