## 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/diagramly/9b8d5fcc-855c-4b01-a046-ef496ed19a9b-1792044171-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/diagramly/9b8d5fcc-855c-4b01-a046-ef496ed19a9b-1792044070781-full.webp
- Component on Kage: https://kage.design/component/diagramly-navigation

## Before you start
Ask the user what their product does, who it is for, and what brand personality and visual identity they want. Apply the principles below to that product rather than reproducing the reference.

Build a responsive top navigation for a lightweight, creative software product. Use a full-width bar with a warm off-white background, a small brand mark and wordmark aligned left, a compact group of text links centered or slightly right of center, and account text plus one dark primary button aligned right. Keep the bar around 44–64px tall with generous horizontal padding and a max-width container.

### Design language
- Use a warm paper background close to `#fcfbf7`, near-black text around `#20201e`, muted text around `#77756f`, and a coral accent around `#df5b3e`.
- Pair a friendly handwritten or characterful display face for the brand with a clean sans-serif for utility navigation.
- Keep links small, medium-weight, and spaced evenly; do not use large dropdowns or dense menus.
- Make the primary button compact, near-black, pill-shaped with approximately 8–12px radius, white text, and a subtle arrow or directional affordance.
- Use thin, low-contrast borders or a very soft shadow only where needed; preserve the airy paper feel.
- On mobile, collapse secondary links into a menu while preserving the primary action.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the exact navigation labels, brand mark, proportions, or wording.