Kage Design logo kage
jurniti.com
jurniti navigation component

Design analysis

A compact white header establishes the brand and provides primary links plus a dark login action. Its restrained height keeps 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/jurniti/cfab9c3f-60ef-4e80-9a31-cc939c39468c-1789538631-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/jurniti/cfab9c3f-60ef-4e80-9a31-cc939c39468c-1789538542122-full.webp
- Component on Kage: https://kage.design/component/jurniti-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and colours are. Build a compact navigation for that product rather than reproducing this reference.

### Design language
- Use a full-width, white or near-white header, around 56–72px tall on desktop, with a centered max-width container.
- Align the wordmark at the left and primary navigation links in a small, calm cluster near the center; keep the main account/action control at the right.
- Use a neutral sans-serif with 11–13px utility links and a slightly stronger wordmark.
- Keep spacing generous: 24–32px horizontal padding and 20–28px gaps between links.
- Use a near-black primary button such as #1d1d1d with white text, 6–8px radius, and a subtle hover lift; secondary links can be #55504b.
- Add a thin warm border or very soft shadow only if needed to separate the header from the page.
- Make the layout collapse into a menu button on narrow screens.

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

More components