---
version: alpha
name: "Granola"
website: "https://www.granola.ai"
description: >-
  An AI meeting-notes assistant whose marketing page leans warm-indie — a 68px Quadrant serif-flavored display headline ("The AI notepad for people in back-to-back meetings") in near-black on an off-white #f7f7f2 canvas, with a single olive-green CTA pill ("Download for Mac") in oat green #5b6f00. The system runs two typefaces from KMR's foundry — Quadrant serif for display and Melange Grotesk for body — and an entire palette named after oats, including oat-green, oat-yellow, oat-pink, and oat-purple. Two-up note mockups in pill-rounded cards sit beside cropped meeting-participant photographs, and a yellow highlighter mark colors the verbs ("transcribes", "enhances") inline.

seo:
  title: "Granola Design System for React — oat green on warm cream, Quadrant + Melange, 18 components"
  metaDescription: "Granola's marketing system pairs Quadrant serif display with Melange Grotesk body, an olive-oat-green primary CTA, and a yellow-highlighter inline accent on a warm cream canvas. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Oats-named palette — Granola wires every neutral and accent as --color-oats-* including oat-green, oat-yellow, oat-pink, oat-purple, and oat-neutral-50 to 900"
    - "Yellow highlighter inline accent — verbs like transcribes and enhances are wrapped in an oat-yellow #febe29 highlight strip, like marked text in a notepad"
    - "Quadrant serif for display, Melange Grotesk for body — two KMR foundry faces, a serif-sans pairing rather than the single-sans dev-tools convention"
    - "Olive-oat-green CTA — the Download for Mac primary pill sits at #5b6f00, a saturated olive that reads warm-natural rather than corporate green"
    - "Warm cream surface ladder — canvas #f7f7f2 with oat-neutral-100 #f7f7f2 and oat-neutral-200 #eaebe5 cards; pure white is reserved for raised tile surfaces only"
  tags:
    - "AI & LLM Platforms"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Granola's marketing page is the only entry in the AI productivity category that commits to a warm-indie aesthetic instead of the standard dark-mode dev-tool look. The hero centers a 68px Quadrant serif-flavored display headline ("The AI notepad for people in back-to-back meetings") in near-black on a warm cream canvas, with a single olive-green pill CTA ("Download for Mac") beneath. To the sides of the heading, cropped photographs of meeting participants sit flush against the page edges, as if the visitor is already inside the call. Verbs in the body copy ("transcribes", "enhances") are wrapped in a yellow highlighter mark, like text marked in a paper notepad.

    The DESIGN.md file captures the system as a token spec for React tooling. Inside: 20 color tokens drawn from the oats-named palette — Granola wires every neutral and accent as --color-oats-* (oat-green-300 through oat-green-500, oat-yellow-200/300, oat-pink-100/200, oat-purple-100/200, oat-neutral-50 through 900) — organized into a warm cream surface ladder, an olive-oat-green brand voltage, and a yellow-highlighter inline accent. 12 typography tokens span Quadrant serif at 48-68px for display and Melange Grotesk at 13-24px for body, plus a system-ui fallback layer for nested-tweet quotes. 18 components cover the olive CTA pill, the cream pill-rounded note tile, the yellow-highlight inline accent, the warm hairline card, and the standard top nav.

    Feed this file to an AI coding tool and it reproduces the specific moves: warm cream canvas instead of pure white, olive-oat-green CTA instead of cobalt or violet, Quadrant + Melange pairing instead of a single sans, yellow highlighter inline accent on action verbs, and pill-rounded note tiles with cropped human photographs. The most distinctive token group is the oats namespace itself — every neutral is named with a food metaphor, including the typescale custom-property prefix --oats- for fill, ink, surface, and stroke roles. Borrow it freely; the only move to think twice about is the cropped-photograph hero, which depends on the brand having access to staged meeting imagery.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.granola.ai"
      title: "Granola — official site"
      description: "Granola's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Granola's primary brand color?"
      answer: "Granola's brand voltage is olive-oat green #5b6f00, wired into the CSS as --oats-fill-accent, --color-oats-green-500, and --color-fill-accent. It fills the single primary CTA pill (Download for Mac) and surfaces as the accent-strong tone in product chrome. A lighter oat-green variant #b2c248 (oat-green-300) carries 81 occurrences as a soft accent background and ring color; the brightest variant #d1e043 (oat-green-200) appears 20 times inside gradient stops. The yellow accent #febe29 (oat-yellow-200) is the second voltage — the yellow highlighter mark wrapped around action verbs in the body copy. Together the olive and the yellow form the brand's two-tone identity."
    - id: "typography"
      title: "What typefaces does Granola use, and what should I use as substitutes?"
      answer: "Granola runs two typefaces from KMR's foundry. Quadrant carries the display tier — the 68px hero headline, the 48px section headings, the 36px section sub-headings, all at weight 400 with -1.02px to -0.72px negative tracking. Melange Grotesk carries the body tier — body copy at 14-16px, sub-headings at 24px, button labels at 13-14px, all at weight 400 with a small 0.01em letter-spacing. A third nested layer of system-ui sans appears inside nested-tweet quotes (referenced as -apple-system, system-ui, Segoe UI, Roboto). The closest open-source substitutes are Fraunces for Quadrant display and Geist or Inter for Melange body. To preserve the warm-indie feel, the serif display is the move worth keeping."
    - id: "highlighter-accent"
      title: "What is the yellow-highlighter inline accent?"
      answer: "Granola wraps action verbs in the body copy ('transcribes', 'enhances', 'helps') with a yellow highlighter mark — a horizontal oat-yellow #febe29 strip with rounded ends that sits behind the text like text marked in a paper notepad. The effect is rendered as a CSS background-color on an inline span, not as a true highlight gesture, but the visual reads as the marker stroke from a Sharpie highlighter. The accent is reserved for verbs only — never for nouns or adjectives — and never appears on more than one verb per sentence. Across the captured page it appears six times. It is the brand's clearest visual gesture toward the paper-notepad metaphor that the product name (granola, a textured handheld thing) plays on."
    - id: "oats-namespace"
      title: "Why is every CSS variable prefixed with --oats-?"
      answer: "The brand's metaphor leans into the granola namesake — the design system's CSS custom-property scale is wired entirely under --oats-* namespaces. Every neutral has both a numbered variant (--color-oats-neutral-50 through --color-oats-neutral-900) and a semantic role (--oats-ink-primary, --oats-fill-accent, --oats-surface-raised, --oats-border-hairline). Color families are oats-green (300-500), oats-yellow (200-300), oats-pink (100-200), oats-purple (100-200), oats-red (100-400), oats-gold (100), oats-blue (200). The naming is functional — the build pipeline maps oats-* into a flat token system — but the choice to surface a food metaphor inside the CSS itself is the system's most explicit identity gesture."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own indie AI-tool marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Granola's specific moves: warm cream canvas at #f7f7f2 instead of pure white, olive-oat-green CTA pill at #5b6f00 instead of cobalt or violet, Quadrant + Melange typeface pairing instead of a single sans, yellow-highlighter inline accent on action verbs, pill-rounded note tiles, and the oats-namespaced color tokens. Every hex, font, radius, and spacing value is a quoted scalar ready to paste into Tailwind config or CSS variables. The single most distinctive move to borrow is the warm-cream surface ladder — pure-white surfaces lifted off a slightly-warmer canvas — which gives the page its indie-papery feel without requiring photographic assets."

