Light interfaceMeasured www.granola.ai

Granola

A warm, paper-like notepad that feels calm and handwritten, not corporate software.

This page is styled with Granola’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#F7F7F2
Cards, panels, menus

Text#292929
Headings and body

Muted text#72726E
Secondary info

Line#D5D5D2
Dividers and outlines

Accent#5B6F00
Main button, links, selection

On accent#FCFCF8
Text on the accent

Contrast

Text on background 14.5:1Muted on background 4.8:1Text on accent 5.5:1

Every colour found on their site

#292929#72726E#0E0F0C#FCFCF8#FFFFFF#F7F7F2#B2C248#000000#5B6F00#212121#D5D5D2

Typography

Headings use quadrant (company-only; shown here with the free look-alike Newsreader). Body text uses melange (company-only; shown with Newsreader).

h1	quadrant · 86.4px · 400 · -1.728px	The AI notepad for back-to-back meetings
h2	quadrant · 160px · 400 · -2.4px	For the doers
h3	quadrant · 24px · 400 · -0.24px	Start your meeting prepared
p	melange · 14px · 500 · 0.14px	Notepad
li	melange · 17px · 400 · 0.17px	•

Corners & shadows

Corner sizes used

pill

8px

4px

6px

pill

10px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Granola’s live website. Click to enlarge.

Buttons · 4

Granola button: Enterprise — No fill · corners 3.35544e+07px · 38px

Granola button: Talk to sales — No fill · corners 3.35544e+07px · 38px

Granola button: Download — No fill · corners 3.35544e+07px · 40px

Granola button: New — #F7F7F2 · corners 3.35544e+07px · 32px

Navigation bar · 1

Granola Navigation bar: Features — no fill · square · melange 16px

Buttons · 4

Granola Buttons: Talk to sales — no fill · corners 3.35544e+07px · melange 14px

Granola Buttons: Download — no fill · corners 3.35544e+07px · melange 14px

Granola Buttons: New — fill #F7F7F2 · corners 3.35544e+07px · melange 16px

Granola Buttons: Download for free — fill #5B6F00 · corners 3.35544e+07px · melange 16px

Tags and badges · 1

Granola Tags and badges: New — fill #D1E043 · corners 10px · melange 12px

Cards and panels · 3

Granola Cards and panels: Notepad — fill #FFFFFF · corners 8px · melange 16px

Granola Cards and panels: Your Brief — no fill · corners 28px · melange 17px

Granola Cards and panels: Northwind Sync — fill #F7F7F2 · corners 24px · melange 16px

Lists and tables · 1

Granola Lists and tables: • — no fill · square · melange 17px

Icons

18 icons copied exactly from their site’s code.

Product screens

7 real screens from web image search, each linked to where it was found.

Granola product screen: 471 × 1021 — 471 × 1021

Granola product screen: 2306 × 1757 — 2306 × 1757

Granola product screen: 2400 × 1260 — 2400 × 1260

Granola product screen: 460 × 995 — 460 × 995

Granola product screen: 768 × 549 — 768 × 549

Granola product screen: 2196 × 1384 — 2196 × 1384

Granola product screen: 5376 × 3024 — 5376 × 3024

Do & don’t

What makes it Granola

A serif display headline paired with a plain sans body, like a notebook title page
Soft cream and off-white surfaces instead of stark white or grey
Fully pill-shaped buttons with one olive-green primary action

Pair a serif headline font with a simple sans body font
Use warm off-white surfaces, not cold grey
Keep buttons pill-shaped with generous padding

Don’t

Don't use bright or saturated colours outside the single green accent
Don't use hard black-and-white contrast everywhere
Don't use sharp-cornered boxes

For AltLeads: Borrow the calm, notepad-like feel for the call notes and transcript view so reps don't feel like they're staring at a spreadsheet.

Copy the tokens

Paste into any project to try this look.

/* Granola · values measured from https://www.granola.ai/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F7F7F2;
  --text: #292929;
  --muted: #72726E;
  --line: #D5D5D2;
  --accent: #5B6F00;
  --on-accent: #FCFCF8;
  --radius-button: 999px;
  --radius-card: 8px;
  --radius-small: 4px;
  --button-height: 32px;
  --font-heading: "quadrant", "Newsreader", system-ui, sans-serif;
  --font-body: "melange", "Newsreader", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4;
}