# Granola · Design system migration spec

> Source: https://www.granola.ai  ·  Curated by OpenDesign  ·  en

> The site is an excellent example of how a refined, organic aesthetic can make a tech product feel approachable and calm.

## 1. Identity DNA

Granola is designed like a calm, intelligent assistant that quietly organizes your day, a system built for clarity rather than noise. Its design DNA is rooted in an earthy, organic palette and a restrained typographic voice, creating a space where thought—not interface—takes precedence.

**One-liner:** The AI notepad for people in back-to-back meetings.
**Keywords:** meeting notes · AI notepad · productivity · effortless
**Analogy:** A calm, intelligent assistant that quietly organizes your day.

## 2. Color

The color system pairs earthy, organic neutrals with a distinct, muted olive green accent, establishing a palette that feels both grounded and purposeful. This choice steers clear of high saturation, favoring a warm, off-white foundation that supports long-form reading and focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFBF6` | main background |
| `--bg-soft` | `#EAEDE5` | card background |
| `--bg-quiet` | `#F7F7F2` | quiet area |
| `--ink` | `#0E0F0C` | body text |
| `--ink-soft` | `#536471` | secondary text |
| `--muted` | `#D5D5D2` | placeholder |
| `--accent` | `#B2C248` | single accent |
| `--line` | `rgba(227, 227, 227, 1)` | divider |

**Color principle:** Earthy, organic neutrals paired with a distinct, muted olive green accent.

The principle is restraint; every hue serves a functional role, with the accent green providing just enough distinction to guide attention without demanding it.

## 3. Typography

Type is set in two distinct voices: a transitional serif for display headlines lends a calm, editorial feel, while a clean geometric sans-serif handles body text for superior legibility. Headlines are set with tight tracking and a restrained weight, creating a modern, confident presence without visual weight.

- **Display:** transitional-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 400 | -0.72px | Main hero headlines |
| h2 | 36px | 1.15 | 400 | -0.54px | Section headings |
| body | 16px | 1.5 | 400 | normal | Body text |

**Type rules:**
- 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.

## 4. Spacing

The system establishes a generous vertical rhythm based on a 4px unit, creating ample whitespace that lets content breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with a clear vertical rhythm based on 4px.

## 5. Surfaces

Surface treatment relies on subtle depth through layered shadows and light, hairline borders. These elements define space without adding visual weight, maintaining the interface's light, warm character.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 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
- **Borders:** 1px solid rgba(227, 227, 227, 1)

## 6. Layout

The layout skeleton is a centered, single-column content flow with generous padding, prioritizing focus and readability above all. This structure creates a clear, vertical path for the eye, ensuring information is absorbed in a logical sequence.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered, single-column content flow with generous padding.

## 7. Motion & Interaction

Motion is minimal and functional, serving as quiet feedback rather than spectacle. All transitions follow a standard 0.15s to 0.3s cubic-bezier curve, ensuring smooth color, shadow, and state changes feel immediate yet unhurried.

- **Durations:** micro 150ms · small 300ms · medium 0ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on interactive elements.
  - Background-color and color transitions on hover.
  - Box-shadow transitions for focus states.

- **Hover:** Subtle color shifts on buttons and links.
- **Click:** Smooth transition to pressed state.
- **Transition:** All transitions follow a standard 0.15s to 0.3s cubic-bezier curve.
- **Keyboard:** Standard focus outlines with subtle shadows.

## 8. Voice & Don'ts

The editorial voice is helpful, straightforward, and slightly playful, favoring direct, benefit-oriented headlines. Copy avoids complex jargon and aggressive pushes, instead using the large serif typography to state its value with quiet confidence.

- **Tone:** Helpful, straightforward, and slightly playful.
- **Headline style:** Direct and benefit-oriented, using large serif typography.
- **CTA style:** Action-oriented, clear, and high-contrast.
- **Avoid:** Using overly technical jargon. / Being pushy or aggressive. / Using complex, multi-line headlines.

### Don'ts
- ❌ 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.

The system deliberately avoids high-saturation color, heavy type weights, cluttered layouts, and sharp corners, maintaining its signature calm and approachable aesthetic.

## System Prompt (paste into AI tool)

```
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.
```