mockups:
  - "marketing-hero"
  - "chat-conversation"

colors:
  primary: "#5b6f00"
  primary-mid: "#788c15"
  primary-soft: "#b2c248"
  primary-bright: "#d1e043"
  accent-yellow: "#febe29"
  accent-pink: "#ff91e0"
  accent-purple: "#cebef8"
  ink: "#292929"
  ink-soft: "#454745"
  ink-muted: "#72726e"
  ink-quiet: "#818179"
  ink-strong: "#0e0f0c"
  canvas: "#f7f7f2"
  surface-1: "#eaebe5"
  surface-raised: "#ffffff"
  surface-tint: "#e5eacd"
  hairline: "#d5d5d2"
  hairline-soft: "#e3e3e3"
  danger: "#e95d3d"
  danger-strong: "#bd4a30"

typography:
  display-xl:
    fontFamily: "Quadrant, \"KMR Quadrant\", Georgia, serif"
    fontSize: 68px
    fontWeight: 400
    lineHeight: 68px
    letterSpacing: "-1.02px"
  display-lg:
    fontFamily: "Quadrant, \"KMR Quadrant\", Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: "-0.72px"
  display-md:
    fontFamily: "Quadrant, \"KMR Quadrant\", Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: "-0.54px"
  heading-md:
    fontFamily: "Quadrant, \"KMR Quadrant\", Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0
  heading-sm:
    fontFamily: "Quadrant, \"KMR Quadrant\", Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: "-0.3px"
  sub-heading:
    fontFamily: "\"KMR Melange Grotesk\", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 32px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"KMR Melange Grotesk\", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: "0.2px"
  body-md:
    fontFamily: "\"KMR Melange Grotesk\", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "0.16px"
  body-sm:
    fontFamily: "\"KMR Melange Grotesk\", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.14px"
  caption:
    fontFamily: "\"KMR Melange Grotesk\", system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: "0.13px"
  button-md:
    fontFamily: "\"KMR Melange Grotesk\", system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.13px"
  quote-sans:
    fontFamily: "-apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "6px"
  lg: "8px"
  xl: "12px"
  pill: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "6px"
  base: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-raised}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
  button-primary-hover:
    backgroundColor: "{colors.primary-mid}"
    textColor: "{colors.surface-raised}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
  button-secondary:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
  announcement-pill:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    height: "32px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px 4px"
    height: "28px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  sub-heading-line:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.sub-heading}"
    padding: "0px 56px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  highlight-mark:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: "2px 4px"
  note-tile:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "16px 20px"
    borderColor: "{colors.hairline-soft}"
  card:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "16px 20px"
    borderColor: "{colors.hairline-soft}"
  text-input:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.hairline}"
  testimonial-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.quote-sans}"
    rounded: "{rounded.none}"
    padding: "16px 20px"
    borderColor: "{colors.primary-soft}"
  badge-soft:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.primary-mid}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "4px 12px"
    height: "24px"
