mailwell.app
Design analysis
A very restrained top bar pairs a small product mark and name on the left with three text links on the right. The thin accent rule and generous empty space keep navigation subordinate to the product story.
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/mailwell/88191a7a-ee36-4079-ad0c-b8c821ee63e0-1791525981-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/mailwell/88191a7a-ee36-4079-ad0c-b8c821ee63e0-1791525844093-full.webp - Component on Kage: https://kage.design/component/mailwell-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 copying the reference. Build a minimal desktop-first navigation bar. Use a full-width off-white background, a 1px hot-pink accent rule at the top, and a compact left-aligned brand lockup with a tiny abstract mark plus product name. Align three low-emphasis utility links on the right inside a centered max-width container. Use a neutral sans-serif, 13–14px text, medium weight for the brand and regular weight for links. Keep the bar short, with roughly 20–28px horizontal padding and 16–20px vertical breathing room. Links should gain darker contrast on hover; the brand should return home. On smaller screens, preserve the calm layout by reducing gaps or collapsing links into a compact menu. Never use logos, product names, copy, illustrations, or imagery from the reference.
kage