---
title: "Granola design system"
variant: extended
source: https://www.granola.ai/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/granola-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Granola · Design System

> Editorial calm with a vivid meeting-memory accent

**Theme:** light · **Industry:** productivity · **Source:** https://www.granola.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Granola presents its AI meeting notepad through oversized editorial headlines, quiet whitespace, and layered product-interface imagery. A restrained white-and-charcoal palette is punctuated by olive lime, with dark testimonial and bright feature bands providing contrast.

## North star

Let editorial serif headlines and open white space lead, using olive lime only to direct attention to product actions and key feature moments.

## Overview

The page uses white as its dominant canvas, letting large, dark serif headlines and generous negative space establish an editorial, unhurried tone. Charcoal navigation and copy remain crisp, while muted gray supports secondary text and fine separators. Olive lime is reserved for meaningful emphasis: the primary download action, new badges, selected interface details, and a full-width meeting-memory feature band. A warm off-white surface introduces a quieter change of pace near the closing MCP feature. Quadrant display typography gives the hero and major statements a distinctive literary voice; Melange handles navigation, body copy, captions, and controls in a more neutral, readable manner. The layout alternates spacious, mostly white feature sections with compact two-column product explanations, interface mockups, a charcoal testimonial panel, and the striking lime feature band. Product screenshots are framed as floating note windows over contextual meeting imagery, while restrained borders and subtle shadows preserve a light, tactile feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and the dominant backdrop for feature sections. |
| Soft Charcoal | `#292929` | `--color-soft-charcoal` | brand | Navigation, inverse testimonial band, dark buttons, and prominent supporting text. |
| Oat Surface | `#f7f7f2` | `--color-oat-surface` | surface | Soft section and card surface, including the closing MCP feature band. |
| Olive Lime | `#b2c248` | `--color-olive-lime` | accent | Full-width meeting-memory section and selected product-interface cards. |
| Near Ink | `#0e0f0c` | `--color-near-ink` | neutral | Primary body copy and dark text within cards and product mockups. |
| Grid Mist | `#dedede` | `--color-grid-mist` | semantic | Fine repeating rules and gradient details; not a defining section background. |
| Quiet Gray | `#72726e` | `--color-quiet-gray` | neutral | Secondary navigation and muted copy, with occasional gradient use. |
| Rule Gray | `#d9d9d9` | `--color-rule-gray` | semantic | Subtle outlines and hairlines around navigation, cards, and controls. |
| Badge Lime | `#d1e043` | `--color-badge-lime` | accent | Small new badge and occasional highlighted text or interface details. |
| Deep Olive | `#5b6f00` | `--color-deep-olive` | brand | Primary hero download button and brand-accent actions. |
| Moss Edge | `#9ca842` | `--color-moss-edge` | semantic | Thin card-edge and border detail, not a primary page surface. |
| Warm Stone | `#d4d3ca` | `--color-warm-stone` | semantic | Subtle decorative and interface details within imagery. |
| Deep Graphite | `#212121` | `--color-deep-graphite` | neutral | Occasional dark card and illustration details. |
| Silver Type | `#bebebe` | `--color-silver-type` | neutral | Sparse muted text inside product-interface imagery. |
| Brown Charcoal | `#4e4d4b` | `--color-brown-charcoal` | neutral | Rare secondary text and product imagery details. |
| Marigold Glint | `#febe29` | `--color-marigold-glint` | accent | Appears in decorative gradient accents, not a core page control color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f2` (Oat Surface) · `--color-surface-2` → `#292929` (Soft Charcoal) · `--color-text` → `#0e0f0c` (Near Ink) · `--color-text-muted` → `#292929` (Soft Charcoal) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d9d9d9` (Rule Gray) · `--color-accent` → `#b2c248` (Olive Lime) · `--color-accent-2` → `#5b6f00` (Deep Olive) · `--color-accent-3` → `#d1e043` (Badge Lime) · `--color-on-accent` → `#fcfcf8`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e0f0c` | `#ffffff` | 19.23:1 | AAA |
| `#0e0f0c` | `#f7f7f2` | 17.89:1 | AAA |
| `#0e0f0c` | `#292929` | 1.32:1 | fail |
| `#292929` | `#ffffff` | 14.55:1 | AAA |
| `#292929` | `#f7f7f2` | 13.54:1 | AAA |
| `#ffffff` | `#f7f7f2` | 1.07:1 | fail |
| `#ffffff` | `#292929` | 14.55:1 | AAA |
| `#b2c248` | `#ffffff` | 1.96:1 | fail |
| `#b2c248` | `#f7f7f2` | 1.83:1 | fail |
| `#b2c248` | `#292929` | 7.41:1 | AAA |

