# Granola, Home

AI products · Home · Custom code
Live page: https://www.granola.ai/
On Designly: https://designly.sh/p/granola · JSON: https://designly.sh/p/granola.json
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" (y 8–64px of 14362) · id sec_84a4c54ad00745c082cae3e721f07700
2. Hero: "The AI notepad for back-to-back meetings" (y 64–900px of 14362) · id sec_24a4ebf9d58c48449ae7137c0c5a26a3
3. Content: "Effortless notes, enhanced instantly" (y 900–1800px of 14362) · id sec_3e1c49aaeb96438ab63382e7e1830de5
4. Content: "For the doers" (y 1800–2509px of 14362) · id sec_0b07d88213bc48e8a099605092046875
5. Content: "Granola helps you before, during and after your…" (y 2509–2973px of 14362) · id sec_1e124003e776409fb4a08703145f3546
6. Features: "Start your meeting prepared" (y 2973–5425px of 14362) · id sec_04f0d5cdaec34ef2a5505b1025db772d
7. Content: "Perfect meeting memory" (y 5425–6007px of 14362) · id sec_c851a610ffd040e5b2d92d8e05a29c3d
8. Testimonials: "Helping busy people through busy days" (y 6007–7007px of 14362) · id sec_6242b1ae472d41e9847826fc1d56dc68
9. Content: "Works everywhere you do, how you do" (y 7027–7332px of 14362) · id sec_a02433059f63403ba7be353cdcf6a489
10. Content: "Humans in the room, not bots" (y 7460–8125px of 14362) · id sec_c9b3a8b7d088484291266904b7e4ff5a
11. Content: "Works with all meeting apps" (y 8249–8914px of 14362) · id sec_6a38207754ee49128be3d8de7d295d34
12. Call to action: "Private by default, ready to share" (y 9038–9703px of 14362) · id sec_90e640f7f6514dcaa94ae684c0770b3e
13. Content: "Made for in-person meetings too" (y 9826–10571px of 14362) · id sec_6438c0d9358d426ea9b36238b963fabf
14. Content: "Syncs with your calendar" (y 10695–11389px of 14362) · id sec_d2a908173d0b4b578e1be68262b29c8f
15. Content: "Use your meeting notes anywhere" (y 11518–12669px of 14362) · id sec_55463824630b4100b0c1ccb8e18d6cb3
16. Content: "Unlimited meeting notes for free" (y 12669–13418px of 14362) · id sec_d10f5c84ba2247a39296839b7325e1bc
17. Footer: "Footer" (y 13482–14362px of 14362) · 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/p/granola/tokens.css · https://designly.sh/p/granola/tokens.json · https://designly.sh/p/granola/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

## Related

- [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
- [Anthropic, Home](https://designly.sh/p/anthropic.md) — AI products · Home · Webflow · San Francisco, CA, US · styles: minimal, calm, photo-led · image: https://designly.sh/media/captures/cap_41fdabe35d624a8dbe0a75669c5270f4/desktop.webp
- [Laravel, Home](https://designly.sh/p/laravel.md) — Developer tools · Home · Custom code · styles: type-led, minimal, corporate, geometric · image: https://designly.sh/media/captures/cap_b506e2205795428eb7f7a65eb71b4041/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

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