Kage Design logo kage
takweemai.com
Takweem AI navigation component

Design analysis

The header combines a compact brand mark, restrained product links, language controls, login, and a high-contrast rounded primary button.

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/takweem-ai/0f53cdf8-216d-4033-bf99-d7586d054974-1791439458-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/takweem-ai/0f53cdf8-216d-4033-bf99-d7586d054974-1791439356553-full.webp
- Component on Kage: https://kage.design/component/takweem-navigation

## Before you start
Ask the user what their product, navigation structure, brand, and primary conversion action are. Then create a fresh navigation system using these principles rather than copying the reference.

- Make a centered max-width header around 70px tall with a small brand lockup on the left, navigation links in the middle, and locale/account actions on the right.
- Use generous horizontal whitespace and align every item to one baseline.
- Set navigation in a small neutral sans-serif; make the primary action a dark filled pill with white text.
- Represent language selection as a compact segmented control or subtle pill, and keep login visually secondary.
- Use a white or near-white background, no heavy shadow, and a very light bottom boundary only if needed.
- Approximate palette: #ffffff, #171717, #666666, #f4f4f2, border #e8e8e4; radius 999px for controls.
- Collapse links into a menu on mobile while preserving the primary action.

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

More components