# Granola, Product

AI products · Product · Custom code
Live page: https://www.granola.ai/ai-note-taker
On Designly: https://designly.sh/p/granola-ai-note-taker · JSON: https://designly.sh/p/granola-ai-note-taker.json
Styles: minimal, clean, modern

## Why it works

Clean and minimal design with clear sections and prominent calls-to-action, suitable for a software product with a focus on functionality and ease of use.

## Sections, top to bottom

1. Navigation: "Navigation" (y 8–64px of 8606) · id sec_b01671d1e965441b8a980b00f7154c80
2. Hero: "Hero · More than just a standard notetaker" (y 128–657px of 8606) · id sec_54e091e53fa84766a5194ba8d3f4819f
3. Hero: "Hero · Looking for an AI notetaker for your meetings?" (y 849–1409px of 8606) · id sec_3f7792bc05e54ec181f54f4d30eb66d6
4. Team: "Team · Notes that go where your work actually happens" (y 1601–2439px of 8606) · id sec_44a7f0aa738645e589eb191352956bed
5. Content: "What's an AI notetaker?" (y 2631–3473px of 8606) · id sec_435fc1affb544f82adf1fce1dd0453fa
6. FAQ: "FAQ" (y 3665–4305px of 8606) · id sec_bfa61a58423044ed8ff21019bbf9deb4
7. Content: "AI notetaker vs AI notepad" (y 4497–5236px of 8606) · id sec_7550d4bc2d394ac1ae04c53c827da444
8. Team: "Team" (y 5428–5910px of 8606) · id sec_1807401db62542039170f090364e3f33
9. FAQ: "FAQ · Frequently asked questions" (y 6102–6831px of 8606) · id sec_ee50023fa7f0402f9c375932ad5bd4d6
10. Footer: "Footer" (y 7071–8606px of 8606) · id sec_e98aef309c054747835d2fbc747f4337

## Design tokens

- Colours: #FFFFFF (background), #72726E (text), #B2C248 (accent), #292929 (muted), #E8E4F3 (surface)
- Fonts: quadrant (display), melange (body)
- Corner radius: 8px
- Spacing: 96px
- Export: https://designly.sh/p/granola-ai-note-taker/tokens.css · https://designly.sh/p/granola-ai-note-taker/tokens.json · https://designly.sh/p/granola-ai-note-taker/tokens.tailwind.css

## Images

- Desktop (1440×8606): https://designly.sh/media/captures/cap_1eaae9e686554428aa9235d2c8e8d8ec/desktop.webp
- Mobile (390×8000): https://designly.sh/media/captures/cap_1eaae9e686554428aa9235d2c8e8d8ec/mobile.webp
- Captured: 2026-10-19

## Related

- [ElevenLabs, Product](https://designly.sh/p/elevenlabs-agents.md) — AI products · Product · Custom code · styles: minimal, clean, modern, bold · image: https://designly.sh/media/captures/cap_11ea7a30bc70459083d8bb669e4a42bb/desktop.webp
- [Cursor, Pricing](https://designly.sh/p/cursor-pricing.md) — AI products · Pricing · Custom code · styles: minimal, bold, dark · image: https://designly.sh/media/captures/cap_93a012f85cde4471a43223bb5bc290e9/desktop.webp
- [Cursor, Home](https://designly.sh/p/cursor.md) — AI products · Home · Custom code · styles: minimal, bold, editorial · image: https://designly.sh/media/captures/cap_1d95169e1ec74c498d76bac820b0f4e0/desktop.webp
- [Granola, Pricing](https://designly.sh/p/granola-pricing.md) — AI products · Pricing · Custom code · styles: minimal, clean, calm · image: https://designly.sh/media/captures/cap_4b54b374cea243a3b9e26258beabbc7d/desktop.webp

Credit: every reference is a real business's site. If it shapes your work, link to the business and to its Designly page.