## 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/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060561-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/strawberrybrowser-com/0a6dd4bb-409f-4c45-aa48-6abac7e2076e-1789060532-full.webp
- Component on Kage: https://kage.design/component/strawberrybrowser-navigation

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and primary action should be. Then apply the principles below to create a navigation header tailored to my product—not a copy of the reference.

## Build a minimal product navigation header
Create a wide desktop navigation bar for a modern software product. The header should feel calm, premium, and highly legible, with a compact horizontal structure and generous empty space.

### Layout and alignment
- Use a full-width header around 64–76px tall, with a centered inner container and a maximum width of approximately 1120–1240px.
- Divide the bar into three logical zones: brand at the left, primary navigation in the middle, and account plus the main conversion action at the right.
- Vertically center every element on one baseline system.
- Keep the brand and right-side actions anchored to the container edges while allowing the primary links to sit comfortably in the central area.
- Use approximately 28–40px horizontal padding on desktop; reduce this to 18–24px on smaller screens.
- On mobile, collapse the primary links into a menu button while preserving the brand and primary CTA when space allows.

### Brand treatment
- Pair a small abstract product mark with a wordmark or product label, but use the user's actual brand identity.
- Keep the mark compact, roughly 22–28px square, and the wordmark visually stronger than the utility text.
- If there is a release-stage label such as “beta”, render it as a small muted capsule beside the brand, with 10–11px uppercase or compact text.

### Typography hierarchy
- Use a neutral sans-serif for navigation, account text, and buttons; use the product's own typeface if supplied.
- Navigation links should be approximately 14–15px, medium weight, with comfortable letter spacing and muted contrast.
- The wordmark can be 20–23px and slightly heavier or more distinctive.
- The primary CTA should use 13–14px semibold text for quick scanning.
- Maintain clear contrast between ordinary links, the account link, and the primary action without relying on large text.

### Colour and surface
- Use a warm near-white background such as `#FDFCF9` or a brand-appropriate equivalent.
- Set ordinary navigation text to a soft charcoal around `#77736D`; use darker charcoal around `#252525` for the wordmark and primary CTA.
- Make the main CTA a dark filled pill with a colour near `#292927`, and use an off-white label such as `#F8F7F2`.
- If adding a background texture, keep it extremely subtle: a low-opacity warm grey or beige grid/noise pattern around `#EEECE5`, never strong enough to reduce text legibility.
- Avoid heavy shadows. A very faint bottom border or tonal separation is preferable if the page needs a header boundary.

### Borders, radius, and sizing
- Use a fully rounded CTA with a radius of 999px and approximately 16–20px vertical padding or a 36–40px total height.
- Give any status badge a small rounded radius around 4–6px, with a pale neutral fill and muted text.
- Avoid visible borders around ordinary navigation links.
- Keep gaps consistent: roughly 28–38px between primary links, 28–40px between the central links and right-side utilities, and 10–14px between the brand mark, wordmark, and status badge.

### Interaction
- Make each navigation item a real link with a generous hit area, not only tightly wrapped text.
- On hover, transition link colour toward the primary text colour over approximately 150–200ms; do not add distracting underlines unless they fit the product's brand.
- Give the primary CTA a subtle hover change such as a slightly lighter or darker fill and a small upward or scale shift.
- Add visible keyboard focus states using a 2px outline with sufficient contrast and an offset from the control.
- Preserve a clear active-page state through colour, weight, or a restrained underline/dot.
- Ensure the header remains usable at narrow widths: prevent link collisions, provide a keyboard-accessible menu, and maintain adequate touch targets of at least 44px.

### Responsive behaviour
- Desktop: display all navigation links in one row.
- Tablet: reduce link gaps and hide lower-priority utilities only if necessary.
- Mobile: use a menu trigger with an accessible label, a compact brand lockup, and the primary CTA if it still fits; otherwise move the CTA inside the opened menu.
- If the header becomes sticky, use a subtle opaque or lightly translucent surface so content never bleeds through the text.

### Never
- Never reuse logos, product names, exact copy, illustrations, imagery, or brand marks from the reference.
- Never reproduce the reference header pixel-for-pixel.
- Never use inaccessible low-contrast text, tiny hit areas, or a menu that works only with a mouse.
- Never let decorative texture overpower the navigation or make the header look noisy.
- Never add links or actions that do not make sense for the user's product.