## 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/grimo-ai/49d17de6-ec9e-4ad1-a407-f0ba9cfffa22-1789538765-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/grimo-ai/49d17de6-ec9e-4ad1-a407-f0ba9cfffa22-1789538658825-full.webp
- Component on Kage: https://kage.design/component/grimo-navigation

## Before you start
Ask me what my product is, who it is for, and what its brand personality and primary action should be. Then apply the principles below to that product rather than reproducing the reference.

Build a compact, full-width desktop navigation bar for a modern consumer software product. Keep the header white or near-white (`#ffffff`), with a subtle bottom divider (`#eeeeee`). Use a centered max-width container around 744px inside the 900px canvas, align the brand lockup at the left, and place 3–4 low-emphasis navigation links plus one dark primary button at the right. Use a small geometric mark that is original to the product, not a copied logo. Set the brand in a semibold 14–16px sans-serif; links at 12–13px; button text at 12–13px semibold. Use generous horizontal padding, 18–22px vertical padding, a 999px button radius, and near-black button fill (`#171717`) with white text. Keep the interaction states clear: links darken on hover and the primary button slightly lifts or changes to `#333333`.

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