Kage Design logo kage
is.team
is.team navigation component

Design analysis

A very light, compact header keeps the brand at left, the core navigation centered, and sign-in plus a dark primary action at right. The thin announcement strip adds urgency without competing with the product message.

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/is-team/5ec87905-607a-4eeb-afa3-a1b534169c52-1789538682-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/is-team/5ec87905-607a-4eeb-afa3-a1b534169c52-1789538583775-full.webp
- Component on Kage: https://kage.design/component/is-team-navigation

## Before you start
Ask me what my product does, who it is for, and what brand personality and visual identity I want. Then apply the principles below to my product rather than recreating the reference.

Build a compact SaaS navigation bar with a tiny full-width announcement strip above it. Use a white background, a restrained black wordmark area on the left, a small centered set of navigation links with subtle down-chevron indicators, and utility links plus a dark pill-shaped primary action on the right. Keep the header around 56px tall, align everything to one horizontal container, and make the announcement strip around 14px tall in a saturated green close to #19B979 with tiny white text. Use a warm near-black #111 for text, muted gray #777 for secondary links, 12–13px UI typography, generous horizontal padding, and very little decoration. Give the primary button a near-black fill, white text, 999px radius, and compact padding; use hover underlines or a barely lighter surface rather than dramatic motion. Collapse links into a simple menu on small screens.

Never use the reference's logo, product name, copy, illustrations, imagery, or exact navigation labels.

More components