# 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`](./linear.md) · [`vercel-mesh`](./vercel-mesh.md) · [`raycast`](./raycast.md)  
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)