# Granola — Marketing site Design Spec

> Source: granola.ai (live DOM, computed styles + the published **`--oats-*`** design-token set), 2026-07-19.
> Coverage: home / product landing. The notepad itself is a native macOS app; no logged-in web surface exists.
> Note: reference screenshots could not be captured — the animated hero repeatedly timed out script injection. All values below come from computed styles and the published token set, which is the authoritative source; layout description is correspondingly conservative.

## 1. Visual Theme & Atmosphere

Granola ships a named design system called **oats**, and the name tells you the palette: warm paper `#f7f7f2`, oat-tinted neutrals, and an **olive-lime** accent (`#5b6f00` fill, `#788c15` ink) rather than the blue or violet every other AI note-taker reaches for. The typographic move is scale, not weight — the display face **quadrant** sits at a single weight 400 but ranges from 24px to a **160px** section headline, with line-height pinned at or below the font size (90.72/84.37, 160/160) and negative tracking. Body is a second custom face, **melange**, set unusually small at 13px. Nearly every neutral carries a warm alpha tint (`#625a220f`, `#56512e1f`) rather than a flat gray, so surfaces feel like paper stock. Every control is a full pill. Feels: warm, papery, calm, editorial.

## 2. Color Palette & Roles

### Ink (text)

| Token | Hex | Role / usage |
|---|---|---|
| `oats-ink-primary` / `-static` | `#292929` | Primary text |
| `oats-ink-primary-inverse` / `-static` | `#fcfcf8` | Text on dark (warm white) |
| `oats-ink-secondary` / `-static` | `#72726e` | Secondary text |
| `oats-ink-secondary-strong` / `-static` | `#4e4d4b` | Stronger secondary |
| `oats-ink-secondary-inverse` / `-static` | `#9e9e99` | Secondary on dark |
| `oats-ink-secondary-strong-inverse-static` | `#acada8` | Strong secondary on dark |
| `oats-ink-tertiary` / `-static` | `#acada8` | Tertiary |
| `oats-ink-accent` | `#788c15` | Accent text (olive) |
| `oats-ink-accent-strong` | `#5b6f00` | Strong accent text |
| `oats-ink-danger` | `#bd4a30` | Danger text |

### Surfaces

| Token | Hex | Role / usage |
|---|---|---|
| `oats-surface` | `#f7f7f2` | Page canvas (warm paper) |
| `oats-surface-elevated` / `-raised` | `#fff` | Card / raised panel |
| `oats-surface-sunken` | `#f2f2ec` | Inset |
| `oats-surface-overlay` | `#818179` | Overlay |
| `oats-surface-tooltip` | `#363635` | Tooltip |
| `oats-surface-accent-green` | `#f2f6e1` | Green accent ground |
| `oats-surface-accent-blue` | `#eaf4fe` | Blue accent ground |
| `oats-surface-accent-purple` | `#f3f0fa` | Purple accent ground |
| `oats-surface-tint-accent` | `#e5eacd` | Accent tint |
| `oats-surface-tint-neutral` | `#625a220f` | Neutral warm tint |

### Fills

| Token | Hex |
|---|---|
| `oats-fill-primary` | `#292929` |
| `oats-fill-primary-hover` | `#4e4d4b` |
| `oats-fill-accent` | `#5b6f00` |
| `oats-fill-accent-hover` | `#4c5616` |
| `oats-fill-accent-highlight` | `#788c1526` |
| `oats-fill-accent-highlight-strong` | `#5b6f0033` |
| `oats-fill-soft` | `#625a220f` |
| `oats-fill-soft-hover` | `#56512e1f` |
| `oats-fill-soft-opaque` | `#eaebe5` |
| `oats-fill-soft-opaque-hover` | `#d5d5d2` |
| `oats-fill-highlight` | `#625a220f` |
| `oats-fill-highlight-strong` | `#56512e1f` |
| `oats-fill-highlight-inverse` | `#ffffff0f` |
| `oats-fill-highlight-strong-inverse` | `#ffffff26` |
| `oats-fill-input` | `#fff` |
| `oats-fill-input-disabled` | `#f7f7f2` |
| `oats-fill-neutral` | `#acada8` |
| `oats-fill-disabled` | `#d5d5d2` |
| `oats-fill-danger` | `#e95d3d` |
| `oats-fill-danger-hover` | `#bd4a30` |

