54 lines
2.8 KiB
Markdown
54 lines
2.8 KiB
Markdown
# 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)
|