## 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/flowo/46dcd8ed-31a5-4fb1-ab3b-3d3a2b966cfb-1791439599-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/flowo/46dcd8ed-31a5-4fb1-ab3b-3d3a2b966cfb-1791439391035-full.webp
- Component on Kage: https://kage.design/component/flowo-navigation

## Before you start
Ask what the user's product is, who it serves, and what their brand voice and visual identity are. Apply the principles below to that product rather than reproducing the reference.

Build a compact, responsive top navigation for a calm software product. Keep the brand mark or wordmark on the left, use a very small set of text links on the right, and include a language or utility control only if the product needs it. Let the navigation sit over the hero when contrast is sufficient; otherwise switch to a solid background.

- Use a centered max-width container with roughly 32–48px horizontal padding on desktop and 20px on mobile.
- Use a neutral sans-serif at 11–13px for links and a slightly heavier 14–16px treatment for the brand.
- Prefer near-black text (`#111111`) on warm white (`#FAFAF8`); add a subtle translucent background or bottom border when needed for readability.
- Keep vertical height around 48–64px, with generous hit areas despite small visible labels.
- Use 9999px radius only for pill-like utility controls; otherwise avoid decorative containers.
- Make the menu collapse cleanly on small screens and preserve keyboard focus states.

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