## 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/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059860-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/uini-io/ef5b466a-1fe9-4cb6-9300-79049ee31244-1789059824-full.webp
- Component on Kage: https://kage.design/component/uini-navigation

## Before you start
Ask the user what their product does, who it is for, and what visual brand or design system it should use. Then apply the principles below to create a navigation header for that product rather than reproducing this reference.

## Design the section
Build a desktop-first SaaS website header with a clean, low-height horizontal layout.

### Layout and alignment
- Use a full-width header with a near-white background and a centered inner container, approximately 1140–1240px wide.
- Keep the header height around 80–96px, with generous horizontal padding that collapses responsibly on smaller screens.
- Align the brand lockup to the left and the navigation controls to the right on one baseline.
- Group the text links with consistent gaps of roughly 28–36px, followed by a visually distinct primary action with a small separation from the links.
- On narrow screens, replace the full navigation with a menu trigger while preserving the brand and primary conversion path.
- Optional: add very subtle, low-contrast geometric or pixel-like edge accents in the surrounding header background; keep them sparse and decorative.

### Typography hierarchy
- Use a modern sans-serif with strong legibility and slightly compact proportions.
- Brand text should be bold and prominent, around 22–26px.
- Navigation links should be regular or medium weight at approximately 14–15px.
- The primary CTA should use 14–15px semibold text.
- Maintain a clear contrast between the brand, secondary links, and action label without introducing unnecessary text hierarchy.

### Colour
- Page/header background: warm white, approximately `#FCFCFA` or `#FFFFFF`.
- Main text: deep charcoal, approximately `#171717`.
- Secondary navigation text: approximately `#242424`, with a slightly muted hover state.
- Primary CTA: use a warm coral-orange around `#E66D4B` or an equivalent colour from the user's brand palette.
- CTA text: white or a very light warm neutral, approximately `#FFFFFF`.
- Decorative marks, if used, should be extremely subtle: pale beige, blush, or grey around `#EEEAE5`.

### Borders, shape, and depth
- Keep the header mostly borderless to preserve the airy feel.
- Give the CTA a softly rounded rectangle, approximately 5–7px radius, rather than a pill.
- Use a minimum button height of about 42px and horizontal padding around 20–24px.
- Avoid heavy shadows; if separation is needed, use a 1px border in a very light neutral such as `#F0EFEC`.
- The brand mark may be represented by a simple product-specific icon or abstract shape, but it must be created for the user's brand.

### Interaction
- Text links should have a restrained colour transition or underline on hover and a visible keyboard focus state.
- The CTA should darken or increase saturation slightly on hover, with a short 150–200ms transition.
- If the CTA includes an arrow, allow the arrow to shift subtly to the right on hover.
- Ensure the navigation is accessible: semantic landmark, keyboard navigation, sufficient colour contrast, clear focus rings, and a labelled mobile menu button.

## Never
- Never use the reference product's logo, icon, product name, or wordmark.
- Never copy the reference navigation labels, CTA copy, or any other product-specific wording.
- Never reuse the reference brand's exact visual identity; adapt colour, type, spacing, and iconography to the user's product.
- Never include the reference illustration, decorative artwork, imagery, or pixel pattern as a direct copy.
- Never make the header crowded, overly tall, or dependent on low-contrast text for usability.