Granola

granola.ai16 colors6 componentsmelangeMulti-page · 12 screens

The AI notepad for back-to-back meetings. Notes, actions and memory. Without a meeting bot.

Remix Visit

Remix

Visit

12 screenshots captured· granola.ai

1 / 12 · Granola — The AI Notepad for back-to-back meetings · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from granola.ai

Primary

#000000

Primary CTA, brand accent, active state; Headings / primary text

#5B6F00

Brand hue used alongside the achromatic primary

#536471

Inline link colour

#E5EACD

Accent / decorative

#47432A

Accent / decorative

#006FD6

Accent / decorative

#788C15

Accent / decorative

#1D9BF0

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#B2C248

Card / panel background

#292929

Alternating section band; Tertiary / placeholder text

#0E0F0C

Body copy

#0F1419

Captions, secondary text

#D5D5D2

1px borders and dividers

#E3E3E3

Neutral

#72726E

Neutral

Typography · melange

body14px · 400 · 19.25px

body16px · 500 · 24px

nav-link14px · 400 · 18px

body18px · 400 · 32px

body13px · 400 · 16px

link14px · 400 · 13.3px

body24px · 400 · 32px

button16px · 430 · 18px

body16px · 400 · 24px

body20px · 400 · 28px

body14px · 500 · 18px

caption12px · 400 · 18px

button16px · 400 · 24px

caption12px · 600 · 18px

list-item18px · 300 · 32px

body24px · 300 · 32px

body18px · 500 · 27px

body10px · 400 · 16.25px

list-item17px · 400 · 27.625px

caption16px · 400 · 20px

body22px · 400 · 29.7px

caption10px · 400 · 15px

caption10px · 600 · 15px

table-header14px · 500 · 18px

label13px · 500 · 16px

heading16px · 400 · 20px

body16px · 500 · 20px

body12px · 400 · 18px

body18px · 300 · 32px

h316px · 700 · 20px

link16px · 400 · 24px

button15px · 500 · 22.5px

body14px · 400 · 13.3px

Typography · -apple-system

body14px · 300 · 19.6px

button14px · 700 · 19.6px

body20px · 400 · 24px

body15px · 400 · 20px

body14px · 700 · 16px

body15px · 700 · 20px

Typography · quadrant

display48px · 400 · 48px

body24px · 400 · 22.8px

h288px · 400 · 86.24px

body20px · 400 · 21px

heading24px · 400 · 25.2px

body20px · 400 · 28px

button24px · 400 · 32px

heading32px · 400 · 40px

h168px · 400 · 40.8px

quote32px · 400 · 40px

h324px · 400 · 33px

heading18px · 400 · 25.2px

h186.4px · 400 · 80.352px

h2160px · 400 · 160px

h332px · 400 · 33.6px

quote36px · 400 · 39.6px

display108px · 400 · 104.76px

display88px · 400 · 86.24px

display60px · 400 · 60px

body24px · 400 · 32px

body16px · 400 · 24px

display48px · 400 · 48px

h268px · 400 · 68px

h336px · 400 · 40px

quote30px · 400 · 36px

heading20px · 400 · 25px

h180px · 400 · 88px

h324px · 400 · 32px

display54px · 400 · 59.4px

h154px · 400 · 59.4px

heading32px · 400 · 40px

heading24px · 400 · 32px

h172px · 400 · 75.6px

heading24px · 400 · 32px

Spacing

8px

24px

16px

12px

4px

40px

48px

32px

Elevation

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.03) 0px 0px 36px 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) 0px 0px 0px 0px, rgba(54, 54, 53, 0.25) 0px 4px 50px 0px

rgba(0, 0, 0, 0) 0px 0.00544995px 0.0108999px 0px, rgba(0, 0, 0, 0) 0px 0.0326997px 0.108999px 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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px

Components · 6

Remixes of Granola

Latest remixes

No public remixes yet. Be the first to make one.

Remix it