## 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/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106471-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/wealthfolio/bf50ab71-633d-4b86-816e-5951eb096cd4-1789106444729-full.webp
- Component on Kage: https://kage.design/component/wealthfolio-navigation

## Before you start
Ask the user what their product does, who it is for, and what visual brand they want to use. Then apply the principles below to create an original navigation bar for that product—do not reproduce the reference literally.

## Design language

Build a clean, desktop-first website header for a modern software product. The header should feel quiet, confident, and editorial, with enough breathing room to sit above a spacious landing page.

### Layout and alignment
- Use a full-width header with a warm off-white background, approximately `#FAF8F4`.
- Constrain the contents to a centered max-width container, roughly `1180–1240px`, with responsive horizontal padding of `24–40px`.
- Use a single horizontal flex row, vertically centered, with a height around `96–104px` on desktop.
- Place the brand lockup on the left: a small circular abstract mark followed by the product wordmark. Use an original mark appropriate to the user's product; do not use a copied symbol.
- Keep the primary navigation around the horizontal center of the header. Navigation items should be evenly spaced but not stretched across the entire viewport.
- Place utility controls on the right, such as community links, theme toggle, locale control, or a compact secondary action. Separate unrelated utility groups with a subtle vertical divider when useful.
- Finish with one high-contrast rounded CTA button, such as “Get started” or another product-appropriate action.
- On smaller screens, collapse the primary links into a menu button while preserving the brand and primary CTA. Ensure the header does not wrap awkwardly.

### Typography hierarchy
- Use a refined serif or humanist display face for the brand wordmark if that suits the product; use a highly legible sans-serif for navigation and controls.
- Navigation labels should be compact, medium-weight, and approximately `14px`, with a slightly dark charcoal colour around `#3C3A36`.
- Keep the CTA label at approximately `14px`, medium weight, with clear contrast.
- Use a small “new” or status badge only when it communicates a genuinely useful update. Position it above or beside the relevant navigation item without disturbing alignment.

### Spacing and sizing
- Give the brand lockup around `10–14px` gap between mark and wordmark.
- Use approximately `28–38px` between navigation items, adjusting based on label length.
- Keep utility icons around `18–20px` with generous clickable areas of at least `36–40px`.
- Make the CTA approximately `92–112px` wide and `36–40px` tall, with horizontal padding rather than a fixed width where possible.
- Preserve generous empty space around the header; it should feel airy rather than dense.

### Colour, borders, and shape
- Use a warm paper-like background such as `#FAF8F4` or adapt it to the user's brand palette.
- Use charcoal text around `#34332F`; use a muted taupe or grey such as `#8A8881` for inactive or secondary controls.
- Use a near-black CTA around `#1F201D` with white or warm-white text.
- Avoid heavy borders. If separation is needed, use a fine `1px` line around `#E8E4DC` or a very subtle shadow.
- The CTA should have a pill radius around `999px`. Use small circular or rounded-square geometry for the brand mark and modest `6–10px` radii for any badges.

### Interaction and accessibility
- Make every navigation item and utility icon keyboard accessible with visible focus states.
- Add a restrained hover treatment: slightly darker text, a soft underline, or a very subtle background wash—never a dramatic animation.
- Keep transitions short, around `150–200ms`, using opacity, colour, or transform only.
- Give icon-only controls accessible labels and tooltips where their purpose is not obvious.
- Ensure sufficient colour contrast and a minimum touch target of `40px` for compact controls.
- If the navigation includes a dropdown, open it on click or keyboard activation and align it to the triggering item with a simple, well-spaced panel.

## Never
- Never use the reference product's logo, wordmark, product name, navigation copy, or exact icon set.
- Never copy the reference page's brand colours, labels, or CTA text verbatim; adapt them to the user's product and brand.
- Never include illustrations, photography, or imagery from the reference.
- Never make the header visually busy with excessive borders, gradients, shadows, badges, or animated effects.
- Never sacrifice responsive behaviour, keyboard navigation, or readable contrast for visual similarity.