# Granola homepage design spec (free) - Site: granola.ai - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Granola. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Granola's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — editorial headline with layered media - **Evidence provenance:** Public-page pixels and computed styles at `https://www.granola.ai/`, desktop **1440 × 900**, scroll **0**, and same-page phone resize **390 × 844**, scroll **0**. Both captures show the live page at the same URL; no redirect is evidenced. - **CRAFT ARCHETYPE:** product-UI-led ## The big idea Set a large, quiet editorial statement against an asymmetric product-media stack. Keep the text left and the overlapping imagery right on desktop; at phone width, put the text first and let imagery begin below it. Preserve the observed crop rather than implying the media ends at the viewport edge. ## Layers At desktop, the hero section is **1280 × 900px** at **x=80**, with **120px** top and **40px** horizontal padding. The text begins at **x=120**. Its announcement capsule is **235 × 32px** at **(120,205)**; the heading is **562 × 321px** at **(120,269)**. Supporting copy starts at **y=623**. The primary action is **199 × 56px** at **(120,711)**; platform metadata begins at **(152,797)**. On the right, three overlapping media boxes measure **378 × 687px** at **(795,187)**, **530 × 662px** at **(978,92)** and **461 × 819px** at **(992,228)**. Their content includes interface and meeting imagery, but do not reproduce its text or identities. Media extends below the 900px viewport: that lower portion is an observed crop, and its unseen details are unknown. ## Type Use a high-contrast display serif for the **86.4px / 80.352px** regular-weight heading, with **−1.728px** tracking. Supporting text uses a sans serif at **20px / 28px**. Keep the heading’s measured four-line desktop block and generous breathing room. ## Colour Use a white ground, charcoal typography, and restrained olive emphasis. Measured CTA fill is **rgb(91,111,0)**; announcement surface is **rgb(247,247,242)**. Keep media visually richer than the text field without inventing specific imagery. ## States and motion No hero hover behavior or motion is established. Maintain the resting overlap and crop; do not add animation. ## Do NOT copy or add Do not reuse source wording, logo, product identities, UI text, faces, or claims. Do not infer media content outside the captured area. ## Checks you can run At desktop, verify section width **1280px**, inset **80px**, text start **x=120**, heading box **562 × 321px**, CTA **199 × 56px**, and three overlapping media boxes at the measured positions. Confirm the stack continues beyond the viewport. ## Phone at 390px At **390 × 844**, header height is **56px** and hero section is **390 × 539px**. Text uses **16px** side padding and **96px** top padding: announcement at **(16,96)**, size **235 × 32px**; heading at **(16,160)**, size **312 × 179px**, **48px / 44.64px**, **−0.96px** tracking, four lines. Supporting copy begins at **y=371**, **16px / 20px**; CTA is **199 × 48px** at **(16,443)**; metadata begins at **(48,521)**. Desktop side-by-side media moves below the text: the next media section starts at **y=587**, while image boxes already enter from **y=553**. Visible boxes include **215 × 391px** at **x=−116**, **286 × 358px** at **(252,572)**, and **215 × 382px** at **(281,786)**. They are cut off by the phone viewport; unseen continuation is unknown. Desktop links are replaced by a compact download action and menu control. --- # Navigation — centered desktop pill, compact phone bar - **Evidence provenance:** Public-page pixels and computed styles at `https://www.granola.ai/`: desktop **1440 × 900**, scroll **0**, with scrolled captures at **900**, **1800**, and **2700**; phone **390 × 844**, scroll **0**. The URL remains `https://www.granola.ai/` in the supplied captures; no redirect is evidenced. - **CRAFT ARCHETYPE:** type-led ## The big idea Build a fixed, quiet navigation system around a rounded desktop pill. Keep identity at the left, compact links centered, and actions at the right. On phone, retain the identity and one action while replacing the desktop link group with a menu control. Treat the measured layouts and state colors as evidence; menu contents and unobserved interactions are unknown. ## Layers The desktop fixed header is **1440 × 56px**, offset **8px** from the top. Its pill begins at **x=112**, measures **1217 × 56px**, has **8px** horizontal padding, and a **9999px** radius. The identity link measures **120 × 30px** at **(121,21)**. The center link group occupies roughly **x=614–908**; individual link targets are **38px** high with **12px** horizontal padding. Text is **14px / 24px**, tracking **0.14px**. Right-side actions begin at **x=1097**: the secondary target is **104 × 38px**, and the primary is **115 × 40px** at **(1205,16)**. At the top capture the pill is transparent; scrolled captures show a white surface, with the header staying fixed at the same top position. At phone width, header and navigation span **390 × 56px**, with **16px** horizontal padding. The identity link is **116 × 30px** at **(16,13)**. The action is **115 × 40px** at **(227,8)**; the menu button is **40 × 40px** at **(342,8)**. Desktop links and the secondary action are not visible in this phone capture. ## Type Use a restrained sans serif. Center the **14px** link labels vertically in their **38px** targets; preserve spacing between identity, links, and actions. ## Colour Use charcoal text. The desktop pill is transparent at scroll **0** and white in the supplied scrolled captures. The primary action is a pale neutral at the top and on phone, and olive with white text in scrolled desktop captures. The measured olive is **rgb(91,111,0)**. Do not extrapolate other palettes. ## States and motion The pill reports a **0.3s ease-out** background, border, and shadow transition. Link transitions report **0.2s**; the primary action reports **0.3s**. Hover appearance and menu-open state are unknown. ## Do NOT copy or add Do not reproduce source marks, labels, branding, or destination behavior. Do not invent a dropdown, drawer layout, or hover effect. ## Checks you can run At **1440px**, check fixed header **56px**, top offset **8px**, pill **1217 × 56px** at **x=112**, logo-link box **120 × 30px**, and action **115 × 40px**. Compare transparent top and white scrolled surface. At **390px**, check **16px** inset, **115 × 40px** action, **40 × 40px** menu, and hidden desktop link group. --- # Signature component — three-stage meeting workflow - **Evidence provenance:** Public-page pixels and computed styles at `https://www.granola.ai/`, desktop **1440 × 900**, scroll **2700** (`below-2700`). The capture includes the beginning of a distinct workflow section below the hero; the preceding large heading is cropped behind the fixed navigation and is not part of this component. No redirect is evidenced. - **CRAFT ARCHETYPE:** product-UI-led ## The big idea Pair a compact vertical stage selector with a larger explanatory column and product demonstration. This is an interactive workflow treatment, not a generic feature grid. The supplied capture shows three controls, with the first visually emphasized. Rebuild its hierarchy and whitespace, not its wording or sample data. ## Layers The section bounding box is **1280 × 2452px**, at **(80,273)** in the supplied scrolled measurement, with **40px** horizontal inset. The selector begins at **x=120**; the three measured control boxes are each **174 × 25px**, with top positions **321**, **362**, and **403** in the measurement data. The right column begins at **x=720** and measures **600px** wide. Its heading box is **600 × 25px**, at **y=321**; the supporting paragraph is **448 × 72px**, at **y=354**. The demonstration image is **600 × 600px** at **(720,450)**. It depicts a notes interface with a title region, metadata, note-entry area, and an inset generated-summary panel. At the captured scroll position, the visible screenshot places the selector and heading around **y=230** and the image around **y=320**; the image continues past the viewport bottom. Do not infer unseen content. ## Type Use a display serif for the right-column heading at **24px / 25.2px**, with **−0.24px** tracking. Use sans-serif supporting text at **16px / 24px** and selector labels at **14px / 18px**, with **0.14px** tracking. Keep active text dark and inactive labels muted. ## Colour Keep a white or near-white ground and charcoal text. Measured primary text is **rgb(41,41,41)**; inactive selector text is **rgb(158,158,153)**. Avoid decorative blocks or accent colors not evidenced. ## States and motion Three stage controls are visible; one is emphasized. Their CSS reports a **0.5s** color, background, and border transition. Other selected-stage content, click result, keyboard state, and animation are unknown. ## Do NOT copy or add Do not reproduce source copy, names, logos, interface wording, meeting details, or claims. Do not fabricate additional stages or assert unseen tab behavior. ## Checks you can run Verify section width **1280px**, inset **40px**, selector x **120px**, three **174 × 25px** controls, measured row tops **321/362/403px**, right column x **720px**, heading **24px**, and image **600 × 600px** at **(720,450)**. Preserve the visible viewport crop and do not mark content below it absent.