Kage Design logo kage
lorikeetcx.ai
lorikeetcx.ai navigation component

Design analysis

A compact centered navigation bar keeps the brand and primary links visible without competing with the oversized editorial 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/lorikeetcx-ai/66a45b6c-3f5c-4089-bde2-7a0aa025402f-1789142168-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lorikeetcx-ai/66a45b6c-3f5c-4089-bde2-7a0aa025402f-1789141728989-full.webp
- Component on Kage: https://kage.design/component/lorikeetcx-navigation

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

Build a minimal desktop-first website navigation with a centered max-width container. Place the brand mark and wordmark on the left, a compact row of 5–6 text links in the middle/right, and one dark pill-shaped primary action at the far right. Use generous horizontal whitespace, a white background, subtle shadow or none, and keep the bar visually lightweight.

Design rules:
- Layout: max-width around 610px at this screenshot scale, horizontally centered; align all items to one baseline.
- Typography: neutral sans-serif for navigation, 11–13px, medium weight; primary action slightly bolder.
- Colour: white background, near-black text #111111, dark button #171717 with white text.
- Shape: primary button radius 999px; navigation itself may be transparent or softly rounded.
- Spacing: 20–28px between links, 10–14px vertical button padding.
- Interaction: links gain a subtle opacity or underline treatment on hover; primary action remains high contrast; collapse to a menu on small screens.

Never:
- Never reuse the reference logo, product name, copy, imagery, or illustrations.
- Never make the navigation visually heavier than the hero.
- Never add unnecessary dropdowns or decorative controls.

More components