Granola

• Warm grey #e3e3e3 hairline borders (~1,425 surface refs) — Granola's entire layout is a soft border lattice, not a card stack. The page reads as printed page rather than templated screen.
• Custom Melange typeface (loaded as __melange_3929d6) for body and headlines — Melange is a contemporary editorial serif/sans hybrid that gives the page its quietly literary feel.
• System fallback chain (-apple-system, system-ui) layered alongside Melange — the page degrades gracefully to platform-native type if the webfont fails, which is brand-coherent.
• Editorial blue accent #1d9bf0 (~185 refs) used like a hyperlink rather than a CTA paint — the same blue we associate with publication-grade callouts, deployed with editorial restraint.
• Dark elements (#0e0f0c text, #000000 inversion zones) appear sparingly for contrast — the warm light ground is the page's voice; black is punctuation.
• Spacing scale 2/4/6/8/10/12/16/20/24/32 — incremental 4px rhythm with one 32px jump for section breathing.
• Container ladder 552/672/768/896/1280 — multiple reading widths with a magazine-density feel, perfect for note-taking content.
• No motion library detected — pure CSS transitions only (10 catalogued), reinforcing the page's calm, deliberate pacing.
• Custom breakpoints sm=480 (lowered from 640) — Granola optimises for mobile reading earlier than typical Tailwind defaults.

• How to make an AI tool feel handmade — Granola's warm grey lattice, Melange typography, and editorial blue make the page feel like a journalist's open notebook. Every choice telegraphs craft over automation.
• Custom serif/hybrid type as a positioning signal — Melange isn't a free Google Font. Choosing to license a contemporary editorial typeface tells your audience you take typography seriously, even before they read a word.
• Editorial blue as a hyperlink, not a CTA — Granola uses #1d9bf0 like a footnote callout in a magazine, not like a 'subscribe now' button paint. Steal the discipline of treating accent colour as link semantic, not call-to-action signal.

• Don't lift the system-font fallback discipline without committing to Melange (or equivalent) as the primary — Granola's page is held together by the custom typeface; the fallback is graceful degradation, not the brand.
• Don't paint surfaces in the editorial blue — the colour's power is in its hyperlink-adjacent meaning. Filling a button background in #1d9bf0 collapses the brand into 'AI tool with a blue button'.
• Don't tighten the spacing scale below 2/4/6/8 — Granola's page rhythm depends on breathing room that feels like notebook margins.

The page feels like opening a beautifully kept journal — every section is a notebook page, every accent is a footnote marker, every transition is the deliberateness of someone turning a page rather than swiping a screen. Granola understood that AI-meeting-notes is a category that can easily slip into Big Brother territory (we listen to your meetings, we transcribe everything, we have all your secrets). The warmth of the design is the antidote — it tells you this tool is on your side, an editorial assistant rather than surveillance.

• Direct heir to the editorial-AI lineage that Anthropic warmth and Are.na minimalism touch on — Granola is the meeting-notes member of that family.
• Standing shoulder-to-shoulder with the modern AI-productivity peer cohort (Otter, Limitless, Rewind) — but Granola's editorial restraint sets it apart from the more chrome-heavy competitors.
• Part of the warm-editorial tech lineage that includes parts of Substack's design, Read.cv, and the broader 2024+ 'humanist software' aesthetic — Granola carries that family into the AI-tools category.