What is Granola's primary brand color?

Granola's brand voltage is olive-oat green #5b6f00, wired into the CSS as --oats-fill-accent, --color-oats-green-500, and --color-fill-accent. It fills the single primary CTA pill (Download for Mac) and surfaces as the accent-strong tone in product chrome. A lighter oat-green variant #b2c248 (oat-green-300) carries 81 occurrences as a soft accent background and ring color; the brightest variant #d1e043 (oat-green-200) appears 20 times inside gradient stops. The yellow accent #febe29 (oat-yellow-200) is the second voltage — the yellow highlighter mark wrapped around action verbs in the body copy. Together the olive and the yellow form the brand's two-tone identity.

What typefaces does Granola use, and what should I use as substitutes?

Granola runs two typefaces from KMR's foundry. Quadrant carries the display tier — the 68px hero headline, the 48px section headings, the 36px section sub-headings, all at weight 400 with -1.02px to -0.72px negative tracking. Melange Grotesk carries the body tier — body copy at 14-16px, sub-headings at 24px, button labels at 13-14px, all at weight 400 with a small 0.01em letter-spacing. A third nested layer of system-ui sans appears inside nested-tweet quotes (referenced as -apple-system, system-ui, Segoe UI, Roboto). The closest open-source substitutes are Fraunces for Quadrant display and Geist or Inter for Melange body. To preserve the warm-indie feel, the serif display is the move worth keeping.

What is the yellow-highlighter inline accent?

Granola wraps action verbs in the body copy ('transcribes', 'enhances', 'helps') with a yellow highlighter mark — a horizontal oat-yellow #febe29 strip with rounded ends that sits behind the text like text marked in a paper notepad. The effect is rendered as a CSS background-color on an inline span, not as a true highlight gesture, but the visual reads as the marker stroke from a Sharpie highlighter. The accent is reserved for verbs only — never for nouns or adjectives — and never appears on more than one verb per sentence. Across the captured page it appears six times. It is the brand's clearest visual gesture toward the paper-notepad metaphor that the product name (granola, a textured handheld thing) plays on.

Why is every CSS variable prefixed with --oats-?

The brand's metaphor leans into the granola namesake — the design system's CSS custom-property scale is wired entirely under --oats-* namespaces. Every neutral has both a numbered variant (--color-oats-neutral-50 through --color-oats-neutral-900) and a semantic role (--oats-ink-primary, --oats-fill-accent, --oats-surface-raised, --oats-border-hairline). Color families are oats-green (300-500), oats-yellow (200-300), oats-pink (100-200), oats-purple (100-200), oats-red (100-400), oats-gold (100), oats-blue (200). The naming is functional — the build pipeline maps oats-* into a flat token system — but the choice to surface a food metaphor inside the CSS itself is the system's most explicit identity gesture.

Can I use this DESIGN.md to build my own indie AI-tool marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Granola's specific moves: warm cream canvas at #f7f7f2 instead of pure white, olive-oat-green CTA pill at #5b6f00 instead of cobalt or violet, Quadrant + Melange typeface pairing instead of a single sans, yellow-highlighter inline accent on action verbs, pill-rounded note tiles, and the oats-namespaced color tokens. Every hex, font, radius, and spacing value is a quoted scalar ready to paste into Tailwind config or CSS variables. The single most distinctive move to borrow is the warm-cream surface ladder — pure-white surfaces lifted off a slightly-warmer canvas — which gives the page its indie-papery feel without requiring photographic assets.

Granola Design System

Granola's marketing system pairs Quadrant serif display with Melange Grotesk body, an olive-oat-green primary CTA, and a yellow-highlighter inline accent on a warm cream canvas.

About Granola DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source granola.ai

AI & LLM Platforms
Productivity & SaaS

Granola's marketing page is the only entry in the AI productivity category that commits to a warm-indie aesthetic instead of the standard dark-mode dev-tool look. The hero centers a 68px Quadrant serif-flavored display headline ("The AI notepad for people in back-to-back meetings") in near-black on a warm cream canvas, with a single olive-green pill CTA ("Download for Mac") beneath. To the sides of the heading, cropped photographs of meeting participants sit flush against the page edges, as if the visitor is already inside the call. Verbs in the body copy ("transcribes", "enhances") are wrapped in a yellow highlighter mark, like text marked in a paper notepad.

The DESIGN.md file captures the system as a token spec for React tooling. Inside: 20 color tokens drawn from the oats-named palette — Granola wires every neutral and accent as --color-oats-* (oat-green-300 through oat-green-500, oat-yellow-200/300, oat-pink-100/200, oat-purple-100/200, oat-neutral-50 through 900) — organized into a warm cream surface ladder, an olive-oat-green brand voltage, and a yellow-highlighter inline accent. 12 typography tokens span Quadrant serif at 48-68px for display and Melange Grotesk at 13-24px for body, plus a system-ui fallback layer for nested-tweet quotes. 18 components cover the olive CTA pill, the cream pill-rounded note tile, the yellow-highlight inline accent, the warm hairline card, and the standard top nav.

Feed this file to an AI coding tool and it reproduces the specific moves: warm cream canvas instead of pure white, olive-oat-green CTA instead of cobalt or violet, Quadrant + Melange pairing instead of a single sans, yellow highlighter inline accent on action verbs, and pill-rounded note tiles with cropped human photographs. The most distinctive token group is the oats namespace itself — every neutral is named with a food metaphor, including the typescale custom-property prefix --oats- for fill, ink, surface, and stroke roles. Borrow it freely; the only move to think twice about is the cropped-photograph hero, which depends on the brand having access to staged meeting imagery.

What makes it distinct

Oats-named paletteGranola wires every neutral and accent as --color-oats-* including oat-green, oat-yellow, oat-pink, oat-purple, and oat-neutral-50 to 900
Yellow highlighter inline accentverbs like transcribes and enhances are wrapped in an oat-yellow #febe29 highlight strip, like marked text in a notepad
Quadrant serif for display, Melange Grotesk for bodytwo KMR foundry faces, a serif-sans pairing rather than the single-sans dev-tools convention
Olive-oat-green CTAthe Download for Mac primary pill sits at #5b6f00, a saturated olive that reads warm-natural rather than corporate green
Warm cream surface laddercanvas #f7f7f2 with oat-neutral-100 #f7f7f2 and oat-neutral-200 #eaebe5 cards; pure white is reserved for raised tile surfaces only

Live at granola.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

granola.ai

Explore Granola

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Granola design system FAQ

Common questions about Granola's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Granola — official site

Granola's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.