MozaikaProduct

Granola — design system & UI screens

Productivity · 1 screen · 10 sections · https://www.granola.ai/

Editorial serif hero for the AI meeting notepad; a floating notes-app window over a call tile on a warm off-white ground. Notes, actions and memory, without a meeting bot.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/granola.

Decoded design system

Granola's decoded design system: background #FFFFFF, text #292929, accent #22C55E, link #22C55E, primary #5B6F00; type scale h1 110px / h2 160px / body 14px; 4px spacing base; 12px base radius. The single interactive/action color is #5B6F00 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

RoleValue
bg#FFFFFF
surface#F2F2F2
border#DEDEDE
text#292929
text_muted#7A7A7A
primary#5B6F00
accent#22C55E
link#22C55E
secondary#DDEEDD
button_bg#5B6F00
button_text#FCFCF8

Using these colors

Typography

Spacing

Radii

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Pages

Sections (10)