## 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/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067839-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/datafa-st/3396b937-0925-4898-ae76-13fd2ccd1a9f-1789067801-full.webp
- Component on Kage: https://kage.design/component/datafa-navigation

## Before you start
Ask the user what their product is, who it is for, and what visual brand direction they want. Then apply the principles below to create a version that fits their product rather than reproducing the reference.

## Build a minimal product navigation header
Create a full-width desktop navigation bar for a modern SaaS or software product. The header should feel calm, precise, and understated, with three clearly separated responsibilities: brand identity on the left, primary page links in the middle, and an account or conversion action on the right.

### Layout and alignment
- Use a full-width header with a white or very lightly tinted background.
- Set the header height around 64–68px.
- Add a thin bottom divider spanning the viewport.
- Place content inside a centered container with a maximum width around 1200–1280px and horizontal padding of roughly 24–32px.
- Align all elements vertically to the center of the bar.
- Keep the brand lockup at the far left: a compact abstract mark followed by the product name. Use the user's own brand mark or a simple neutral placeholder while building; do not invent a recognizable third-party logo.
- Position navigation links as a compact horizontal group between the brand and account action. The group may be visually centered in the header or placed toward the center-right, but it should not feel crowded.
- Place a small outlined or softly filled account button at the far right.
- On smaller screens, collapse the link group into a menu button or suitable responsive navigation pattern while preserving the same hierarchy and generous spacing.

### Typography hierarchy
- Use a clean sans-serif UI typeface or the user's brand typeface.
- Product name: semibold, approximately 16–18px, with a dark charcoal colour.
- Navigation links: regular weight, approximately 14–15px, with a muted charcoal colour.
- Account button label: approximately 14px, medium weight.
- Keep text case natural or sentence case; avoid oversized navigation labels, all caps, or decorative typography.

### Spacing and sizing
- Give the brand lockup enough room to breathe, with approximately 10–12px between mark and name.
- Use approximately 32–48px between navigation links.
- Keep the right-side action compact, with horizontal padding around 14–16px and vertical padding around 8–9px.
- Maintain at least 24px of container padding on narrow desktop widths.
- Ensure every clickable target is at least 40–44px tall, even if the visible text is smaller.

### Colour and surface
- Use a near-white background such as `#FFFFFF` or warm white `#FCFBF9`.
- Use dark charcoal for the brand and primary text, around `#242424` to `#303030`.
- Use a softer grey for secondary links, around `#555555` to `#666666`.
- Use a very subtle divider such as `#EEEEEC` or `#E8E7E4`.
- Keep the action button low contrast: white or warm-white fill, a pale grey border, and a barely visible shadow if needed.
- If the user's brand includes a coloured mark, use its real brand colours sparingly and keep the rest of the header neutral.

### Borders, radius, and depth
- Use a 1px bottom border with no heavy shadow.
- Give the account action a small radius around 7–9px; avoid pill-shaped controls unless that is part of the user's existing brand.
- Keep the brand mark compact and vertically balanced with the wordmark.
- Any hover state should be subtle: slightly darker link text, a faint background tint, or a small border-colour shift.
- Provide visible keyboard focus states with a clear but restrained outline.

### Interaction and behaviour
- Navigation links should have clear hover, focus, and active states without changing layout.
- The account action should feel clickable but secondary to the brand and page content.
- Support keyboard navigation and appropriate accessible labels for the brand link, menu control, and account action.
- If a mobile menu is used, make its open and close states obvious and keep the menu aligned with the header container.

## Never
- Never copy the reference site's logo, product name, brand mark, or exact text.
- Never reuse the reference's navigation labels or account wording; generate neutral structure and let the user provide their own content.
- Never use the reference's illustrations, imagery, or distinctive visual assets.
- Never make the header visually louder than the page it introduces.
- Never rely on colour alone for hover, focus, or active states.
- Never reproduce the reference pixel-for-pixel; preserve the interaction and hierarchy principles while adapting layout, content, and styling to the user's product and brand.