---
name: Notion
description: Warm minimal. Cream backgrounds, friendly serif accents, generous spacing, hand-drawn illustration hints, intentional imperfection.
---

# Notion

Notion's visual language is "the warm side of minimal" — paper-cream backgrounds, deliberate typographic warmth, hand-touched illustration, and a slight wabi-sabi to keep it from feeling sterile.

## 1. Color

- **Primary** `#000000` — text and primary CTAs are pure black on cream.
- **Background** `#FBFAF6` (cream), `#FFFFFF` for cards, `#F1EFE6` for raised/disabled.
- **Foreground** `#37352F` (warm black, never pure black on body), `#787774` for secondary, `#9B9A97` for tertiary.
- **Accent colors** are reserved for tags / highlights. They are intentionally desaturated:
  - red `#E03E3E`, orange `#D9730D`, yellow `#DFAB01`, green `#0F7B6C`,
    blue `#0B6E99`, purple `#6940A5`, pink `#AD1A72`, brown `#64473A`.
- **Surface tint backgrounds** for tags use ~14% opacity of the above.

## 2. Typography

- Display: a warm sans — Inter or GT Walsheim. **Optional serif accent** (a single Georgia / Lyon / IBM Plex Serif italic phrase) appears on hero headlines.
- Body: Inter, 16px / 1.6.

Sizes:
- Display L: 56px / 1.05 / 700
- H1: 36px / 1.15 / 700
- H2: 24px / 1.3 / 700
- Body: 16px / 1.6 / 400
- Caption: 13px / 1.5 / 500

The signature move is **mid-headline italic serif phrase** — "Build the **next** generation of work" with "next" set in a Lyon italic. Use sparingly, max once per page.

## 3. Spacing

8px base. Editorial generosity — section padding 80-120px vertical on landing pages.

## 4. Layout

- Max width: 960px text content, 1080px wide media.
- Centered, but the left edge of headlines often hangs slightly into the margin (typographic indulgence).
- Lots of negative space around CTAs.

## 5. Components

Buttons:
- Primary — black background, white text, 4px radius, no shadow. Hover: subtle lift via shadow.
- Secondary — `#FBFAF6` background with `#37352F` text, 1px hairline border at `rgba(55,53,47,0.16)`.

Cards: white on cream background, 6px radius, hairline 1px border at `rgba(55,53,47,0.09)`.

Inputs: 4px radius, hairline border, focus glows to a 2px subtle ring.

Illustrations: **hand-touched line art** is a signature element — slightly imperfect strokes, occasional rough fill, soft warm accent color. AVOID polished 3D abstract gradients.

## 6. Motion

Soft + medium — 200-280ms. Easing: `cubic-bezier(0.4, 0, 0.2, 1)`. Hover states are about a 2% color shift, not a layout pop.

## 7. Voice

- Headlines: warm, declarative, often self-aware. "All-in-one workspace." "Your wiki, docs, and projects. Together."
- Body: conversational. Uses "we" and "you". Allowed to be a little playful.
- Microcopy: human. "+ Add a page", "Quick find", "Customize", "Wait, I changed my mind".

## 8. Brand

- The "+" plus-icon is a brand element — used heavily, slightly oversized.
- The slash command (`/`) is canonical — show it in screenshots.
- Hand-drawn page emojis (📝 🎉 🧱) appear in marketing and product alike.

## 9. Anti-patterns

- Pure black backgrounds. The brand is warm minimalism, not aggressive darkness.
- Sharp drop shadows. Notion shadows are diffuse and very subtle.
- Sans-serif italic. If you go italic, go serif.
- Border radius > 8px on functional UI.
- Geometric 3D illustrations. Stick to line art with soft fills.
- "Get started!" with exclamation marks. The voice is calm.
- Vibrant rainbow gradients.
