Kage Design logo kage
saidtrace.com
SaidTrace navigation component

Design analysis

A slim white navigation bar establishes the product identity, centers the primary links, and keeps the language control at the far 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/saidtrace/da2a1190-1b0d-4dc6-9c61-691af1a5c9a8-1792130574-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/saidtrace/da2a1190-1b0d-4dc6-9c61-691af1a5c9a8-1792130502177-full.webp
- Component on Kage: https://kage.design/component/saidtrace-navigation

## Before you start
Ask what the user's product and brand are, then apply the principles below to that product rather than copying the reference.

Build a slim desktop navigation bar with a small brand mark and wordmark on the left, a restrained row of primary links centered or slightly offset, and a compact locale or utility control on the right. Use a white or near-white background, a 1px bottom border in #e5e7e9, charcoal text around #20252b, and a tiny accent line at the very top around #e85b86 only if it suits the brand. Keep the bar about 44–52px tall, align everything to a consistent max-width, use 12–13px medium text, and keep horizontal padding generous. Links should have a subtle hover colour transition and visible keyboard focus.

Never use the reference's logo, product name, copy, illustrations, or imagery.

More components