Inspiration tag · 5 sites catalogued
Productivity marketing pages
5 sites in our growing collection share the productivity signal — Granola, Chronicle, Obsidian OS, and 2 more. Each catalogued page carries a paste-ready 24-field design brief — palette, typography, spacing, motion — that an AI agent can drop into Claude, Cursor, or v0.
Full Page · light
Granola
AI meeting notes'un editorial-notebook warmth çalışması — #e3e3e3 warm hairline lattice, custom Melange typeface, editorial blue #1d9bf0 hyperlink semantic. AI surveillance kaygısına karşı 'handmade journalist tool' positioning.
Full Page · both
Chronicle
Dark-first motion-driven presentation tool landing — Diatype as the sole sans family across 12 typographic moments, classic web blue #0000ee as the only accent, GSAP-choreographed section reveals and Lottie product UI demos turning the page itself into a keynote build. Restraint plus motion as primary copy.
Full Page · light
Obsidian OS
Glass-surface near-monochrome OS-aspirational marketing — dark canvas with translucent panels, restrained warm-neutral accent, generous serif display moments paired with sans body, and slow deliberate motion that mirrors macOS-style spring physics. Refinement is the brand promise.
Full Page · both
Notion
The productivity-tool landing that treats the interface itself as the product — every surface feels like a well-crafted page in a well-crafted notebook. Notion carries paper-feel warmth on a warm off-white canvas, pairs a commissioned optical sans (NotionInter) with a serif (Lyon Text), a monospace (iA Writer Mono), and a sticker font (Permanent Marker), then cascades 4-5 soft shadow layers at sub-5% opacity to simulate ink on real paper. Rainbow accents are semantic vocabulary — link blue, editorial orange, citation brown — each tied to a specific content role.
Full Page · dark
Raycast
The productivity-tool landing that treats the web page like a macOS system preference window — and commits to the bit with every shadow, radius, and easing curve. Raycast ports native-app discipline to the browser: skeuomorphic keyboard-key shadows, half-pixel precision radii, a dual-family typography duet, and an open 80-variable token system that reads like a Figma Tokens Studio export.