2.8 KiB
2.8 KiB
notion-pre-ai — Notion (pre-AI era, c. 2017–2022)
- School: Modern Tool / Builder SaaS (warm-leaning, near Humanist border)
- Vibe: Friendly serif headline + emoji as first-class design element + soft cream + black ink
- Best for: Productivity tools for non-engineers, collaborative software, "your second brain" products
- Touchstone: notion.so pre-2023 redesigns (Wayback), early Notion marketing decks
Palette
- Ground:
#FFFFFF - Soft cream surface:
#F7F6F3 - Ink:
#37352F(Notion's specific not-quite-black, warm cast) - Secondary text:
#787774 - Hairline:
#E9E9E7 - Accent palette: muted Notion colors —
#E4F4F1(mint),#FFEDD5(peach),#FCE7F3(rose),#FEF3C7(sand) — used as soft block backgrounds, never as bright accents
Typography
- Display: a friendly modern serif — GT Sectra, Sentinel, or Source Serif Pro. Weight 500 for headlines.
- Body: Inter or Söhne at 16px, line-height 1.6, weight 400
- Emoji set at 1.25× body size, used as section markers and "page icons"
Spacing: 4 / 8 / 16 / 24 / 40 / 64
Radius: 4 (small UI) / 8 (cards) / 16 (large panels)
Shadow: very soft — 0 2px 8px rgba(15, 15, 15, 0.04). Notion's shadows are felt, not seen.
Motion: gentle ease-out around 200–300ms. Hover lifts cards by 2–4px with a soft shadow expansion.
Signature moves
- Section headers prefixed with a single emoji icon (
📖 Notes,🌱 Ideas) — the emoji is the visual hierarchy - Hand-drawn doodles or simple line illustrations integrated into the hero (Notion's signature illustration style)
- Block-based content metaphor visible in the layout — content reads like draggable cards rather than columns
- Color-tagged soft pills for category labels (mint = active, peach = idea, etc.)
- Friendly conversational microcopy
Avoid
- Too many emoji in close proximity (one per section header is the recipe, not five)
- Dark mode unless explicitly required (Notion's identity is light)
- Sans-serif headlines — the friendly serif is the differentiator
- Aggressive CTAs — Notion's hero CTA reads as an invitation, not a demand
AI prompt seed
Hand-drawn doodle illustration, simple black-line drawing of an organized desk scene with notebooks and houseplants, on cream #F7F6F3 background, friendly approachable line work, small color washes in soft mint and peach, 3:2.
Don't use when
- The audience is enterprise-serious — emoji as design will read as unprofessional
- The product is graphics-heavy or needs visual density — Notion's recipe is text-led
- The voice is meant to be authoritative — Notion is approachable, not commanding
Same school — Modern Tool / Builder SaaS:
linear·vercel-mesh·raycast
Browse all 25 recipes: INDEX.md