## 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/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060797-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/plaid-com/7f22fbce-e808-4b19-99a1-7dcb31fbfb56-1789060772-full.webp
- Component on Kage: https://kage.design/component/plaid-navigation

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original navigation section for that product rather than reproducing the reference literally.

## Build a branded navigation header
Create a full-width, compact website navigation section with a calm, technology-oriented visual presence. Use the component as a flexible foundation for a product site: adapt the navigation labels, actions, logo treatment, and colors to the user's product and brand.

### Layout and alignment
- Use a full-bleed header spanning the viewport width.
- Keep the inner content in a centered container with a maximum width of approximately 1180–1280px and responsive horizontal padding of 24–40px.
- Align the brand mark on the left and primary navigation links in a horizontal row beside it or toward the center.
- Place one or two high-priority actions on the right, with the most important action visually emphasized.
- Vertically center all header items in a compact bar approximately 64–84px tall.
- On smaller screens, collapse secondary links into a menu button while preserving the primary call to action when space allows.
- Ensure sufficient contrast and spacing so the navigation remains legible over the textured background.

### Visual language
- Use a rich blue background with a subtle horizontal tonal shift: begin around #075B8F or #075A8B and move toward a brighter cyan-blue near #149DCE.
- Add a very restrained abstract wave or contour-line texture: thin, low-opacity curves that flow diagonally or horizontally across the background. Keep it decorative and avoid letting it compete with the navigation.
- If the user's brand calls for it, replace the blue palette with an analogous dark-to-bright gradient while preserving the same atmospheric depth.
- Use white or near-white navigation text, approximately #F7FBFD, with muted inactive text around #C5E1EC.
- Give hover and focus states a clear but subtle treatment, such as brighter text, a translucent light background, or a thin underline.
- Use a clean sans-serif typeface. Keep navigation labels around 14–16px, medium weight, with compact but comfortable line height.
- Make the primary action a high-contrast pill or softly rounded button, using a brand-appropriate light or contrasting accent color. Button labels should remain short and action-oriented.

### Spacing, borders, and shape
- Use 16–28px gaps between navigation groups and 24–40px horizontal spacing inside the header container.
- Use an 8–12px radius for buttons and interactive controls; the header itself can remain edge-to-edge without a visible outer radius.
- Avoid heavy borders. If separation is needed, use a 1px translucent white border such as rgba(255,255,255,0.16), or a very subtle bottom divider.
- Keep shadows minimal or absent; rely on the gradient and fine line texture for depth.
- Make the decorative lines responsive so they crop gracefully without causing horizontal overflow.

### Interaction and accessibility
- Make every navigation item keyboard accessible with a visible focus ring.
- Provide hover, active, and expanded states for links, dropdowns, and the mobile menu.
- If dropdown menus are present, use a restrained dark or translucent panel with clear grouping, generous padding, and enough contrast for text.
- Respect reduced-motion preferences: gently animate the background texture or menu transitions only when motion is allowed.
- Preserve readable contrast across the entire gradient and ensure touch targets are at least 44px high.

## Never
- Never copy the reference's logos, product names, navigation labels, or marketing copy.
- Never reuse the reference's exact brand identity, artwork, wave pattern, or visual assets.
- Never include illustrations or imagery from the reference.
- Never treat the blue gradient as mandatory if it conflicts with the user's brand; translate the same principles into their visual system.
- Never sacrifice navigation clarity for decorative texture or visual effects.