Typography
scale ratio 1.247- Quadrantcss: quadrantdisplay40072%
- Melangecss: melangebody400 430 500 60028%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Quadrant | 86.4px | 400 | 0.93 | -0.02em |
| headline | Quadrant | 48px | 400 | 1 | 0em |
| title | Quadrant | 32px | 400 | 1.05 | -0.01em |
| body | Melange | 22px | 400 | 1.35 | 0em |
| body-sm | Melange | 16px | 400 | 1.5 | 0em |
| label | Melange | 14px | 400 | 1.286 | 0.01em |
Type scale
Aa10Aa12Aa13Aa14Aa16Aa17Aa20Aa22Aa24Aa32Aa36Aa48Aa60Aa86.5Aa88Aa108Aa160
- Body size
- 22px / 1.35
- Display size
- 86.4px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.55:1
- Muted on bg
- undefined:1
- Accent on bg
- 5.65:1
- Dark mode
- none
Declared accent tokens
- --color-accent#94F27Fnot on page
- --oats-ink-accent#788C15painted
- --color-ink-accent#788C15painted
- --oats-fill-accent#5B6F00painted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 6
- 8
- 9
- 10
- 12
- 16
- 20
- 22
- 24
- 32
- 40
Corner radii
481216182428pill
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 112px
Components
exact computed valuesbutton-primary
Download for free
- backgroundColor
- #5B6F00
- textColor
- #FCFCF8
- rounded
- 9999px
- padding
- 9px 24px
- height
- 56px
- fontFamily
- Melange
- fontSize
- 16px
- fontWeight
- 430
button-secondary
Talk to sales
- textColor
- #292929
- rounded
- 9999px
- padding
- 6px 12px
- height
- 38px
- fontFamily
- Melange
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #47432A33
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #B2C248
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- split
- Navigation
- top-fixed+transparent
- Page height
- 14,422px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 62
- Keyframes
- 8
- Stack
- next.js, tailwind, shadcn/ui, google-tag-manager, vercel
Page sections (12)
section labels are heuristic
01heroThe AI notepad for back-to-back meetings
02nav
03feature detail?Effortless notes, enhanced instantly.
04logosFor the doers
06feature detail?Perfect meeting memory
07logosHelping busy people through busy days
08features?Works everywhere you do, how you do
09features?Private by default, ready to share
10gallery?Use your meeting notes anywhere
11cta?Unlimited meeting notes for free
12footer
How Granola compares
- Body text
- 22px: larger than 98% of indexed sites (median 16px).
- Largest heading
- 86.4px: larger than 85% of indexed sites (median 60px).
- Type scale
- 1.25×: flatter than 63% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 14.6:1: lower than 79% of indexed sites (median 17.6:1).
- Page length
- 14,422px: longer than 90% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Quadrant
- The only site in the index that loads Quadrant.
- Melange
- The only site in the index that loads Melange.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Granola use?
Granola uses Quadrant (loaded as "quadrant") for headings. Melange (loaded as "melange") is used for body text.
What are Granola's brand colors?
Granola's website uses a light scheme: background #FFFFFF, surface #F7F7F2, text #292929 and borders #47432A33.
How is Granola's website laid out?
The most common corner radius is fully rounded (pill), body text is 22px with 1.35 line height, and the page container is 1280px wide.
