tiun.io
Design analysis
A compact black header keeps attention on the product promise, using a small brand mark at left and a circular menu control at right.
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/tiun/82cad29c-5bdb-4fc9-91ef-0bee36475f7f-1789538797-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tiun/82cad29c-5bdb-4fc9-91ef-0bee36475f7f-1789538671428-full.webp - Component on Kage: https://kage.design/component/tiun-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and navigation needs are. Apply the principles below to that product rather than reproducing the reference. Build a compact dark-mode navigation bar. Use a full-width near-black background (#050505), a very thin low-contrast border (#171717), a small brand wordmark or product label aligned to the left content rail, and a small rounded menu or utility control aligned right. Keep the header around 40–56px tall with generous horizontal padding and no unnecessary links. Use a restrained sans-serif typeface, 12–14px navigation text, white at high contrast and gray (#858585) for secondary content. Controls may use a 1px border and a 999px radius. On mobile, preserve the same hierarchy and use the menu control to reveal navigation. Never: use the reference logo, product name, exact copy, illustrations, or imagery.
kage