Design analysis

A restrained header keeps the brand at left, compact product links centered, and authentication plus a bright primary action at right. The near-black background and tiny type preserve focus on the hero.

Prompt preview

## 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/termsquad-com/d12b8131-9740-4063-aef8-780525dfffce-1789166957-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/termsquad-com/d12b8131-9740-4063-aef8-780525dfffce-1789166919347-full.webp
- Component on Kage: https://kage.design/component/termsquad-navigation

## Before you start
Ask what the user's product, audience, and brand are, then apply the principles below to their product rather than copying this reference.

Build a responsive top navigation for a dark, technical SaaS site. Use a full-width near-black bar, a small brand mark and wordmark on the left, four to five low-contrast links around the center, and compact login plus a high-contrast rounded primary button on the right. Keep the header around 64px tall with generous horizontal padding, align everything to one baseline, and collapse links into a mobile menu. Use an off-black background around #07090a, white text around #f2f4f2, muted text around #8c9290, a subtle top accent around #b9f5d1, 1px borders around #202625, and 8–10px button radius. Typography should be a modern sans-serif with small navigation text and medium-weight button labels. Add understated hover colour changes and a clear keyboard focus ring.

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