## 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/kerno-1-0/454d79dc-d228-4b14-889b-ec4f181556d7-1792130637-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/kerno-1-0/454d79dc-d228-4b14-889b-ec4f181556d7-1792130514699-full.webp
- Component on Kage: https://kage.design/component/kerno-1-0-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary conversion goal are. Apply the following principles to that product rather than copying this reference.

Build a responsive global navigation with a very thin announcement/status strip above a primary header. Use a near-black navy background (#090d12), subtle 1px dividers (#252c35), and a restrained accent color chosen from the user's brand; reserve the brightest neutral (#f2f5f7) for the main action. Keep the header content centered in a max-width container with a compact horizontal rhythm: brand at left, a small set of grouped navigation links in the middle, and login plus a high-contrast CTA at right. Use uppercase micro-labels in a monospaced or technical face for status text, and a clean sans-serif for navigation. Keep the logo area visually dominant without making it large; use 14–16px body text, 10–11px utility text, and 8–10px tracking-heavy status text. Buttons should be 4–6px radius, 34–38px tall, with clear hover and focus states. Collapse the middle links into a menu on narrow screens while keeping the brand and CTA discoverable.

Never use the reference logo, product name, copy, icons, imagery, or exact brand treatment.