### Gradients

- `repeating-linear-gradient(rgb(222, 222, 222) 0px, rgb(222, 222, 222) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 80px)`
- `linear-gradient(90deg, rgb(114, 114, 110) 0px, rgb(114, 114, 110) 33.33%, rgb(254, 190, 41) 40%, rgb(255, 145, 224) 45%, rgb(206, 190, 248) 50%, rgb(210, 228, 248) 55%, rgb(209, 224, 67) 60%, rgba(0, 0, 0, 0) 66.67%, rgb`
- `linear-gradient(147deg, rgb(255, 255, 255) 30%, rgb(250, 247, 245) 72%)`
- `linear-gradient(90deg, rgb(41, 41, 41) 0px, rgb(41, 41, 41) 33.33%, rgb(254, 190, 41) 40%, rgb(255, 145, 224) 45%, rgb(206, 190, 248) 50%, rgb(210, 228, 248) 55%, rgb(209, 224, 67) 60%, rgba(0, 0, 0, 0) 66.67%, rgba(0, 0`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| melange | `--font-body` | webfont | 400, 600, 500, 430 | Body copy, navigation, buttons, captions, and most interface text | DM Sans |
| quadrant | `--font-display` | webfont | 400 | Display headlines and prominent hero or feature statements | DM Serif Display |

- **melange:** Mostly regular weight; controls use a slightly stronger measured weight. Keep case natural and tracking restrained.
- **quadrant:** Regular-weight editorial serif; large headlines use tight tracking and compact line spacing.

### Type scale — Perfect Fifth (ratio ≈ 1.465, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 108px | 400 | 0.97 | -0.02em | — | quadrant | Oversized hero-scale editorial statements and major page headlines. |
| h1 | 48px | 400 | 1 | -0.015em | — | quadrant | Main hero headline and top-level feature title. |
| h2 | 39.5px | 400 | 1.15 | -0.01em | — | melange | Section headings, including prominent feature and testimonial titles. |
| h3 | 36px | 400 | 1.1 | 0 | — | quadrant | Secondary feature headings and product-explanation titles. |
| h4 | 32px | 400 | 1.05 | -0.01em | — | quadrant | Smaller feature and product-interface headings. |
| body | 16px | 400 | 1.5 | 0 | — | melange | Feature descriptions, testimonial copy, and explanatory text. |
| caption | 12px | 400 | 1.5 | 0.02em | — | melange | Badges, attribution, and small supporting labels. |
| button | 16px | 430 | 1.13 | 0.01em | — | melange | Download actions and compact call-to-action controls. |
| nav | 14px | 400 | 1.71 | 0.01em | — | melange | Header links and compact navigation labels. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 3, 4, 6, 8, 9, 10, 12, 16, 20, 24, 32, 36, 40, 48, 52, 56 px.
- Section rhythm 40px · element gap 8px · card padding 46px · max content width 1280px.

