granola.ai — Design System

1. Visual Theme & Atmosphere

Granola is one of the most coherent design systems in the AI productivity space — a full custom token library (“oats”) that encodes not just colours but a philosophy: warm neutrals, olive-tinted greens, and a surface that feels like cream paper rather than a screen. The product is a meeting notes tool, and the design feels like what note-taking should feel like — calm, organic, analogue-adjacent. The olive/lime accent (#788c15, #5b6f00) runs through every interactive element, providing brand identity through colour chemistry rather than logos. Two custom typefaces — Quadrant for display and Melange for reading — signal that typography investment is the real differentiator here.

2. Color Palette & Roles

Base surfaces (the “oats” system)

• Surface: #f7f7f2 — warm off-white, paper-like
• Surface elevated: #ffffff — pure white for cards/modals
• Surface sunken: #f2f2ec — slightly darker inset areas

Ink (text)

• Primary: #292929 — warm dark, not cold black
• Secondary: #72726e — muted warm grey
• Secondary strong: #4e4d4b
• Tertiary: #acada8 — placeholder/metadata level

Brand accent (olive green)

• #788c15 — ink/text on accent contexts
• #5b6f00 — fill/strong accent (darker olive)
• #b2c248 — border focus ring (bright lime)
• Accent tint: #788c1526 — gossamer green overlay

Semantic

• Danger: #e95d3d — warm coral red
• Danger hover: #bd4a30

Data/status dots (from content analysis)

• rgb(178, 194, 72) — lime/olive bullet
• rgb(184, 213, 255) — light blue bullet
• rgb(237, 225, 161) — pale yellow bullet
• rgb(233, 93, 61) — coral/red bullet
• rgb(254, 190, 41) — amber bullet

Surface tints (accent-blue, green, purple panels)

• #eaf4fe, #f2f6e1, #f3f0fa — section distinction without harsh borders

What’s absent: No pure black, no dark mode, no neon colours. Everything is temperature-adjusted toward warm.

3. Typography Rules

The two-font pairing is rare and intentional: Quadrant (a display serif) for headings, Melange (a humanist text font) for reading.

Quadrant at weight 400 (not bold) for the largest headings — this is deliberate restraint. The 68px H1 at −1.02px tracking achieves mass through size alone. Melange’s slight positive tracking on paragraphs (+0.14px) improves reading rhythm at small sizes. The H2 at weight 300 feels like editorial subheadings in a printed magazine.

No uppercase transforms. No condensed variants. Vertical rhythm is tight — H1 at 1.0× line-height (68/68), body at 1.5×.

4. Component Stylings

Buttons

• Primary fill: #292929 with white text — warm dark, not cold black
• Accent: #5b6f00 (olive) fill
• Hover states live in the token system (defined via CSS variables)

Cards — border-radius: 8px standard, 9999px for pill-shaped elements. An extreme 3.35544e+07px (computed max) appears for fully-rounded elements where border-radius: 50% would be expected.

Shadows — extremely minimal:

• rgba(0,0,0,.15) 0 0 0 1px — 1px border-as-shadow for card outlines
• rgba(0,0,0,.03) 0 0 36px — barely-perceptible ambient glow
• rgba(0,0,0,.03) 0 0 2px inset — inner shadow for sunken inputs

Borders — --oats-border-hairline: #47432a33 — a warm brown at 20% opacity, so borders feel like aged paper rather than sterile lines.

5. Layout Principles

Sections use 64px bottom padding — restrained compared to typical SaaS. The 16px gap within sections creates comfortable density. No horizontal padding on <main> — full bleed at the container level with inner gutters applied per-section.

Breakpoints: 480–1024px span, with 639px and 991px as the primary mobile/tablet pivots. Ten breakpoints total suggests careful responsive work but with a max-width of ~1024px implying a deliberately narrow, reading-focused layout.

6. Depth & Elevation

Granola achieves elevation almost entirely through background temperature shifts:

• White (#fff) floats above warm off-white (#f7f7f2)
• Sunken areas use #f2f2ec — slightly cooler
• The accent tints (#eaf4fe etc.) create visual sections without borders

Shadow is so minimal it’s almost ornamental. The design trusts colour warmth gradations to signal hierarchy — a sophisticated, analogue approach that mirrors the product’s notebook metaphor.

7. Do’s and Don’ts

Do:

• Use #f7f7f2 as the default page background — never pure white or grey
• Apply Quadrant only for H1, H3, and blockquotes — Melange handles everything else
• Use the olive accent (#788c15/#5b6f00) sparingly for CTAs and focus states
• Set borders using #47432a33 — warm brown at low opacity, never cold grey
• Use the bullet-dot colour system for data visualisation inline elements

Don’t:

• Use cool greys — every neutral should have warm undertones
• Bold headings — Quadrant at weight 400 is the intended voice
• Add shadow depth beyond the three minimal values
• Apply the accent tints (#eaf4fe, #f2f6e1, #f3f0fa) as primary backgrounds — they’re accent zones
• Use pure #000000 anywhere

8. Responsive Behavior

Ten breakpoints (480–1024px) including tight pairs at 639/640 and 991/992 indicate precision micro-adjustments. The narrow max (~1024px content width) means the design doesn’t dramatically reflow — it’s already narrow on desktop. The primary mobile collapse is at 640px. The 68px Quadrant H1 likely scales to ~36–44px at mobile.

9. Agent Prompt Guide

Recreate the granola.ai design language. Set page background to #f7f7f2 (warm off-white). Use Quadrant serif at weight 400 for H1 (68px, −1.02px tracking) and blockquotes. Use Melange humanist text for all body, buttons, and UI at 16px weight 400. Primary text is #292929 (warm dark). Olive brand accent is #5b6f00 for fills, #788c15 for text. Card borders use rgba(71,67,42,.2) — a warm brown hairline. Shadows are near-invisible: rgba(0,0,0,.15) 0 0 0 1px for card outlines only. Use #fff elevated cards over #f7f7f2 page background to create depth through warmth. The semantic danger colour is #e95d3d (coral, not red).

Generated by Sparkbites — extracted from live CSS analysis