The AI notepad for back-to-back meetings

Granola takes your raw notes and makes them great. No bot joins your call.

Download for Mac Download for Windows
Weekly design review Recording

Summary

  • Team aligned on shipping the new capture flow before end of quarter
  • Open question on pricing for the enterprise tier — revisit Thursday
  • Design to share updated onboarding mocks by Friday

Action items

  • Priya — draft the migration plan
  • Sam — confirm the audit timeline with legal
Ask Granola Share notes Enhanced 2 min ago

Granola helps you before, during and after

Category sections use tinted accent grounds that never appear in chrome.

Start your meeting prepared

Granola pulls the context you need from your calendar and past notes.

Give your full attention

Jot rough notes; Granola fills in everything that was actually said.

Post-meeting admin, done

Action items, summaries and follow-ups written before you stand up.

For the doers

Every control is a pill

Primary · 56px · full pill · melange 16/430 — published hover pairs
Download for Mac Hover Disabled Download for Windows Hover
Soft 40px & ghost 37px — note the 0.5px hairline borders
Download Hover Enterprise Hover Share notes Hover Delete Hover
Input — default, focus (lime ring #b2c24899) and disabled
Tooltip · accent highlight · dancing bars (the one brighter lime)
Enhanced with AI accent highlight strong highlight

Hover states are published token pairs rather than improvised — accent → #4c5616, primary → #4e4d4b, soft → #56512e1f, opaque → #d5d5d2. Note the unusual 0.5px hairline borders on the lighter variants and the 430 variable weight on button labels. Motion durations were not captured.

One weight, a 24-to-160px scale

Section h2 · quadrant · 160/160 · 400 · -2.4pxFor the doers
Hero h1 · quadrant · 90.72/84.37 · 400 · -1.8144pxThe AI notepad
Section h1/h2 · quadrant · 48/48 · 400 · -0.72pxEffortless notes
Card h3 · quadrant · 24/25.2 · 400 · -0.24pxStart your meeting prepared
Body · melange · 13/16 · 400 · #72726eThe AI notepad for people in back-to-back meetings.
Button label · melange · 16 · 430 (variable half-step)Download for Mac

The oats token set

Ink
ink-primary#292929
ink-primary-inverse#fcfcf8
ink-sec-strong#4e4d4b
ink-secondary#72726e
ink-sec-inverse#9e9e99
ink-tertiary#acada8
ink-accent#788c15
ink-accent-strong#5b6f00
ink-danger#bd4a30
Surfaces
surface#f7f7f2
elevated / raised#ffffff
sunken#f2f2ec
overlay#818179
tooltip#363635
accent-green#f2f6e1
accent-blue#eaf4fe
accent-purple#f3f0fa
tint-accent#e5eacd
tint-neutral#625a220f
Fills
fill-primary#292929
primary-hover#4e4d4b
fill-accent#5b6f00
accent-hover#4c5616
accent-highlight#788c1526
accent-hl-strong#5b6f0033
fill-soft#625a220f
soft-hover#56512e1f
soft-opaque#eaebe5
soft-opaque-hover#d5d5d2
hl-inverse#ffffff0f
hl-strong-inverse#ffffff26
fill-input#ffffff
input-disabled#f7f7f2
fill-neutral#acada8
fill-disabled#d5d5d2
fill-danger#e95d3d
danger-hover#bd4a30
Borders & system
border-hairline#47432a33
border-focus#b2c24899
dancing-bars#74bd00
Syntax tokens (--sh-*, light)
sh-class#2d5e9d
sh-identifier#354150
sh-sign#8996a3
sh-string#007f7a
sh-keyword#e02518
sh-comment#a19595
sh-jsxliterals#6266d1
sh-property / entity#e25a1c

Flat paper stock

4px
6px
8px
12px
16px card
24px panel
28px
64px
full pill
sunken #f2f2ec
surface #f7f7f2
elevated #ffffff
soft-opaque #eaebe5
disabled #d5d5d2

No meaningful shadow recipe was resolved — the census returned only transparent placeholder rings, so depth is the surface step plus the warm #47432a33 hairline. No gradients, backdrop-filter, grain or WebGL. Reference screenshots were not captured: the animated hero repeatedly timed out script injection, so all values here come from computed styles and the published token set.