CURATED · OPEN · FREE

Granola

The AI notepad for people in back-to-back meetings.

aiproductivity

↓ Download design system (9 MB)Open in OpenDesign

Visit: https://www.granola.ai

📦 Browse pack contents →

Identity DNA

meeting notesAI notepadproductivityeffortless

A calm, intelligent assistant that quietly organizes your day.

Color

#B2C248Accent

#0E0F0CInk

#536471Ink soft

#FBFBF6BG

#EAEDE5BG soft

#F7F7F2BG quiet

#D5D5D2Muted

rgba(227, 227, 227, 1)Line

Earthy, organic neutrals paired with a distinct, muted olive green accent.

Typography

transitional-serif · geometric-sans

display56px · 400
h236px · 400
body16px · 400

Display type uses a transitional serif for a calm, editorial feel. · Body type uses a clean geometric sans for legibility. · Headlines use tight tracking for a modern, confident look. · Font weights are restrained, primarily using 400.

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

Generous whitespace with a clear vertical rhythm based on 4px.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(227, 227, 227, 1)

rgba(0, 0, 0, 0.03) 0px 0px 2px 0px inset · rgba(0, 0, 0, 0.03) 0px 0px 36px 0px · rgba(0, 0, 0, 0.15) 0px 8px 48px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered, single-column content flow with generous padding.

Motion & Interaction

150msmicro

300mssmall

0msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions on interactive elements. · Background-color and color transitions on hover. · Box-shadow transitions for focus states.

Subtle color shifts on buttons and links. · Smooth transition to pressed state.

Components

button Pill-shaped primary buttons with high contrast.
card Softly rounded cards with subtle shadows and light borders.
chip Pill-shaped tags for features or labels.
input Clean, minimal input fields.
hero Large, centered serif headline with a single clear CTA.

Voice & Don'ts

Tone Helpful, straightforward, and slightly playful.
Headlines Direct and benefit-oriented, using large serif typography.
CTAs Action-oriented, clear, and high-contrast.

Don't use high-saturation neon colors — screenshot shows muted, earthy greens and warm grays.
Don't use bold, heavy display fonts — screenshot shows elegant, light-to-regular weight serif headlines.
Don't create cluttered, dense layouts — screenshot shows generous whitespace and a clean, centered flow.
Don't use sharp, boxy corners — screenshot shows soft, rounded corners (8px, 12px, pill shapes).
Don't use dark mode or heavy dark backgrounds — screenshot shows a light, warm off-white (#FBFBF6) theme.
Don't use complex, noisy gradients — screenshot shows clean, solid color fields and subtle shadows.
Avoid: Using overly technical jargon.
Avoid: Being pushy or aggressive.
Avoid: Using complex, multi-line headlines.

Inside the pack — real screenshots

Granola — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a clean, professional AI productivity tool landing page for meeting notes. The design DNA is built on a calm, earthy palette centered around warm off-white (#FBFBF6) and a distinct muted olive green (#B2C248). Typography pairs an elegant transitional serif for display headlines with a clean geometric sans-serif for body text. The layout is centered and generous with whitespace, prioritizing readability. Key hex colors are #FBFBF6 (bg), #0E0F0C (ink), #B2C248 (accent), and #EAEDE5 (bgSoft). Critical donts: 1) Don't use high-saturation neon colors; the palette is intentionally muted. 2) Don't use bold, heavy display fonts; the headlines are refined and light. 3) Don't create cluttered, dense layouts; the design relies on generous spacing and a single-column flow for focus.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko