Acd Remix Granola X Criterion Design

---
name: acd-remix-granola-x-criterion-design
description: "Remix. Granola's warm cream + frosted glass + Criterion Collection's film-archive editorial rigor. For premium consumer apps that want to feel like a curated library, not a productivity tool. Use when building UI components, applying design tokens, or implementing visual styles for remix granola x criterion."
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: design-systems
  tags: [design-system, ui, remix, claude-design]
---

# Granola × Criterion — Premium Notes With Gravitas Design Mode

You are an expert in the Granola × Criterion — Premium Notes With Gravitas aesthetic from the awesome-claude-design library. Apply its visual vocabulary, palette, typography, and component patterns when building UI.

## Source DESIGN.md

Remix. Granola's warm cream + frosted glass + Criterion Collection's film-archive editorial rigor. For premium consumer apps that want to feel like a curated library, not a productivity tool.

## Parent DNA: Granola 55% · Criterion 45%

## 1. Visual Theme & Atmosphere

Granola sets the mood — warm off-white surface, soft glass on hover, generous breathing room. Criterion brings the chrome — numbered editions, monospace catalog labels, restrained spine-of-book typography, dense metadata blocks.

The result is a notetaker that reads like the Criterion Channel's library page. Cream paper, archival labels, single accent.

Mood: considered, archival, quietly premium.

## 2. Color Palette & Roles

```
/* base from Granola — warm cream paper */
--bg:              #faf8f2
--bg-alt:          #f4f0e6
--surface:         #ece6d5
--surface-glass:   rgba(255,253,247,0.72)
--text:            #1a1614
--text-muted:      #5c544a
--text-dim:        #8a8378
--border:          #e0d8c4
--border-strong:   #c8bea4

/* accent from Criterion — single archival red */
--accent:          #b32418
--accent-hover:    #931a10
--accent-soft:     #f4d6d2

/* dark mirror — Criterion spine-black */
--bg-dark:         #14110d
--bg-dark-alt:     #1f1b15
--surface-dark:    #2a251d
--text-dark:       #f4f0e6
--text-dark-muted: #b8ad97
--border-dark:     #3a3328
```

Arbitration: Granola's cream wins all surfaces — Criterion's pure white would lose the archival warmth. Criterion red replaces Granola's softer brand pink as the single accent. One accent, used like a librarian's stamp.

## 3. Typography Rules

- **Display / h1 / catalog heads:** Editorial serif (e.g. Tiempos Headline, Lyon Display) at 36px+, weight 500.
- **h2–h4 + body:** Tiempos Text or Lyon Text, weight 400 / 500. Body sits at 17/26.
- **Catalog labels + numerals + edition numbers:** GT America Mono (Criterion-adjacent), 12px, 1px tracking.
- **UI controls + chrome:** same serif body, no separate sans.

Scale: Granola's editorial ramp. 12 / 13 / 15 / 17 / 20 / 24 / 32 / 44 / 64.

Mono fires only on metadata blocks — edition number, recorded date, file size, catalog tag. Never in body.

Arbitration: Granola's warm sans body would read too soft against Criterion chrome. Lyon / Tiempos Text wins for body. Criterion's all-caps catalog labels stay — they're the spine.

## 4. Component Stylings

**Note card / catalog entry**
- `--bg-alt` fill, 1px `--border`, radius 6, no shadow.
- Top-row metadata strip in mono 12px: edition number, date, duration, tags. Spaced like a Criterion spine.
- Title in serif 24px below the strip.
- Hover: `--surface-glass` fill, backdrop-blur 12px. Granola's signature glass move.

**Button (primary)**
- Serif body, weight 500. Radius 4 (Criterion-tighter than Granola's pill).
- Fill `--accent`, text `--bg`. Padding 10/18.

**Button (secondary)**
- Transparent fill, 1px `--border`, `--text` color. Same geometry.

**Input**
- 1px `--border`, radius 4, padding 10/14, serif body.
- Focus: 2px `--accent` ring, 2px offset. No glow.

**Section heading**
- Mono catalog label above (12px, 1.5px tracking, `--text-muted`).
- Serif h2 below (32px, weight 500).
- 1px `--border-strong` rule under the pair, 16px below.

## 5. Layout Principles

- App: 1240px max, 32px gutter, 12-column.
- Reading / single-note: 680px column, centered.
- Catalog grid: 4 columns desktop, 2 columns tablet, 1 column mobile.
- 8px base. 8 / 16 / 24 / 32 / 48 / 64 / 96.

Granola's vertical rhythm holds. Criterion's contribution is the metadata strip above every card — every entry has a spine.

## 6. Depth & Elevation

Two-tier depth.

- Surfaces: flat, border-based. Granola's pattern.
- Hover / active: `--surface-glass` with `backdrop-filter: blur(12px) saturate(1.1)`. Granola's move.
- No shadows except modals (`0 16px 48px rgba(26,22,20,0.16)`).

Criterion contributes flatness — print-stock has no elevation. Granola contributes the glass moment. They alternate, never compose.

## 7. Do's and Don'ts

**Do**
- Lead every catalog entry with a mono metadata strip.
- Use the archival red for one element per viewport — primary CTA, current-edition badge, or active filter.
- Apply glass only on hover / active, never as a default surface.
- Keep body in serif — sans would break the library mood.

**Don't**
- Use the red for body links or secondary buttons.
- Stack two cards in glass mode simultaneously.
- Drop sans into UI controls.
- Add categorical color — this design is monochrome plus one red.

## 8. Responsive Behavior

- Catalog grid 4 → 2 → 1 column.
- Reading column padding-only below 720px.
- Metadata strip wraps to two lines at < 480px; mono shrinks to 11px.
- Glass hover converts to tap-flash on touch devices.

## 9. Agent Prompt Guide

Bias: warm cream surfaces, serif body + UI, mono metadata strips above every card, archival red as the single accent, glass-on-hover only, 8px base grid, catalog labels in 12px small caps mono.

Reject: pure white backgrounds, sans-serif body, multi-color accent palettes, default-state glass surfaces, drop shadows on cards, button radius > 6, abandoning the metadata strip on cards.

## Creative Tensions (documented for team)

- **Warmth vs rigor.** Granola wants softness; Criterion wants chrome. Resolution: Granola owns surface color and hover glass; Criterion owns typography hierarchy and metadata pattern.
- **Glass on cream.** Backdrop blur over warm paper can muddy the read. Cap blur at 12px and saturate at 1.1 — anything more loses the cream signature.
- **Serif UI legibility.** Serif body in form controls fights modern muscle memory. Test inputs at 15px minimum.

## Parent-brand DNA

Tokens traced:
- From Granola: 22 (cream surface palette, glass hover, warm dark mirror, 8px base, 1240px shell, hover-blur depth, soft border palette, generous vertical rhythm, single-column reading mode)
- From Criterion: 18 (archival red accent, mono catalog labels, metadata strip pattern, serif body + UI, 4px button radius, flat depth, spine-style section dividers, edition-number numerals, 1.5px label tracking)

Net DNA: Granola 55% · Criterion 45%.

## When to Use This Mode

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