# Granola, Blog

AI products · Blog · Custom code · London, UK
Live page: https://www.granola.ai/blog
On Designly: https://designly.sh/s/granola/blog · JSON: https://designly.sh/s/granola/blog?format=json
Site: [Granola](https://designly.sh/s/granola?format=md) (https://www.granola.ai)
Styles: type-led, editorial, light, geometric

## Why it works

Quadrant headlines on an off-white background give the blog an editorial weight. Yellow accents on the hero image and buttons draw attention to product updates, while a sidebar menu keeps categories accessible as users scroll through the content grid.

## Sections, top to bottom

1. [Navigation: "Navigation"](https://designly.sh/s/granola/blog#section-1) (y 8–64px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/0.webp · id sec_496de32e126b4cd1a3205ed645aa02c5
2. [Hero: "Hero"](https://designly.sh/s/granola/blog#section-2) (y 160–980px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/1.webp · id sec_d378b6cc9a9143bd83f4a6f9ef2911b4
3. [Content: "Announcements"](https://designly.sh/s/granola/blog#section-3) (y 980–1491px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/2.webp · id sec_25b4ebdfc5bd43e9ae308eee581c87c6
4. [Content: "Engineering"](https://designly.sh/s/granola/blog#section-4) (y 1491–2032px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/3.webp · id sec_fc06adbf33554234ab2a294944d5d3b0
5. [Content: "All posts"](https://designly.sh/s/granola/blog#section-5) (y 2032–2250px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/4.webp · id sec_e89140314906424c83485177a56f7504
6. [Content: "How sales teams use Granola"](https://designly.sh/s/granola/blog#section-6) (y 2250–3178px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/5.webp · id sec_71f9e7ff551e46b6baa8d40ef8689453
7. [Content: "How I shipped Granola’s San Francisco office in…"](https://designly.sh/s/granola/blog#section-7) (y 3178–3324px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/6.webp · id sec_d74436a394454ee88cb00d192c4b0a74
8. [Content: "Granola Chat just got smarter"](https://designly.sh/s/granola/blog#section-8) (y 3324–4136px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/7.webp · id sec_d404cafc47df4fbabd271c088e1cdb80
9. [Content: "When back becomes broken: how we found a…"](https://designly.sh/s/granola/blog#section-9) (y 4136–4282px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/8.webp · id sec_0b389b9d351641319d3b70cfe0cbe872
10. [Team: "Granola 2.0: A second brain for your team"](https://designly.sh/s/granola/blog#section-10) (y 4282–4630px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/9.webp · id sec_a4ad0ebcafb542478f9286d92276986e
11. [Content: "Granola raises $20M to build the AI notepad…"](https://designly.sh/s/granola/blog#section-11) (y 4630–4776px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/10.webp · id sec_12304ca73dca45b983d6371b8fba111a
12. [Content: "How to evolve a product"](https://designly.sh/s/granola/blog#section-12) (y 4776–4892px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/11.webp · id sec_155415b7b13a453f9bc6e8390075f0f9
13. [Content: "Introducing Granola: the AI-powered notepad for…"](https://designly.sh/s/granola/blog#section-13) (y 4892–5008px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/12.webp · id sec_f1e4d5e0d8bf4cc6aedc2b8a2e365bc2
14. [Footer: "Footer"](https://designly.sh/s/granola/blog#section-14) (y 5168–6703px of 6703) · image: https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/sections/13.webp · id sec_40b757dd9077462d9be94049d69cd52d

## Design tokens

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

## Images

- Desktop (1440×6703): https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/desktop.webp
- Mobile (390×8000): https://designly.sh/media/captures/cap_4568fe25488d44f98cfb3fc86d083106/mobile.webp
- Captured: 2026-10-26

## Other Pages of Granola

- [Home](https://designly.sh/s/granola?format=md) — /
- [Careers](https://designly.sh/s/granola/jobs?format=md) — /jobs
- [Pricing](https://designly.sh/s/granola/pricing?format=md) — /pricing

## Related

- [Suno, Blog](https://designly.sh/s/suno/blog?format=md) — AI products · Blog · Custom code · Cambridge, USA · styles: dark, editorial, type-led, bold, minimal · image: https://designly.sh/media/captures/cap_d100624f62444416ad7131bf504acab4/desktop.webp
- [Sesame, Blog](https://designly.sh/s/sesame/journal?format=md) — AI products · Blog · Custom code · San Francisco, USA · styles: editorial, type-led, minimal, light · image: https://designly.sh/media/captures/cap_3875cf86021f4962b91bbf86ea1e80c0/desktop.webp
- [Replicate, Blog](https://designly.sh/s/replicate/blog?format=md) — AI products · Blog · Custom code · San Francisco, USA · styles: type-led, photo-led, minimal, editorial · image: https://designly.sh/media/captures/cap_09ded9aef1504f3bb7eab6134f205a49/desktop.webp
- [Recraft, Blog](https://designly.sh/s/recraft/blog?format=md) — AI products · Blog · Custom code · styles: type-led, bold, geometric, colourful · image: https://designly.sh/media/captures/cap_be5c60e87f7c4b03a2b051623c4750b0/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.