Kage Design logo kage
fresha.com
fresha.com navigation component

Design analysis

A compact white header anchors the brand at left and keeps sign-in, business access, and menu actions 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/fresha-com/a0edb032-1288-4233-aedd-1c2eb6d6db18-1789146191-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/fresha-com/a0edb032-1288-4233-aedd-1c2eb6d6db18-1789146166919-full.webp
- Component on Kage: https://kage.design/component/fresha-navigation

## Before you start
Ask what the user's product and brand are, then apply the principles below to that context rather than reproducing this reference.

Build a responsive global navigation bar. Use a white background, a subtle bottom border, a compact brand mark or wordmark on the left, and a right-aligned cluster of low-emphasis text links plus rounded outlined actions. Keep the header around 52–72px tall, horizontally padded, vertically centered, and visually calm. Use near-black text (`#111111`), pale gray borders (`#e5e5e5`), 14–16px typography, and pill radii around 24px. Collapse secondary actions into a menu on small screens while preserving the primary action.

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

More components