| 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
