Kage Design logo kage
diewithme.co
Die With Me navigation component

Design analysis

A quiet, compact header anchors the page with a small wordmark at left and two pill-like utility links at right, preserving the playful product's generous whitespace.

Prompt preview
## 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/die-with-me/0682dea9-a1fa-4b17-a0ad-c426bf87c57f-1789711343-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/die-with-me/0682dea9-a1fa-4b17-a0ad-c426bf87c57f-1789711263535-full.webp
- Component on Kage: https://kage.design/component/die-with-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 minimal desktop-first navigation bar. Use a centered max-width container with generous horizontal padding, a compact brand lockup on the left, and a small group of low-emphasis utility links on the right. Keep the header visually light: warm off-white background, near-black text around `#202321`, subtle border around utility controls around `#deded4`, and a soft radius of 10–12px. Use a small, friendly sans-serif for the brand and links, with restrained contrast and no heavy drop shadows. Align everything to one baseline and leave ample vertical breathing room. Utility links should have clear hover/focus states without becoming visually dominant.

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

More components