teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/notion-pre-ai.md

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