Kage Design logo kage
reikacode.com
Reika navigation component

Design analysis

A slim header establishes the product identity at left and keeps utility navigation and a repository link aligned to the 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/reika/dbc92e41-38c4-497a-81df-7bf52356b7a2-1791439501-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/reika/dbc92e41-38c4-497a-81df-7bf52356b7a2-1791439420892-full.webp
- Component on Kage: https://kage.design/component/reika-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and preferred visual identity are. Apply the principles below to that product rather than reproducing this reference.

Build a compact, full-width top navigation for a developer-oriented product. Use a near-black background around #151318, a very thin accent rule around #c92855 along the top edge, and a horizontal layout with a small brand mark and name on the left and concise text links plus an icon action on the right. Keep the content in a centered max-width container with roughly 32px horizontal padding. Use a neutral sans-serif at 12–14px, medium weight for the brand, muted gray #b8b4bb for links, and brighter #f3f1f4 on hover. Give links generous horizontal spacing but keep the bar short, around 56–64px tall. Use subtle transitions and a visible keyboard focus ring in the brand accent.

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

More components