granola.ai
Design analysis
A restrained white header keeps the brand at left, primary links centered, and the download action at 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/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789141836-0.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/granola-ai/8b8980af-a0f4-4fc3-9371-ab7645007c40-1789138376488-full.webp - Component on Kage: https://kage.design/component/granola-navigation ## Before you start Ask what the user's product and brand are, then apply these principles to that context rather than copying the reference. Build a minimal desktop navigation bar spanning the viewport. Use a white background, a compact brand mark at the left, a small horizontal group of product links centered or slightly right of center, and one understated utility/download action at the far right. Keep the header around 52–64px tall with generous horizontal padding and vertically centered controls. Use a modern sans-serif for navigation at approximately 11–13px, near-black text (#242424), and a very subtle bottom divider (#eeeeea) if needed. Buttons should be compact, pill-shaped, and high contrast only for the primary action; links should have a quiet hover underline or opacity shift. Never: - use logos, product names, copy, illustrations, or imagery from the reference - reproduce the reference navigation labels or exact layout - make the header visually heavy or oversized
kage