## 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/trycase/bc7fc0fa-2eda-4dd0-a163-94201d1f5c68-1789452162-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/trycase/bc7fc0fa-2eda-4dd0-a163-94201d1f5c68-1789452104312-full.webp
- Component on Kage: https://kage.design/component/trycase-navigation

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

Build a compact, single-row product navigation for a dark developer-tool website.

- Use a near-black background around `#111111`, with a very subtle bottom border around `#242424`.
- Align the content to a centered max-width container; use a small brand mark and wordmark on the left, and compact text links plus one sign-in/account action on the right.
- Keep the header height around 44–56px, with horizontal padding that becomes smaller on mobile.
- Use a neutral sans-serif: 12–13px utility links, medium weight for the account action, and slightly brighter text for the brand.
- Keep inactive links muted around `#858585`; use `#f2f2f2` for the brand and hover states.
- Use generous horizontal spacing, no heavy dropdowns, and a very subtle rounded outline or filled pill for the final action.
- Make navigation links keyboard accessible and collapse into a simple menu on narrow screens.

### Never
- Never use the reference product's logo, name, links, copy, illustrations, or imagery.
- Never make the header visually louder than the hero.
- Never add decorative navigation elements that do not support the user's product.