A warm paper-stock AI notepad built on a published design system called oats, whose name matches its palette: an olive-lime accent instead of the blue or violet the category defaults to, and neutrals that are warm alpha tints rather than flat grays, so surfaces read as paper. The display face never leaves weight 400 and builds hierarchy purely from scale — 24px up to a 160px section headline — with line-height pinned at or below the font size, tiny 13px body copy, and every control a full pill with published hover pairs.
Browse Granola in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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 |
oats-border-hairline #47432a33 · oats-border-focus #b2c24899 · oats-system-dancing-bars #74bd00
--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.
quadrant, "quadrant Fallback" — one weight (400) across a very wide size rangemelange, "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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.