Kage Design logo kage
art4.app
Art4 navigation component

Design analysis

A compact, centered navigation balances a small brand mark, sparse links, utility controls, and a high-contrast download action without competing with the hero.

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/art4/7829dcfa-a9d2-43f5-a84e-0a12e7aa84a2-1791180358-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/art4/7829dcfa-a9d2-43f5-a84e-0a12e7aa84a2-1791180184357-full.webp
- Component on Kage: https://kage.design/component/art4-navigation

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

Build a minimal desktop-first navigation bar. Use a full-width white surface, a small brand mark and wordmark aligned left, a short set of low-emphasis links centered, and utility controls plus one dark primary action aligned right. Keep the content in a max-width container with generous horizontal padding and a height of roughly 56–64px. Use a neutral sans-serif, 12–14px navigation text, subtle gray text, and near-black #171918 for the primary button. Buttons should be pill-shaped with a 999px radius, compact padding, and a barely visible border or shadow. Keep vertical alignment exact and avoid visual clutter; on narrow screens collapse links into a menu while preserving the primary action.

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

More components