### Borders & system

`oats-border-hairline` `#47432a33` · `oats-border-focus` `#b2c24899` · `oats-system-dancing-bars` `#74bd00`

### Syntax tokens (`--sh-*`, light theme)

`class #2d5e9d` · `identifier #354150` · `sign #8996a3` · `string #007f7a` · `keyword #e02518` · `comment #a19595` · `jsxliterals #6266d1` · `property` / `entity #e25a1c`

**Rules.** The accent is olive-lime, not blue. Neutrals are warm-tinted alphas (`#625a220f`, `#56512e1f`, `#47432a33`) rather than flat grays — this is what makes the surface read as paper. The blue and purple accent grounds are category tints, not chrome.

## 3. Typography Rules

- Display: `quadrant, "quadrant Fallback"` — one weight (400) across a very wide size range
- Body / UI: `melange, "melange Fallback"`

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Section h2 (display) | quadrant | **160/160** | 400 | -2.4px |
| Hero h1 | quadrant | 90.72/**84.37** | 400 | -1.8144px |
| Section h1/h2 | quadrant | 48/48 | 400 | normal / -0.72px |
| Card h3 | quadrant | 24/25.2 | 400 | -0.24px |
| Body | melange | 13/16 | 400 | normal (`#72726e`) |
| Button label | melange | 14-16 | 400-**430** | normal |

Patterns: the display face never leaves **weight 400** — hierarchy is pure scale, running from 24px to 160px. Line-height is pinned at or *below* the font size at every display size (90.72/84.37 is a 0.93 ratio; 160/160 and 48/48 are exactly 1.0). Tracking scales with size (-2.4px at 160px, -1.81px at 90px, -0.24px at 24px). Body copy is unusually small at 13/16. Button labels use a **variable weight of 430** — a deliberate half-step above regular. Sentence case; no uppercase eyebrows.

## 4. Component Stylings

**Buttons** — everything is a **full pill**:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Accent primary | `#5b6f00` | `#fcfcf8` | none | full pill | 56px | 9px 24px | melange 16/**430** |
| Dark primary | `#292929` | `#fcfcf8` | none | full pill | 56px | 9px 24px | melange 16/**430** |
| Soft | `rgba(102,85,34,.06)` | `#292929` | 0.5px | full pill | 40px | 0 12px | melange 14/400 |
| Ghost / nav | transparent | `#292929` | 0.5px | full pill | 37px | 6px 12px | melange 14/400 |

Hover pairs are published rather than improvised: accent `#5b6f00` → `#4c5616`, primary `#292929` → `#4e4d4b`, soft `#625a220f` → `#56512e1f`, opaque `#eaebe5` → `#d5d5d2`.

Note the **0.5px borders** on the lighter variants — a half-pixel hairline, unusual and part of the delicate feel.

**Focus** — `oats-border-focus: #b2c24899`, a translucent lime ring.

**Inputs** — `fill-input #fff`, disabled `#f7f7f2`, hairline `#47432a33`.

**Dancing bars** — `#74bd00`, a brighter lime reserved for the live audio-level indicator (the app is a meeting recorder). This is the one place the accent brightens.

**Cards** — `#fff` raised on the `#f7f7f2` canvas, separated by the `#47432a33` warm hairline; radius scale below.

## 5. Layout Principles

Warm-paper page with a very large centred display headline, small 13px supporting copy, and full-pill CTAs. Category sections use the accent grounds (`#f2f6e1` green, `#eaf4fe` blue, `#f3f0fa` purple) as tinted panels. Radius census: `4 / 6 / 8 / 12 / 16 / 24 / 28 / 64px`, `9999px` and a max-value pill.

## 6. Depth & Elevation

Radius scale: `4 / 6 / 8 / 12 / 16 / 24 / 28 / 64px` plus full pill.

No meaningful shadow recipe was resolved — the census returned only transparent multi-layer placeholder rings (Tailwind-style slots switched off). Depth is the surface step `#f2f2ec` → `#f7f7f2` → `#fff` plus the `#47432a33` warm hairline. This is a flat, paper-stock system.

## 7. Motion

Transition census resolved only generic values; specific durations and easings are **not captured**. The hero carries a scripted animation heavy enough to block script injection.

## 8. Backgrounds, Effects & WebGL

No gradients, backdrop-filter, grain or WebGL resolved on the chrome. Atmosphere comes entirely from the warm paper surface ladder and the alpha-tinted neutrals.

## 9. Do's and Don'ts

### Do
- Use the warm paper canvas `#f7f7f2` with `#fff` raised cards.
- Make the accent **olive-lime** (`#5b6f00` fill, `#788c15` ink), not blue or violet.
- Keep the display face at weight 400 and build hierarchy purely from scale (24px → 160px).
- Pin display line-height at or below the font size and scale tracking with it.
- Set body copy small — 13/16 in `melange`.
- Use warm alpha tints (`#625a220f`, `#56512e1f`, `#47432a33`) instead of flat grays.
- Make every control a full pill, and use the published hover pairs rather than improvising.
- Reserve the brighter `#74bd00` for the live audio indicator only.

### Don't
- Don't use a blue or violet accent — that is the category default this brand avoids.
- Don't add weight contrast to the display face; scale does the work.
- Don't use flat neutral grays for tints.
- Don't add drop shadows; the system is flat paper.
- Don't give controls a small radius — everything is a pill.
- Don't spend the blue/purple accent grounds on chrome; they are category tints.

## 10. Responsive Behavior

Not captured — no media-query census was resolved from the accessible stylesheets.

## 11. Agent Prompt Guide

- Canvas `#f7f7f2` · Raised `#fff` · Sunken `#f2f2ec` · Ink `#292929` · Secondary `#72726e` · Tertiary `#acada8` · Hairline `#47432a33` · Accent `#5b6f00` / ink `#788c15`
- Font: quadrant 400 (display, 24-160px), melange 400/430 (body/UI) · Body: 13/16 · Radius: full pill controls / 8-28px panels · Control height: 56px primary, 37-40px small
- Focus: `#b2c24899` lime ring · Hover: accent → `#4c5616`, primary → `#4e4d4b`, soft → `#56512e1f` · Motion: not captured

<granola_design_language>
A warm paper-stock AI notepad built on a published design system called oats. The canvas is warm paper #f7f7f2 with #fff raised cards and #f2f2ec sunken insets, ink #292929, secondary #72726e, tertiary #acada8, and a warm translucent hairline #47432a33. The accent is OLIVE-LIME — #5b6f00 fill and #788c15 ink, hovering to #4c5616 — deliberately not the blue or violet the AI-notes category defaults to; a brighter #74bd00 is reserved solely for the live audio-level indicator. Crucially, nearly every neutral is a WARM ALPHA TINT (#625a220f, #56512e1f, #47432a33) rather than a flat gray, which is what makes the surface read as paper. Type is two custom faces: the display face quadrant never leaves WEIGHT 400 and builds hierarchy purely from scale, running 24/25.2, 48/48, 90.72/84.37 and a 160/160 section headline, with line-height pinned at or BELOW the font size and tracking scaling alongside (-0.24px at 24px to -2.4px at 160px); body is melange set unusually small at 13/16, and button labels use a variable weight of 430, a deliberate half-step above regular. Every control is a FULL PILL: 56px accent or #292929 primary at 9px/24px padding, and 37-40px soft variants on #625a220f with distinctive 0.5px hairline borders. Hover states are published pairs rather than improvised. Focus is a translucent lime ring, #b2c24899. Depth is flat — no shadow recipe resolved, no gradients, backdrop-filter, grain or WebGL — with separation coming from the #f2f2ec/#f7f7f2/#fff surface step and the warm hairline; category sections use tinted grounds (#f2f6e1 green, #eaf4fe blue, #f3f0fa purple) that never appear in chrome. Feels: warm, papery, calm, editorial. Avoid: a blue or violet accent, weight contrast in the display face, flat neutral grays, drop shadows, small-radius controls, and category tints in chrome.
</granola_design_language>