---
name: Granola
description: "The site is an excellent example of how a refined, organic aesthetic can make a tech product feel approachable and calm."
version: alpha

colors:
  background: "#FBFBF6"
  primary: "#0E0F0C"
  secondary: "#536471"
  tertiary: "#B2C248"
  neutral: "#D5D5D2"
  bg-soft: "#EAEDE5"
  bg-quiet: "#F7F7F2"
  line: "rgba(227, 227, 227, 1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "-0.72px"
  h2:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.54px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

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

*A calm, intelligent assistant that quietly organizes your day.*

## Colors

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

- **Background (`#FBFBF6`)** — uses `bg` token
- **Primary text (`#0E0F0C`)** — uses `ink` token
- **Secondary text (`#536471`)** — uses `ink-soft` token
- **Accent (`#B2C248`)** — uses `accent` token
- **Muted (`#D5D5D2`)** — uses `muted` token
- **Borders (`rgba(227, 227, 227, 1)`)** — uses `line` token

## Typography

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

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

## Layout

Centered, single-column content flow with generous padding.

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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