The page uses a measured maximum content width of 1280px, with a compact overall density but generous visual breathing room. The hero is a two-column composition: left-aligned copy and CTA beside a large layered product visual. Subsequent sections alternate centered statements, split feature rows, and wide contrast bands. Feature explanations pair concise text with interface imagery; several late-page sections use horizontal rules to anchor title-and-description rows above expansive media areas. Keep section transitions clear and preserve the unusually open whitespace around product showcases.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `6px` · badge `9999px` · nav `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · 2xl `24px` · pill `9999px`
- Shadow `lg` (card): `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 8p`
- Shadow `inset` (other): `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, rgb(41, 41, 41) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (other): `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 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px `
- Shadow `lg-2` (media): `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`
- Shadow `hairline` (card): `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(71, 67, 42, 0.05) 0px 0px 0px 6px`
- Shadow `sm` (other): `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 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with hairline borders and restrained inset outlines doing much of the separation work. Product windows sit above contextual media through layering and occasional soft shadows, rather than heavy card elevation. Buttons and badges are pill-shaped, while feature media uses lightly rounded corners. Preserve the contrast bands as flat color fields.

## Imagery

The defining visuals are product-interface mockups: pale note windows with restrained controls, layered over meeting or device context imagery. Hero art combines a vivid lime panel, dark textured backdrop, and floating note interface. Testimonial cards use simple, high-contrast typography and small visual accents rather than prominent portrait photography. Keep media crisp and lightly framed; colors inside mockups should not redefine the site palette.

## Components

### Primary download button

Pill-shaped call to action; hero uses Deep Olive #5b6f00 with off-white text, while later actions also appear charcoal.

### Top navigation

Compact header with charcoal links, centered navigation items, and subdued outlined or filled pill controls.

### New badge

Small rounded Badge Lime #d1e043 label with charcoal text, placed beside the Apple Watch announcement.

### Product note mockup

Pale rounded note window layered over contextual media, with compact meeting metadata and understated controls.

### Feature row

Open split layout pairing a short heading and explanatory copy with a product image or interface visual.

### Testimonial panel

Charcoal full-width section with centered light serif heading and bordered quote cards.

### Meeting-memory band

Olive Lime #b2c248 full-width feature section pairing a large serif title with a bright chat interface.

### Measured component styles

- **Primary button** (“Download for free”): background #5b6f00 · text #fcfcf8 · radius 3.35544e+07px · padding 9px 24px · 430 16px melange
- **Secondary button** (“Enterprise”): transparent background · text #292929 · border 1px solid · radius 3.35544e+07px · padding 6px 12px · 400 14px melange
- **Card** (““ Granola was one of those things that j”): transparent background · text #0e0f0c · border 1px solid #ffffff · radius 0px · padding 36px 56px · 400 16px melange
- **Badge** (“New”): background #d1e043 · text #292929 · radius 10px · padding 2px 8px · 500 12px melange
- **Navigation item** (“Features Notepad The AI notepad for peop”): transparent background · text #292929 · radius 0px · padding 0px · 400 16px melange

## Do

- Use white space as a defining part of the composition.
- Set major statements in an expressive editorial serif.
- Use olive lime for clear, purposeful emphasis.
- Pair concise feature copy with relevant product-interface imagery.
- Alternate open white sections with occasional full-width contrast bands.
- Keep borders and shadows subtle around interface surfaces.

## Don't

- Do not add a dense, persistent colored background.
- Do not use bright accents as general-purpose decoration.
- Do not replace the editorial display serif with generic bold sans headlines.
- Do not crowd product imagery with surrounding copy.
- Do not make every section a raised card.
- Do not treat mockup colors as the core brand palette.

## Agent prompt

Build a new page in Granola’s calm, editorial product style. Use Gallery White #ffffff as the main canvas, Soft Charcoal #292929 and Near Ink #0e0f0c for text, and Oat Surface #f7f7f2 for occasional quiet bands. Reserve Olive Lime #b2c248 and Deep Olive #5b6f00 for meaningful product emphasis and primary actions; use Badge Lime #d1e043 sparingly. Set display statements in an expressive serif similar to Quadrant, with a clean sans such as DM Sans for body, navigation, and controls. Keep layouts wide and open, with concise left-aligned feature copy beside layered, pale product-interface imagery. Alternate split features with occasional charcoal or lime full-width sections. Favor thin rules, subtle rounding, and restrained shadows over card-heavy elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Header above a spacious two-column hero, with left-aligned copy and layered product art on the right. | New-product announcement, Primary download CTA, Platform availability note | Serif display headline, Lime pill badge, Layered note mockup, Pill CTA |
| 2 | feature-split | Two-column feature section with heading and benefit list alongside product imagery. | Benefit-led explanation, Privacy reassurance, Compatibility cues | Editorial heading, Compact icon-led points, Product screenshots |
| 3 | logo-cloud | Centered headline followed by a dark, multi-column logo field. | Social proof, Recognizable customer logos | Charcoal band, Centered serif title, Monochrome logo grid |
| 4 | how-it-works | Open white section with a heading offset above a two-column workflow area. | Before-during-after framing, Progressive explanation | Large serif heading, Small step labels, Open whitespace |
| 5 | feature-grid | Three sequential feature blocks combining explanatory copy and interface media. | Sequential meeting stages, Task-focused benefits | Three feature headings, Layered note screenshots, Small supporting lists |
| 6 | feature-split | Full-width olive band with large title on the left and chat interface on the right. | Feature spotlight, Conversational product example | Olive background, Oversized serif title, Bright rounded chat panel |
| 7 | testimonials | Full-width charcoal section with centered heading and a multi-column quote-card grid. | Customer testimonials, Attribution and company proof | Light serif heading, Outlined quote cards, High-contrast text |
| 8 | feature-split | Wide white feature area with a large heading followed by a ruled text-and-media row. | Differentiation from meeting bots, Product explanation | Serif section headline, Thin divider, Large media area |
| 9 | integrations | Open section with a horizontally aligned feature label, description, and broad media area. | Cross-platform compatibility, Use-case reassurance | Thin top rule, Compact explanatory copy, Wide feature media |
| 10 | feature-split | Ruled feature row with heading and explanatory text above generous media space. | Privacy reassurance, User-controlled sharing | Two-column text row, Thin divider, Open media area |
| 11 | feature-split | Two-column feature block with text, mobile CTA, and device imagery. | Mobile download action, In-person use case | Editorial heading, Dark pill button, Device mockups |
| 12 | feature-split | Ruled text row above a wide desktop notification or calendar-interface image. | Automatic meeting detection, One-click entry point | Compact feature copy, Wide device crop, Product notification |
| 13 | cta | Two-column closing CTA on a warm off-white surface. | MCP integration introduction, Download action | Warm surface band, Large serif headline, Pill CTA |

## Source CSS custom properties (selected)

```css
--oats-border-focus: #b2c24899;
--oats-border-hairline: #47432a33;
--oats-fill-accent: #5b6f00;
--oats-fill-accent-highlight: #788c1526;
--oats-fill-accent-highlight-strong: #5b6f0033;
--oats-fill-accent-hover: #4c5616;
--oats-fill-primary: #292929;
--oats-fill-primary-hover: #4e4d4b;
--oats-ink-accent: #788c15;
--oats-ink-accent-strong: #5b6f00;
--oats-ink-primary: #292929;
--oats-ink-primary-inverse: #fcfcf8;
--oats-ink-primary-inverse-static: #fcfcf8;
--oats-ink-primary-static: #292929;
--oats-ink-secondary: #72726e;
--oats-ink-secondary-inverse: #9e9e99;
--oats-ink-secondary-inverse-static: #9e9e99;
--oats-ink-secondary-static: #72726e;
--oats-ink-secondary-strong: #4e4d4b;
--oats-ink-secondary-strong-inverse-static: #acada8;
--oats-ink-secondary-strong-static: #4e4d4b;
--oats-surface: #f7f7f2;
--oats-surface-accent-blue: #eaf4fe;
--oats-surface-accent-green: #f2f6e1;
--oats-surface-accent-purple: #f3f0fa;
--oats-surface-elevated: #fff;
--oats-surface-overlay: #818179;
--oats-surface-raised: #fff;
--oats-surface-sunken: #f2f2ec;
--oats-surface-tooltip: #363635;
--oats-surface-tint-accent: #e5eacd;
--oats-surface-tint-neutral: #625a220f;
--background: 0 0% 100%;
--foreground: 0 0% 0%;
--card-foreground: 0 0% 0%;
--popover-foreground: 0 0% 0%;
--primary: 0 0% 5%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 27%;
--secondary-foreground: 0 0% 100%;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/granola-ai