granola.ai/

Granola

granola.ai/

Granola is an AI notepad for people in back-to-back meetings that transcribes audio captured directly from a computer's microphone and speakers rather than joining calls as a visible bot participant. Its stated differentiator, spelled out on the page - 'Notes, actions and memory. Without a meeting bot.' - is a direct jab at competitors that require a bot to join. It structures its pitch around three phases (before, during, after a meeting), including pre-meeting 'Briefs' pulled from calendar context and prior conversations. Trust signals come from named tech-industry endorsers rather than generic logos: Linear's CEO Karri Saarinen and Vercel's CEO Guillermo Rauch are quoted by name alongside a company logo wall that includes Figma, Intercom, and Brex.

Visit website

Category

Productivity & Collaboration

Style

Light Colorful

Stack

Next.js Tailwind CSS

Fonts

quadrantmelange

Palette

Meta title

Granola — The AI Notepad for back-to-back meetings

Sections

Updated

Oct 10, 2026

Granola's landing page, section by section

Each section below is cropped straight from Granola's live page — useful references for productivity & collaboration landing page design.

Granola design review: how the homepage is built

The Granola homepage is about 14,310px tall on desktop, a long vertical scroll that moves from a white hero to a three-row reassurance list, a dark logo wall, a before, during and after feature stack, a lime chat block, a dark quote band, a feature list, a pale connector section, a collage-backed pricing card and a footer ending in an oversized wordmark. Colour leans on olive and lime (#5b6f00, #c3ce4b) against off-white and charcoal, with landscape photographs behind app windows. Headlines use a serif display face (quadrant) with melange for body text.

Above the fold

The nav has five links and a "Download" pill. A "New" badge announces "Granola for Apple Watch". The huge four-line serif headline, "The AI notepad for back-to-back meetings", sits above "Notes, actions and memory. Without a meeting bot." and an olive "Download for free" button. On the right, an app window titled "Q3 GTM sync" overlaps lime, black and halftone panels, with a small video call tile.

Reassurance list, logo wall and lifecycle stack

"Effortless notes, enhanced instantly." introduces three icon rows. A charcoal band, "Trusted by teams we admire", holds a grid of twelve logos, including PostHog and Figma. Then "Granola helps you before, during and after your meetings." runs down a right-hand column of three steps, "Start your meeting prepared", "Give your full attention" and "Post-meeting admin, done", each with a window over a landscape photo.

Chat block, testimonials and feature list

A full-bleed lime block labelled "Granola Chat" sets "Perfect meeting memory" beside a white prompt box with a "Customer calls" chip. Below it, "Helping busy people through busy days" appears on charcoal with outlined quote cards from Linear and Andreessen Horowitz. The "Works everywhere you do, how you do" feature list has hairline-separated rows, "Humans in the room, not bots", "Works with all meeting apps".

Closing section and footer

A pale section, "Use your meeting notes anywhere", has a "Download for free" button and a scrolling strip of white logo tiles. The final card, "Unlimited meeting notes for free", sits over lime and halftone art with two buttons. The footer has four text columns ("Features", "Product", "Company", "Resources"), three social icons and a huge "granola" wordmark spanning the full width.

On mobile

At 390px the page is about 12,122px tall. The hero buttons change to "Download for iOS" and "Get the Desktop app", stacked above the app window. The logo wall becomes four rows of three, and feature rows stack into text above a shrunken image, with "Download for iOS" repeated. Quote cards scroll sideways, footer links sit in two columns, and the wordmark still fills the width.

Worth borrowing

Photographing landscapes behind each product window makes repeated screenshots feel varied while keeping one consistent frame.
Placing a primary download button in the hero, the feature list, the connector section and the pricing card keeps one action in reach throughout a very long page without scrolling back.
Closing the footer with a full-width wordmark turns the last screen into a brand moment.