---

## Overview

Granola's marketing page is the only entry in the AI productivity category that commits to a warm-indie aesthetic. **Warm-cream surface ladder.** The page floor is `{colors.canvas}` (#f7f7f2), a warm off-white cream, not pure #ffffff. Cards lift off this canvas using `{colors.surface-raised}` (#ffffff) — pure white reserved for the raised tile surfaces — and the result is a paper-on-paper depth where the elevation comes from the warmth difference between the cream floor and the white tile, not from a drop shadow. Where Notion's white-on-white pages lean industrial and Reflect's dark-mode canvas leans nocturnal, Granola sits in a third position: warm, papery, indie.

The chromatic system is built around two voltages, both named after grain. **Olive-oat-green** (`{colors.primary}` — #5b6f00) carries the single primary CTA pill ("Download for Mac") and surfaces in product chrome accents. **Oat-yellow** (`{colors.accent-yellow}` — #febe29) is the yellow-highlighter inline accent that wraps action verbs in the body copy ("transcribes", "enhances") — a horizontal yellow strip with rounded ends that reads as marker stroke from a paper notepad. Both voltages are warm-natural rather than corporate; together they form the brand's two-tone identity. The supporting tones — `{colors.accent-pink}` (#ff91e0), `{colors.accent-purple}` (#cebef8) — live almost exclusively inside the colorful gradient stops on the in-product feature mockups.

Typography splits the work across two KMR foundry typefaces. **Quadrant** — a serif-flavored display with subtle calligraphic motion — carries the hero headline (68px), section headings (48px), and sub-section headings (36px), all at weight 400. **Melange Grotesk** — a neutral grotesk sans — carries body copy, captions, and button labels, all at weight 400 or 500. Where Stripe runs Sohne across every tier and Vercel runs Geist across every tier, Granola runs the serif-sans pairing — a print-media move that gives the editorial sections their literary warmth without breaking the digital chrome.

**Key Characteristics:**
- Two-voltage palette — olive-oat-green (`{colors.primary}`) for CTAs and yellow-highlighter `{colors.accent-yellow}` for inline verb accents; both warm-natural rather than corporate.
- Oats namespace — every neutral and accent wired as `--color-oats-*` and `--oats-*` in CSS (oat-green, oat-yellow, oat-pink, oat-purple, oat-neutral-50 through 900); a food metaphor surfaced inside the build system itself.
- Quadrant serif + Melange Grotesk pairing — print-media display-and-body split rather than the single-sans dev-tools convention.
- Warm cream floor — `{colors.canvas}` (#f7f7f2) is the page tone; pure white is reserved for raised tile surfaces.
- Yellow-highlighter mark — `{colors.accent-yellow}` background with rounded-corner end strips wrapped around action verbs only (six occurrences on the captured page).
- Pill-rounded buttons at `{rounded.pill}` (9999px) for every CTA and chip; rectangular cards at `{rounded.xl}` (12px) for note tiles; small-step radii (4-8px) for chrome.
- Cropped meeting-participant photographs flush against the hero edges — the brand is selling a presence-not-bots positioning, and the human imagery makes that explicit.
- Section sub-heading uses Melange Grotesk weight 300 at 24px — the single weight-300 instance in the system, reserved for the tagline beneath the hero.

## Colors

### Brand

- **Olive-Oat Green** (`{colors.primary}` — #5b6f00): frequency 4. Used as bg (4). Wired as `--oats-fill-accent`, `--color-oats-green-500`, `--color-fill-accent`. The primary CTA fill — saturated olive that reads warm-natural rather than corporate green. Carries the Download for Mac pill in the hero.
- **Oat-Green Mid** (`{colors.primary-mid}` — #788c15): frequency 7. Used as bg (1), border (6). Wired as `--oats-ink-accent`, `--color-oats-green-400`. The hover state for the primary CTA and the accent-text color used on badges.
- **Oat-Green Soft** (`{colors.primary-soft}` — #b2c248): frequency 81. Used as bg (81). Wired as `--color-oats-green-300`, `--oats-border-focus`. The soft accent background — appears as the focus-ring color on form fields and as a soft surface tint on accent badges.
- **Oat-Green Bright** (`{colors.primary-bright}` — #d1e043): frequency 20, all inside gradient stops. Wired as `--color-oats-green-200`. The brightest oat-green variant — appears exclusively in gradient stops on the in-product feature mockups.

### Accent

- **Oat-Yellow** (`{colors.accent-yellow}` — #febe29): frequency 26. Used as bg (6), gradient (20). Wired as `--color-oats-yellow-200`. The yellow-highlighter inline accent — wrapped around action verbs in the body copy like a marker stroke from a paper notepad.
- **Oat-Pink** (`{colors.accent-pink}` — #ff91e0): frequency 20, all inside gradient stops. The pink end-stop on multi-color feature illustrations.
- **Oat-Purple** (`{colors.accent-purple}` — #cebef8): frequency 20, all inside gradient stops. Wired as `--color-oats-purple-200`. The purple end-stop on multi-color feature illustrations.

### Text

- **Ink** (`{colors.ink}` — #292929): frequency 78. Used as text (50), gradient (28). Wired as `--oats-ink-primary`, `--color-content-primary`, `--color-ink-primary`. The dominant heading and nav text tone.
- **Ink Soft** (`{colors.ink-soft}` — #454745): frequency 58. Used as text (58). Wired as `--color-secondary`, `--oats-ink-secondary-strong`. The secondary running-text tone.
- **Ink Muted** (`{colors.ink-muted}` — #72726e): frequency 30. Used as text (30). Wired as `--oats-ink-secondary`, `--color-tertiary`. The tertiary text tone — caption rows, sub-headings, footer metadata.
- **Ink Quiet** (`{colors.ink-quiet}` — #818179): frequency 25. Used as text (25). Wired as `--color-oats-neutral-500`, `--oats-surface-overlay`. The quietest text tone, reserved for muted metadata.
- **Ink Strong** (`{colors.ink-strong}` — #0e0f0c): frequency 580. Used as text (580). Wired as `--color-primary`. The dominant body-text tone — runs every paragraph in the captured body sections.

### Surface

- **Canvas** (`{colors.canvas}` — #f7f7f2): the page floor. Wired as `--color-surface`, `--color-oats-neutral-100`, `--oats-fill-input-disabled`. A warm cream — not pure white — that gives the system its paper-on-paper depth.
- **Surface-1** (`{colors.surface-1}` — #eaebe5): frequency 1042. Used as bg (19), border (1023). Wired as `--oats-fill-soft-opaque`, `--color-oats-neutral-200`, `--color-input`. The soft accent surface and the dominant hairline tone.
- **Surface Raised** (`{colors.surface-raised}` — #ffffff): frequency 88. Used as bg (76), text (10), gradient (2). Pure white reserved for the raised note tiles and elevated cards.
- **Surface Tint** (`{colors.surface-tint}` — #e5eacd): frequency 2. Used as bg (2). Wired as `--color-oats-green-100`, `--oats-surface-tint-accent`. The pale oat-green tint used on accent badges and the announcement pill.

### Hairline

- **Hairline** (`{colors.hairline}` — #d5d5d2): frequency 105. Used as border (105). Wired as `--color-gray-300`, `--oats-fill-soft-opaque-hover`, `--color-stroke`. The default card-outline tone.
- **Hairline Soft** (`{colors.hairline-soft}` — #e3e3e3): frequency 1042. The lightest hairline tier — used on the note-tile borders and the page-section dividers.

### Semantic

- **Danger** (`{colors.danger}` — #e95d3d): frequency 6. Used as bg (6). Wired as `--oats-fill-danger`, `--color-oats-red-300`. The warm-red destructive-action tone.
- **Danger Strong** (`{colors.danger-strong}` — #bd4a30): frequency 6. Used as border (6). Wired as `--oats-fill-danger-hover`, `--oats-ink-danger`. The hover state for the danger action.

## Typography

### Font Families

The system runs two KMR foundry typefaces. **Quadrant** carries every display tier — the 68px hero headline, the 48px section headings, the 36px sub-section headings, and the 24-20px in-card serif accents. Quadrant is a serif-flavored display with subtle calligraphic motion; the calligraphic edges are most visible at the 68px hero size where the terminals and stress angles read clearly.

**Melange Grotesk** carries every body tier — body copy at 14-16px, sub-headings at 24px, button labels at 13-14px, caption rows at 13px. It is a neutral grotesk sans with a slightly humanist x-height and small 0.01em letter-spacing applied at body sizes.

A third nested layer of **system-ui sans** (referenced as `-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`) appears inside nested tweet-quote testimonials — the only place where the system surrenders typographic control to the platform default.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 68px | 400 | 68px | -1.02px | Hero h1 ("The AI notepad for people in back-to-back meetings") |
| `{typography.display-lg}` | 48px | 400 | 48px | -0.72px | Section h2 |
| `{typography.display-md}` | 36px | 400 | 40px | -0.54px | Section sub-heading serif |
| `{typography.heading-md}` | 24px | 400 | 32px | 0 | In-card serif accents |
| `{typography.heading-sm}` | 20px | 400 | 28px | -0.3px | Sub-section h3 |
| `{typography.sub-heading}` | 24px | 300 | 32px | 0 | Hero tagline (weight-300 instance) |
| `{typography.body-lg}` | 20px | 500 | 28px | 0.2px | Pull-quote body and lead-paragraph emphasis |
| `{typography.body-md}` | 16px | 400 | 20px | 0.16px | Default body running text |
| `{typography.body-sm}` | 14px | 400 | 18px | 0.14px | Secondary body and form labels |
| `{typography.caption}` | 13px | 400 | 16px | 0.13px | Caption rows, footer metadata, in-note labels |
| `{typography.button-md}` | 13px | 500 | 16px | 0.13px | Primary CTA and secondary button labels |
| `{typography.quote-sans}` | 15px | 400 | 20px | 0 | Nested tweet-quote testimonials only |

### Principles

The serif-sans split is the typographic signature. Display tiers run on Quadrant with tight negative tracking (-1.02px at 68px); body tiers run on Melange Grotesk with small positive tracking (0.13-0.16px at 13-16px). The single weight-300 instance is the hero tagline — Melange at 24px / 300 — that mediates between the heavy Quadrant headline and the body. Button labels sit at 13px / 500 — the smallest, most-emphatic typographic unit in the system, deliberately compressed because the olive-green CTA does the work of visibility through color rather than size.

### Note on Font Substitutes

Quadrant and Melange Grotesk are licensed from KMR's foundry. The closest open-source substitute for Quadrant is **Fraunces** (variable serif with similar calligraphic motion) or **PP Editorial Old** if you can license it; for Melange Grotesk, **Geist** or **Inter** at the same weights transfer cleanly. To preserve the warm-indie feel, the serif display is the move worth keeping — substituting Quadrant with a sans-serif (even Inter) collapses the print-media identity.

## Layout

### Spacing System

- **Base unit:** 8px — the dominant gap (78 occurrences), with 16px (48), 12px (38), and 4px (15) filling the smaller increments.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 6px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px.
- **Section padding (vertical):** ~64-80px between major editorial sections.
- **Card internal padding:** `{spacing.lg}` 16px and `{spacing.xl}` 20px on note tiles; `{spacing.md}` 12px on smaller chrome.
- **Top-nav padding:** 12px vertical, 16px horizontal, 64px total height.

### Grid & Container

- **Max content width:** ~1326px on the hero, ~1084px on the section-heading bands.
- **Hero:** centered single-column with cropped photographs flush against the page edges.
- **2-up rows:** the "How it works" and "Get notes in the format your team needs" sections use even 2-column layouts with a note-tile on one side and editorial copy on the other.
- **Logo wall:** the customer-mark strip (Intercom, Ramp, Linear, Index Ventures, Brex) runs as a single horizontal row at the page's mid-section.

### Rhythm

The page alternates between **editorial declaration** and **product mockup**. The hero is a declaration; the next section is a 2-up product mockup (Granola is like Apple Notes...); the next is editorial again (Helping the world's best product teams...); the next is a 2-up mockup. The rhythm gives the page a textbook-spread cadence where every editorial moment is followed by a visual proof, never two declarations in a row.

## Elevation

The system has a **minimal shadow tier**. Note tiles use a 13-occurrence shadow at `rgba(0, 0, 0, *)` with low opacity — a subtle lift just enough to separate the white tile from the cream canvas. Most other surfaces rely on the warm-cream-to-white surface contrast or a 1px hairline border to do depth work.

- **Flat (no shadow):** hero, body bands, footer — most surfaces.
- **Note-tile elevation:** `rgba(0, 0, 0, ~0.05)` 2-pixel shadow on the pill-rounded note tiles in the hero — readable as a paper-on-paper lift.
- **Hairline cards:** `{colors.hairline-soft}` (#e3e3e3) 1px borders on card-tiles below the fold — frequency 1023, the workhorse border tone.
- **Tonal lift:** `{colors.surface-raised}` (#ffffff) cards on `{colors.canvas}` (#f7f7f2) — the warm-to-white contrast does as much elevation work as the shadow.

## Shapes

The radius scale is **two-tier**: small-step body chrome at 4-12px plus a full pill at 9999px:

- `{rounded.none}` 0px — section dividers, editorial body.
- `{rounded.sm}` 4px — 11 occurrences. Highlight-mark inline accent and small chips.
- `{rounded.md}` 6px — 4 occurrences. Small icon buttons.
- `{rounded.lg}` 8px — 99 occurrences. Default card and input outline.
- `{rounded.xl}` 12px — 12 occurrences. Note tiles in the hero.
- `{rounded.pill}` 9999px — 77 occurrences. Every CTA pill, announcement chip, and badge.

The dominant radii are 8px on body cards and pill on every actionable surface. There is no 16-24px middle tier; the system jumps from 12px on note tiles to full pill on actions.

## Components

**`button-primary`** — The signature CTA. Olive-oat `{colors.primary}` fill, white text, full pill `{rounded.pill}` radius, 8x16 padding, 32px height. The Download for Mac pill in the hero — the only saturated above-fold action.

**`button-primary-hover`** — Background flips to `{colors.primary-mid}` (#788c15) on hover, a slightly lighter oat-green.

**`button-secondary`** — Pale oat-green `{colors.surface-tint}` fill, near-black text, full pill radius, 8x16 padding, 32px height. Used for the Announcing our Series C accent pill at the top of the hero.

**`announcement-pill`** — Same dimensions as `button-secondary` but with an inline arrow icon — the page-top announcement strip.

**`top-nav`** — Warm cream `{colors.canvas}` surface, no border, 64px height, 12x16 padding. Granola wordmark flush left, product links (Features / Pricing / Blog / Careers) centered, Download cluster flush right.

**`nav-link`** — Transparent background, ink text at `{typography.body-md}` (16px / 400), 0x4 padding, 28px height. No hover background.

**`hero-heading`** — Ink text on the cream canvas, `{typography.display-xl}` (68px / 400, -1.02px tracking, Quadrant serif). 0 padding; centered single column.

**`section-heading`** — Ink text, `{typography.display-lg}` (48px / 400, -0.72px tracking).

**`sub-heading-line`** — `{colors.ink-muted}` text at `{typography.sub-heading}` (Melange 24px / 300) — the single weight-300 instance in the system. Used for the hero tagline ("Granola takes your raw meeting notes and makes them awesome") with 56px horizontal padding.

**`body-paragraph`** — `{colors.ink-strong}` (#0e0f0c) text at `{typography.body-lg}` (Melange 20px / 500). The default running text below the fold.

**`body-paragraph-muted`** — `{colors.ink-muted}` text at `{typography.body-md}` (16px / 400). Secondary copy and form labels.

**`highlight-mark`** — `{colors.accent-yellow}` (#febe29) fill, near-black text, `{rounded.sm}` 4px radius, 2x4 padding. The yellow-highlighter inline accent — wraps action verbs in the body copy like marker stroke from a paper notepad. Reserved for verbs only; never appears on more than one verb per sentence.

**`note-tile`** — Pure white `{colors.surface-raised}` fill, near-black text, 1px `{colors.hairline-soft}` border, `{rounded.xl}` 12px radius, 16x20 padding. The pill-rounded note-mockup tiles in the hero — paper-on-paper depth from the white-on-cream contrast.

**`card`** — Pure white `{colors.surface-raised}` fill, ink text, 1px `{colors.hairline-soft}` border, `{rounded.lg}` 8px radius, 16x20 padding. The default editorial card below the fold.

**`text-input`** — Pure white `{colors.surface-raised}` fill, ink text, 1px `{colors.hairline}` border, `{rounded.lg}` 8px radius, 12x16 padding, 44px height.

**`testimonial-card`** — Cream `{colors.canvas}` fill, near-black text, 1px `{colors.primary-soft}` left-border accent, no radius, 16x20 padding. The Granola has become indispensable tweet-quote — uses the system-ui `{typography.quote-sans}` font to preserve the nested-tweet feel.

**`badge-soft`** — Pale oat-green `{colors.surface-tint}` fill, `{colors.primary-mid}` text, full pill radius, 4x12 padding, 24px height. Used for the inline status badges and category chips.

## Do's and Don'ts

**Do** reserve the yellow-highlighter mark (`{colors.accent-yellow}` — #febe29) for action verbs only. The page never highlights a noun, an adjective, or two verbs in the same sentence. The accent works because it is rare and grammatically consistent; expanding it to any word category dissolves the paper-notepad metaphor.

**Do** use `{colors.canvas}` (#f7f7f2) as the page floor — never pure `#ffffff`. The warm-cream-to-white surface contrast is what gives the note tiles their paper-on-paper lift; flattening the canvas to white collapses the entire elevation system.

**Do** pair Quadrant serif on display tiers with Melange Grotesk on body tiers. The serif-sans split is the typographic signature; running a single sans across every tier (even at the same sizes) loses the print-media warmth that defines the brand.

**Do** keep the primary CTA at the saturated olive-oat-green `{colors.primary}` (#5b6f00). The warm-natural olive is what gives the action surface its indie feel; swapping to a cobalt or violet voltage turns the page into a generic SaaS landing.

**Don't** use `{colors.surface-1}` (#eaebe5) as a text or fill color outside of accent surfaces — 1023 of its 1042 occurrences are borders. It is a hairline-and-soft-fill token, and rendering body text in it produces near-invisible text on the cream canvas.

**Don't** introduce a heavier weight (700+) on the Quadrant display tier. The hero at 68px / 400 with -1.02px tracking is the loudest typographic moment; bumping to 700 erases the calligraphic motion of the Quadrant terminals and turns the editorial display into a generic SaaS shout.

**Don't** apply the `{colors.accent-yellow}` highlighter as a full-bleed background fill. It is wired as `--color-oats-yellow-200` and reserved for the 2x4-padded inline mark; using it as a section background reads as a warning state rather than as a typographic accent.

**Don't** use the gradient stops (`{colors.accent-pink}`, `{colors.accent-purple}`, `{colors.primary-bright}`) as standalone flat fills. Each of these colors only appears inside gradient stops on the in-product feature mockups; using them as flat surface fills produces a candy-pastel palette that conflicts with the warm-indie identity.

## Known Gaps

- **Hover and focus states:** the captured marketing surface only renders resting states for most components; the full hover / press / focus matrix lives inside the product UI and is not fully documented here. Only the primary CTA hover (`{component.button-primary-hover}`) is captured.
- **Form input error states:** the `{component.text-input}` carries only the resting state; error and validation styling is not exposed on the marketing surface.
- **Dark mode:** the captured marketing surface is light-only. The Granola app exposes a dark variant, but the marketing chrome is light-only.
- **Motion:** the note tiles in the hero animate on scroll-into-view with a soft fade-in-up, but the spec captures end-state values only. Easing curves, duration, and stagger live in the live Granola runtime.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Granola desktop app — note editor, meeting transcript view, AI-suggested cards, calendar integration — carries a much richer token system that is not represented here.
- **Gradient definitions:** the colorful gradient stops (`{colors.accent-pink}`, `{colors.accent-purple}`, `{colors.primary-bright}`) appear inside multi-color illustrations but the gradient angles, stop positions, and blend modes are not captured here.
- **Oats-namespace mapping:** the system exposes ~80 `--oats-*` and `--color-oats-*` custom properties; only the 20 most-frequent values are surfaced as tokens above. The full mapping (oats-red, oats-blue, oats-gold, plus role-specific oats-ink and oats-fill variants) is documented inside the production CSS.