esigna.app
Design analysis
A restrained navigation keeps the brand and primary links visible while making the dark Get started button the clear action.
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/esigna/76bcd194-d16d-4973-9e2e-b189e2506cae-1791007553-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/esigna/76bcd194-d16d-4973-9e2e-b189e2506cae-1791007443637-full.webp - Component on Kage: https://kage.design/component/esigna-navigation ## Before you start Ask what the user's product is, who it serves, and what its brand personality and primary conversion action are. Apply the principles below to that product rather than reproducing this reference. Build a minimal desktop-first SaaS navigation bar. Use a centered max-width content row with the brand mark at left, four to six low-emphasis text links in the middle, and a compact sign-in link plus one dark pill-shaped primary button at right. Keep the header about 56px tall with generous horizontal padding, near-white warm background (#f8f7f4), dark ink text (#181817), muted gray secondary links (#686762), and a 1px warm border or almost invisible divider. Use a clean sans-serif at 12–14px; the primary button should be 14px high in visual weight, black with white text, 999px radius, and subtle hover inversion or lift. Align everything to one baseline and collapse links behind a menu on narrow screens. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage