Kage Design logo kage
slashy.com
Slashy Assistant navigation component

Design analysis

A restrained navigation bar creates a quiet, editorial frame for the product: brand at left, compact links centered, and authentication plus a high-contrast action at right.

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/slashy-assistant/74e10748-5554-4d85-8539-7c8daa10c12c-1789452131-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/slashy-assistant/74e10748-5554-4d85-8539-7c8daa10c12c-1789452100080-full.webp
- Component on Kage: https://kage.design/component/slashy-assistant-navigation

## Before you start
Ask what the user's product is, who it serves, and what brand personality, colours, and navigation items it needs. Then apply the principles below to create an original navigation for that product.

### Design language
- Use a full-width, low-contrast header with a generous horizontal gutter of about 22–28px on desktop.
- Keep the brand wordmark aligned to the left; place a small set of simple navigation links in the middle or slightly right of centre.
- Put secondary authentication text before one prominent rounded primary button on the far right.
- Use a pale warm-gray background around `#f7f7f7`, near-black text around `#25242b`, and a charcoal primary button around `#292832` with white text.
- Use a compact sans-serif at roughly 11–13px for links, medium weight for the action, and a slightly heavier brand label.
- Keep the header height around 64–72px, with no visible border or only a very subtle `#eeeeee` divider.
- Give the main button a pill radius of 18–22px and modest horizontal padding; include a clear hover state with a slight colour or elevation change.

### Never
- Never reuse logos, product names, copy, illustrations, or imagery from the reference.
- Never overcrowd the navigation or add decorative elements that compete with the page hero.

More components