## 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/databench-by-alkera/229e473d-7918-4538-a962-0aa359369c12-1791439387-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/databench-by-alkera/229e473d-7918-4538-a962-0aa359369c12-1791439317723-full.webp
- Component on Kage: https://kage.design/component/databench-by-alkera-navigation

## Before you start
Ask the user what their product does, who it is for, and what brand personality, logo, and navigation labels they want. Apply the following principles to their product rather than reproducing the reference.

Build a responsive SaaS navigation bar with a white or near-white background, a compact brand mark at the left, horizontally spaced navigation links in the middle/right, and one dark filled primary CTA at the far right. Use a max-width content container with roughly 46px desktop side padding, vertically center everything, and keep the bar about 56–64px tall. Use a clean sans-serif typeface, 13–14px links, subtle chevrons for menus, and a near-black green charcoal such as #0b160f for the CTA. Buttons should have 7–9px corner radius, 12px/18px padding, and a hover state that slightly lightens the fill. Collapse links into a mobile menu while preserving the primary CTA.

Never: use logos, product names, copy, illustrations, or imagery from the reference.