# Granola, Home

AI products · Home · Custom code
Live page: https://www.granola.ai/
On Designly: https://designly.sh/s/granola · JSON: https://designly.sh/s/granola?format=json
Site: [Granola](https://designly.sh/s/granola?format=md) (https://www.granola.ai)
Styles: minimal, clean, calm

## Why it works

Simple, clean layout with clear headings and concise content, easy to navigate for users. The use of a hero section and prominent call-to-action encourages users to engage with the product.

## Sections, top to bottom

1. [Navigation: "Navigation"](https://designly.sh/s/granola#section-1) (y 8–64px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/0.webp · id sec_84a4c54ad00745c082cae3e721f07700
2. [Hero: "The AI notepad for back-to-back meetings"](https://designly.sh/s/granola#section-2) (y 64–900px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/1.webp · id sec_24a4ebf9d58c48449ae7137c0c5a26a3
3. [Content: "Effortless notes, enhanced instantly"](https://designly.sh/s/granola#section-3) (y 900–1800px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/2.webp · id sec_3e1c49aaeb96438ab63382e7e1830de5
4. [Content: "For the doers"](https://designly.sh/s/granola#section-4) (y 1800–2509px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/3.webp · id sec_0b07d88213bc48e8a099605092046875
5. [Content: "Granola helps you before, during and after your…"](https://designly.sh/s/granola#section-5) (y 2509–2973px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/4.webp · id sec_1e124003e776409fb4a08703145f3546
6. [Features: "Start your meeting prepared"](https://designly.sh/s/granola#section-6) (y 2973–5425px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/5.webp · id sec_04f0d5cdaec34ef2a5505b1025db772d
7. [Content: "Perfect meeting memory"](https://designly.sh/s/granola#section-7) (y 5425–6007px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/6.webp · id sec_c851a610ffd040e5b2d92d8e05a29c3d
8. [Testimonials: "Helping busy people through busy days"](https://designly.sh/s/granola#section-8) (y 6007–7007px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/7.webp · id sec_6242b1ae472d41e9847826fc1d56dc68
9. [Content: "Works everywhere you do, how you do"](https://designly.sh/s/granola#section-9) (y 7027–7332px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/8.webp · id sec_a02433059f63403ba7be353cdcf6a489
10. [Content: "Humans in the room, not bots"](https://designly.sh/s/granola#section-10) (y 7460–8125px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/9.webp · id sec_c9b3a8b7d088484291266904b7e4ff5a
11. [Content: "Works with all meeting apps"](https://designly.sh/s/granola#section-11) (y 8249–8914px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/10.webp · id sec_6a38207754ee49128be3d8de7d295d34
12. [Call to action: "Private by default, ready to share"](https://designly.sh/s/granola#section-12) (y 9038–9703px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/11.webp · id sec_90e640f7f6514dcaa94ae684c0770b3e
13. [Content: "Made for in-person meetings too"](https://designly.sh/s/granola#section-13) (y 9826–10571px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/12.webp · id sec_6438c0d9358d426ea9b36238b963fabf
14. [Content: "Syncs with your calendar"](https://designly.sh/s/granola#section-14) (y 10695–11389px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/13.webp · id sec_d2a908173d0b4b578e1be68262b29c8f
15. [Content: "Use your meeting notes anywhere"](https://designly.sh/s/granola#section-15) (y 11518–12669px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/14.webp · id sec_55463824630b4100b0c1ccb8e18d6cb3
16. [Content: "Unlimited meeting notes for free"](https://designly.sh/s/granola#section-16) (y 12669–13418px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/15.webp · id sec_d10f5c84ba2247a39296839b7325e1bc
17. [Footer: "Footer"](https://designly.sh/s/granola#section-17) (y 13482–14362px of 14362) · image: https://designly.sh/media/captures/cap_6fb9d5c42e38463cba7c8b26bb68cc4a/sections/16.webp · id sec_0dcd643df98e4b21b939fcd0d6c712bf

## Design tokens

- Colours: #FFFFFF (background), #292929 (text), #B2C248 (accent), #0E0F0C (muted), #EAEBE5 (surface)
- Fonts: quadrant (display), melange (body)
- Corner radius: 8px
- Spacing: 112px
- Export: https://designly.sh/s/granola?format=tokens.css · https://designly.sh/s/granola?format=tokens.json · https://designly.sh/s/granola?format=tokens.tailwind.css

## Images

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

## Other Pages of Granola

- [Product](https://designly.sh/s/granola/ai-note-taker?format=md) — /ai-note-taker
- [Pricing](https://designly.sh/s/granola/pricing?format=md) — /pricing

## Related

- [Cursor, Home](https://designly.sh/s/cursor?format=md) — AI products · Home · Custom code · styles: minimal, bold, editorial · image: https://designly.sh/media/captures/cap_1d95169e1ec74c498d76bac820b0f4e0/desktop.webp
- [Anthropic, Home](https://designly.sh/s/anthropic?format=md) — AI products · Home · Webflow · San Francisco, CA, US · styles: minimal, calm, photo-led · image: https://designly.sh/media/captures/cap_41fdabe35d624a8dbe0a75669c5270f4/desktop.webp
- [Copper Tax, Home](https://designly.sh/s/copper-tax?format=md) — Accounting & finance · Home · Webflow · UK · styles: corporate, type-led, dark · image: https://designly.sh/media/captures/cap_55bf88e9472e42868da46c5636484b1c/desktop.webp
- [Caroprese & Company, Home](https://designly.sh/s/caroprese-company?format=md) — Accounting & finance · Home · Custom code · Montclair, NJ, US · styles: dark, bold, corporate, photo-led, type-led · image: https://designly.sh/media/captures/cap_a05813edc76741b8a7128cb6b6c8de93/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.