Granola homepage, decoded: editorial type, floating nav pill

This is iter0's independent analysis of the Granola homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with Granola. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from Granola here, and a live site can change at any time.

A white page with a four-line serif heading, 86px with 80px line height, at the left and three overlapping media boxes at the right that run below the bottom of the first screen. Between the heading and the images are an announcement capsule, a 20px paragraph, and one 199px by 56px action in an olive colour (rgb(91,111,0)). The spec says the cropped lower part of the images is observed, so do not shrink them to fit.

The header is a fixed rounded pill: 1217px by 56px with a fully rounded radius, offset 8px from the top. Identity is at the left, compact links centred and two actions at the right. At the top of the page the pill is transparent; once scrolled it is white, and the primary action changes from pale neutral to olive with white text.

The signature is a workflow section with a compact vertical stage selector of three controls, 174px by 25px each, with the first emphasised, and a larger 600px explanatory column to its right. That column has a 24px serif heading, a short paragraph and a 600px square notes-interface image with a generated-summary inset. Inactive labels are muted grey; the active one is dark.

A high-contrast display serif for large headings, a clean sans (20px for support, 14px for labels and selector items) elsewhere. White ground, charcoal text (rgb(41,41,41)), muted grey for inactive items (rgb(158,158,153)), and olive as the single accent. No other accent colours are evidenced.

At 390px the header is 56px with the identity, one action and a menu button. The heading becomes 48px on four lines, the action is 199px by 48px, and the images move below the text and are cut off at the edges. Desktop links and the secondary action disappear.

The capture shows the selector in a single state, so how switching works is not established. Menu contents and any hover colours are unknown, and the unseen continuation of the cropped images is unknown.

Use one accent colour for the one action that matters and keep everything else in charcoal. A floating pill header that changes from clear to solid is a neat way to keep the nav out of the picture at first and legible when it matters.

We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.