Acd Indie Granola Design

---
name: acd-indie-granola-design
description: "Reference DESIGN.md for warm-glass AI notetaker aesthetic. Not in VoltAgent's catalog. Worth cloning. Use when building UI components, applying design tokens, or implementing visual styles for indie granola."
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, indie, claude-design]
---

# Granola — Cult / Indie Design Mode

You are an expert in the Granola — Cult / Indie aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Reference DESIGN.md for warm-glass AI notetaker aesthetic. Not in VoltAgent's catalog. Worth cloning.

## 1. Visual Theme & Atmosphere

Warm glass. Editorial serif meets soft frosted surfaces over cream backgrounds. Feels like a premium paper notebook that happens to be software.

Mood: calm, considered, indie-premium.

## 2. Color Palette & Roles

```
--bg:              #faf8f2   /* warm cream */
--bg-gradient:     radial-gradient(at 30% 0%, #fff4e0 0%, transparent 50%),
                   radial-gradient(at 80% 20%, #f4e4d4 0%, transparent 60%);
--surface:         rgba(255, 251, 244, 0.7)   /* frosted warm white */
--text:            #1a1814
--text-muted:      #6a5f52
--border:          rgba(26, 24, 20, 0.08)
--accent:          #b45837   /* muted terracotta */
--accent-soft:     #e4b894
```

## 3. Typography Rules

- **Headlines:** editorial serif — `PP Editorial New`, fallback `Tiempos Headline`. Weight 400–500.
- **Body:** `Söhne`, fallback `Inter`. Weight 400, 16–17px.
- **UI:** Söhne medium, 14px.

Scale: 13 / 15 / 17 / 20 / 26 / 36 / 52.

Light weights dominate. Avoid anything above 600.

## 4. Component Stylings

**Buttons**
- Primary: `--accent` fill, cream text, radius 10, padding 10/18, weight 500.
- Secondary: `--surface` frosted, 1px `--border`, backdrop-blur 12px.

**Cards / notes**
- `--surface` frosted fill, 1px `--border`, radius 14.
- Backdrop-filter `blur(16px) saturate(150%)`.
- Inner highlight `inset 0 1px 0 rgba(255, 255, 255, 0.6)`.

**Inputs**
- Nearly invisible — `--surface` fill, no visible border until focus.
- Focus: 2px `--accent` ring, 2px offset.

## 5. Layout Principles

- Max 680px for reading, 1000px for app shell.
- Gradient fixed on body, content scrolls over it.
- Vertical rhythm: generous, 40–64px section breaks.

## 6. Depth & Elevation

Glass depth. Backdrop blur on every surface. Soft warm shadows `0 8px 32px rgba(180, 88, 55, 0.08)`.

## 7. Do's and Don'ts

**Do**
- Let the warm gradient show through every surface.
- Use serif for any editorial moment (empty states, onboarding).
- Keep weights light; avoid bold.

**Don't**
- Use cold blues or grays — everything bends warm.
- Use Inter for display type.
- Add heavy shadows or hard borders.

## 8. Responsive Behavior

- Gradient simplifies on mobile.
- Blur intensity halved (8px) for performance.
- Single column, generous padding.

## 9. Agent Prompt Guide

Bias: cream base, warm radial gradients, frosted white surfaces, editorial serif for display, light weights, muted terracotta accent.

Reject: cold neutral palettes, sans-serif-only hierarchies, dark-mode primary, high-contrast saturated accents.

## When to Use This Mode

- When user references **granola** or the **indie** family as inspiration
- When building UI in the indie aesthetic
- When applying this brand's color palette, typography, or layout patterns
- When critiquing UI for adherence to this aesthetic