AI meeting notes with editorial-notebook warmth — a #e3e3e3 warm hairline lattice, the custom Melange typeface, editorial blue #1d9bf0 as the hyperlink semantic. A handmade-journalist-tool positioning against AI surveillance anxiety.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Granola’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Granola's design language is editorial notebook warmth. A warm grey #e3e3e3 hairline lattice carries the entire layout, Melange custom typography provides the editorial voice, system fallbacks ensure graceful degradation, and a single editorial blue #1d9bf0 accent functions as a hyperlink rather than a CTA. The page reads as a journalist's open notebook — neat, warm, handmade, never robotic.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (warm light surface as primary, #e3e3e3 warm grey hairline border as primary structural element, #0e0f0c near-black text, #000000 inversion zones used sparingly, #536471 muted blue-grey for secondary text, #0f1419 deep ink for primary text variant, #1d9bf0 editorial blue accent used as hyperlink semantic, #ffffff for layered surfaces, #b2c248 olive-yellow for rare highlight callouts, #72726e warm grey for tertiary text, #292929 dark for inversion plate text), typography stack (Melange custom typeface loaded as __melange_3929d6 at 13-16px with letter-spacing 0.13-0.14px on smaller sizes, system-ui and -apple-system as graceful fallback chain), spacing scale 2/4/6/8/10/12/16/20/24/32, container ladder 552/672/768/896/1280 (multiple reading widths with magazine density), custom breakpoints sm=480 (lowered from 640) md=768 lg=992 xl=1280, CSS-only transitions (no motion library required) at cubic-bezier(0.4, 0, 0.2, 1) easing at 150-300ms. Treat #1d9bf0 as a hyperlink semantic, not a CTA paint. Apply the language, not the source brand's copy.
Explicit hairline lattice — borders organise the page as a notebook page system.
Warm light primary canvas with #e3e3e3 hairline lattice as structural identity; editorial blue #1d9bf0 as hyperlink semantic; dark elements as scarce punctuation.
Mode strategyLight-first canvas with dark inversion zones used as scarce punctuation; the warmth is the brand voice.
#e3e3e3 warm grey hairline border — primary structural brand element
#0e0f0c primary text near-black with warmth
#000000 used sparingly for inversion zones
#536471 muted blue-grey for secondary text
#0f1419 deep ink for emphasis text variant
#1d9bf0 editorial blue — hyperlink semantic, not CTA paint
#ffffff for layered surfaces on cream ground
#b2c248 olive-yellow for rare highlight callouts
#72726e warm grey for tertiary text
#292929 dark for inversion plate text
Gradients (paste-ready)
5 gradients catalogued — subtle warm-tone atmospheric depth around hero, never decorative chromatic
Melange custom typeface (loaded as __melange_3929d6) is the primary identity
System fallback chain (-apple-system, system-ui) for graceful degradation
Body 13-16px in Melange; display 32-56px
Letter-spacing 0.13-0.14px on smaller body sizes (13-14px) — Melange's small-size optical adjustment
Weight 400 across body and display — Granola trusts the typeface's silhouette
Line-height 1.5-1.6 body, 1.1-1.2 display
4px base unit, scale 2/4/6/8/10/12/16/20/24/32
32px jump between dense and breathing sections
Section vertical rhythm: 64-128px between major sections
Card padding (notebook page): 20-32px
CTA padding: 10-14px vertical, 16-24px horizontal
Surface styleHairline-lattice plates. Every notebook-page section bordered with #e3e3e3 1px; depth comes from inversion zones and layered cream surfaces.
≥992: container ladder 768/896/1280, multi-column notebook layouts on desktop
Body text #0e0f0c on warm light passes WCAG AAA
Editorial blue #1d9bf0 on white passes AA at 14px+
Hairline border visible but soft — UI element contrast 1.3+
Focus visible state always present
Respect prefers-reduced-motion
Custom Melange typeface loaded as __melange_3929d6 woff2System fallback chain (-apple-system, system-ui)CSS-only transitions — no motion library required
Typography + hairline lattice are the entire visual identity. No 3D, no decorative illustration, occasional product screenshot in notebook-page card.
Melange preloaded as woff2 subset
System fallback gracefully on font-display: swap
10 CSS transitions composed inline, no animation library
Use warm grey #e3e3e3 hairline borders as the primary structural identity
Commit to Melange (or equivalent custom editorial typeface)
Apply 0.13-0.14px letter-spacing to body text at 13-14px sizes
Treat editorial blue #1d9bf0 as a hyperlink semantic, not a CTA paint
Don't paint surfaces in editorial blue — the colour is voice, not paint
Don't remove the hairline lattice — it is the brand's structural identity
Don't add a JS motion library — CSS transitions are sufficient
Don't tighten letter-spacing below 0.13px on body type — Melange's small-size adjustment depends on it
Light-first canvas with dark inversion zones as scarce punctuation
Type stack: Melange + system fallback chain
Editorial blue #1d9bf0 used as hyperlink semantic only
Hairline border #e3e3e3 presence: high frequency across notebook-page cards
Font-family grep: __melange_3929d6 (or equivalent Melange) + system fallback chain
Letter-spacing: 0.13-0.14px applied on body type at 13-14px sizes
Editorial blue #1d9bf0 usage: hyperlink text only, never as fill on CTAs
Motion library: no GSAP / no Framer Motion required — CSS transitions only
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 13 nodes across 6 levels, shallow to deep by color.
body4
Nav
Main1
div2
Section
div3
Section (×3)
div1
Section
Section (×3)
Footer1
Section
div
Accessibility
Contrast matrix
294 combinations - 116 pass AA - 70 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox19.23
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0E0F0C
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox19.23
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#0E0F0C
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox18.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0F1419
bg
#FFFFFF
APCA Lc
+105
Use
foreground on background
AaThe quick brown fox18.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#0F1419
APCA Lc
-107
Use
background on foreground
AaThe quick brown fox17.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#EAEBE5
APCA Lc
+94
Use
foreground on background
AaThe quick brown fox17.51
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EAEBE5
bg
#000000
APCA Lc
-94
Use
background on foreground
AaThe quick brown fox16.98
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#E5EACD
APCA Lc
+92
Use
foreground on accent
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
