## 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/hyperframes-studio-desktop/1316fe77-e26f-4d52-97ca-5ed88a5ce9c1-1791266575-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/hyperframes-studio-desktop/1316fe77-e26f-4d52-97ca-5ed88a5ce9c1-1791266531375-full.webp
- Component on Kage: https://kage.design/component/hyperframes-studio-desktop-navigation

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

Build a minimal desktop navigation bar that stays visually quiet so the main product message dominates. Use a full-width horizontal layout with the brand mark or wordmark aligned to the left, and low-emphasis utility links followed by one compact rounded account/action button aligned to the right. Keep the bar short, with generous side padding and baseline alignment across all items.

Use a warm off-white background around `#f7f1df`, near-black text around `#11110d`, muted utility text around `#59584f`, and a small mint/teal action accent around `#62d6ad`. Use a thin top accent line only if it fits the user's brand. Use a clean sans-serif, approximately 12–14px for utility links and 12px medium weight for the button. Keep the button pill-shaped with a 999px radius and minimal padding; avoid heavy borders and shadows. Add hover states that slightly increase contrast or underline links, while preserving the calm hierarchy.

Never:
- Use the reference's logo, product name, copy, or exact navigation labels
- Reuse reference illustrations, imagery, or distinctive brand marks
- Make the navigation taller or more visually dominant than the hero