Kage Design logo kage
temprl.org
Simo navigation component

Design analysis

A very compact white utility bar establishes the brand and leaves nearly the entire viewport to the product story. The small menu control on the right adds a clear, low-noise navigation affordance.

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/simo/01913313-62ce-4f89-a048-ac4500929f0e-1791525855-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/simo/01913313-62ce-4f89-a048-ac4500929f0e-1791525747684-full.webp
- Component on Kage: https://kage.design/component/simo-navigation

### Before you start
Ask the user what their product is, who it serves, and what their brand voice and visual identity are. Then apply the following principles to create an original navigation for that product.

Build a very short, high-contrast utility navigation: keep the bar shallow, align the brand mark and name to the left, and reserve one prominent compact menu or primary action on the right. Use a warm off-white background, near-black text, a thin dark bottom border, and one bright accent for the right-side control. Use a condensed mono or technical typeface for tiny utility text and a heavier display face for the brand. Keep horizontal padding tight but responsive, with a clear 1px–2px outline and a small square radius. Make the right control obviously clickable and keyboard accessible; on small screens collapse secondary links into it.

Never: copy the reference's logo, product name, copy, illustrations, imagery, or exact layout.

More components