# Notion

> Generated by BrandSweets from the notion BrandDoc (v2, schema 1). Do not edit by hand.

## Identity

**Tagline:** The connected workspace where better, faster work happens.

**Mission:** Make toolmaking ubiquitous — give everyone the power to shape their own tools.

**Sector:** productivity software

**Audience:** teams and individuals organizing knowledge and work

**Founded:** 2013

**Domain:** notion.so

**Guidelines:** https://www.notion.so/brand


Notion is a single space where teams write, plan, and organize. It replaces a stack of disconnected tools with flexible building blocks — docs, wikis, projects, and databases. The brand is warm and human: near-black ink on a soft off-white, a friendly monoline mark, and a generous, hand-selected palette of highlight colors that lets every page feel personal.

### Values

- **Toolmaker spirit** — Everyone can shape their own tools — the brand invites making, not just using.
- **Warmth** — Software can feel human. Warm surfaces, warm words.

## Voice

**Tone:** warm, human, clear, empowering, playful

### Do

- Talk like a helpful person, not a product
- Empower the reader — they're the maker
- Keep instructions concrete and friendly
- A little warmth and wit is welcome

### Don't

- Don't sound corporate or stiff
- Avoid heavy jargon; explain features in plain language
- Don't overwhelm — Notion is flexible, so guide gently

### Sample copy

- **button** _(cta)_: "Get Notion free" — `cta-button`
- **empty page** _(empty-state)_: "This page is empty. Type '/' to add anything." — `empty-state`
- **hero headline** _(headline)_: "Write, plan, and get organized — all in one place." — `hero-headline`
- **template gallery** _(microcopy)_: "Start from a template, then make it yours." — `template-blurb`

### Vocabulary

- **Preferred:** workspace, page, block, database, template
- **Avoided:** document management, enterprise solution, productivity suite
- **Notion:** Always capitalized; the product.
- **block:** The atomic unit of a Notion page; lowercase unless starting a sentence.
- **workspace:** A team's whole Notion space; lowercase.

## Colors

| Role | Name | Hex | Dark | Usage |
| --- | --- | --- | --- | --- |
| `primary` | Black | `#191919` | — | The brand's core color — the black wordmark and 'N' mark; primary UI chrome. |
| `accent` | Notion Blue | `#2383e2` | — | Product accent — links, primary buttons, selection. Notion blue. |
| `surface` | — | `#ffffff` | — | Background — pure white and the signature warm off-white (100). |
| `text` | — | `#37352f` | — | The real brand color: warm near-black ink. Body + headings. |
| `danger` | Red | `#d44c47` | — | Highlight red / destructive actions — Notion red. |
| `brown` | Brown | `#9f6b53` | — | Highlight text/background — Notion brown. |
| `gray` | Gray | `#787774` | — | Highlight/secondary text — Notion gray. |

### Scales

- **primary:** 50 `#f7f7f7`, 100 `#ededed`, 200 `#d9d9d9`, 300 `#bdbdbd`, 400 `#8f8f8f`, 500 `#6b6b6b`, 600 `#4f4f4f`, 700 `#3d3d3d`, 800 `#2b2b2b`, 900 `#1f1f1f`, 950 `#191919`
- **accent:** 50 `#e9f3fc`, 100 `#d1e6f9`, 200 `#a3ccf3`, 300 `#6fb0ec`, 400 `#4098e6`, 500 `#2383e2`, 600 `#1a68b8`, 700 `#155291`, 800 `#123f6f`, 900 `#0f3358`, 950 `#081d33`
- **surface:** 50 `#ffffff`, 100 `#f7f6f3`, 200 `#efede8`, 300 `#e3e0d8`, 400 `#cbc7bb`, 500 `#a5a094`, 600 `#7d7869`, 700 `#5c584d`, 800 `#3d3a32`, 900 `#26241f`, 950 `#161410`
- **text:** 50 `#f5f4f2`, 100 `#e9e7e3`, 200 `#d3cfc8`, 300 `#b3ada3`, 400 `#8a8378`, 500 `#6b6459`, 600 `#524c43`, 700 `#403b34`, 800 `#37352f`, 900 `#252420`, 950 `#151410`
- **danger:** 50 `#fbecec`, 100 `#f7d6d5`, 200 `#eeabaa`, 300 `#e28380`, 400 `#db625e`, 500 `#d44c47`, 600 `#b13a36`, 700 `#8c2d2a`, 800 `#6f2624`, 900 `#5b2120`, 950 `#331110`
- **brown:** 50 `#f8f1ec`, 100 `#efe0d6`, 200 `#dcc0ad`, 300 `#c69d81`, 400 `#b08067`, 500 `#9f6b53`, 600 `#845443`, 700 `#684235`, 800 `#4f332a`, 900 `#3f2a23`, 950 `#241713`
- **gray:** 50 `#f3f3f2`, 100 `#e6e5e3`, 200 `#cbcac6`, 300 `#a9a8a2`, 400 `#8e8d86`, 500 `#787774`, 600 `#605f5c`, 700 `#4b4a48`, 800 `#383735`, 900 `#282726`, 950 `#161514`

## Typography

### Families

#### Inter `inter`
- **Source:** google
- **Foundry:** Rasmus Andersson
- **Weights:** 400 Regular, 500 Medium, 600 Semibold
- **Fallback stack:** `Inter, ui-sans-serif, -apple-system, system-ui, sans-serif`
- **Licensing:** Inter (SIL OFL) — safe to self-host. Product UI also falls back to the native system sans stack.

#### Lyon Display `lyon-display`
- **Source:** licensed
- **Foundry:** Commercial Type
- **Weights:** 400 Regular, 600 Semibold
- **Fallback stack:** `"Lyon Display", Georgia, "Times New Roman", serif`
- **Licensing:** Lyon by Commercial Type — licensed serif used for large marketing display/quotes. Reference by name only; never rehosted.
- **License:** https://commercialtype.com/catalog/lyon
- **Usage:** Marketing display and pull quotes only — never product UI.

#### SFMono-Regular `sf-mono`
- **Source:** system
- **Weights:** 400 Regular, 600 Semibold
- **Fallback stack:** `SFMono-Regular, Menlo, Consolas, monospace`
- **Licensing:** System monospace used for code blocks; not a distributed brand font.

### Role assignments

- **display:** Lyon Display (`lyon-display`) — weights 400, 600
- **heading:** Inter (`inter`) — weights 500, 600
- **body:** Inter (`inter`) — weights 400, 500
- **mono:** SFMono-Regular (`sf-mono`)

### Scale

| Step | Size (rem) | Line height | Tracking (em) |
| --- | --- | --- | --- |
| xs | 0.75 | 1.5 | — |
| sm | 0.875 | 1.5 | — |
| base | 1 | 1.6 | — |
| lg | 1.25 | 1.4 | — |
| xl | 1.75 | 1.3 | — |
| 2xl | 2.5 | 1.15 | -0.01 |
| display | 3.5 | 1.05 | -0.02 |

## Logos

### primary
- **Formats:**
  - `svg` (24×24): data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20role%3D%22img%22%3E%3Ctitle%3ENotion%3C%2Ftitle%3E%3Cpath%20d%3D%22M4.459%204.208c.746.606%201.026.56%202.428.466l13.215-.793c.28%200%20.047-.28-.046-.326L17.86%201.968c-.42-.326-.981-.7-2.055-.607L3.01%202.295c-.466.046-.56.28-.374.466zm.793%203.08v13.904c0%20.747.373%201.027%201.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42%200%20.84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748%200-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21%2019s0%20.84-1.168.84l-3.222.186c-.093-.186%200-.653.327-.746l.84-.233V9.854L7.822%209.76c-.094-.42.14-1.026.793-1.073l3.456-.233%204.764%207.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936%201.035l13.31-.98c1.634-.14%202.055-.047%203.082.7l4.249%202.986c.7.513.934.653.934%201.213v16.378c0%201.026-.373%201.634-1.68%201.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54%201.447-1.632z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fsvg%3E
  - `png` (760×192): brands/notion/logo-primary@2x.png
- **Clearspace:** 1× cap-height — One cap-height of clear space on all sides.
- **Min size:** 88px w (screen)
- **Allowed backgrounds:** light, muted
- **Disallowed backgrounds:** photo
- **Notes:** Official monochrome mark from simple-icons (CC0 / public domain). Source: https://www.notion.so

### mark
- **Symbol name:** The N
- **Formats:**
  - `svg` (64×64): brands/notion/mark-n.svg
- **Clearspace:** 0.25× mark-width
- **Min size:** 20px w (screen)
- **Allowed backgrounds:** any
- **Notes:** Also the favicon source; the OS home-screen tile is the 'app-icon' variant.

### wordmark
- **Formats:**
  - `svg` (260×72): brands/notion/wordmark.svg
- **Clearspace:** 1× cap-height
- **Min size:** 64px w (screen)
- **Allowed backgrounds:** light

### mono
- **Formats:**
  - `svg` (24×24): data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20role%3D%22img%22%3E%3Ctitle%3ENotion%3C%2Ftitle%3E%3Cpath%20d%3D%22M4.459%204.208c.746.606%201.026.56%202.428.466l13.215-.793c.28%200%20.047-.28-.046-.326L17.86%201.968c-.42-.326-.981-.7-2.055-.607L3.01%202.295c-.466.046-.56.28-.374.466zm.793%203.08v13.904c0%20.747.373%201.027%201.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42%200%20.84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748%200-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21%2019s0%20.84-1.168.84l-3.222.186c-.093-.186%200-.653.327-.746l.84-.233V9.854L7.822%209.76c-.094-.42.14-1.026.793-1.073l3.456-.233%204.764%207.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936%201.035l13.31-.98c1.634-.14%202.055-.047%203.082.7l4.249%202.986c.7.513.934.653.934%201.213v16.378c0%201.026-.373%201.634-1.68%201.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54%201.447-1.632z%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E
- **Clearspace:** 1× logo-height — Default clearspace of one logo-height on all sides (auto-seeded; refine after review).
- **Min size:** 24px w (screen)
- **Allowed backgrounds:** light, muted
- **Disallowed backgrounds:** dark
- **Notes:** Official monochrome mark from simple-icons (CC0 / public domain). Source: https://www.notion.so

### favicon
- **Formats:**
  - `png` (32×32): brands/notion/favicon-32.png
  - `ico` (32×32): brands/notion/favicon.ico
- **Allowed backgrounds:** any

### app-icon
- **Formats:**
  - `svg` (1024×1024): brands/notion/app-icon.svg
  - `png` (1024×1024): brands/notion/app-icon-1024.png
- **Allowed backgrounds:** any
- **Notes:** Rounded-square N tile for iOS/Android/desktop. The OS controls masking and margins.

## Usage Rules

- **[MUST] Meet WCAG AA** (accessibility) — Warm near-black ink on warm white must clear 4.5:1; don't set body text in the lighter highlight steps. `contrast-aa`
- **[MAY] Use the highlight palette for expression** (color) — The named highlight colors (gray, brown, red, and the rest) are for page personalization and callouts — not for primary UI chrome. `highlight-palette`
- **[MUST] Give the N room** (logo) — Keep at least a quarter of the mark's width clear on all sides. `mark-clearspace`
- **[SHOULD] Sound like a person** (voice) — Prefer warm, plain language. If it reads like a corporate brochure, rewrite it. `voice-be-human`

## Boards

- **Notion — Brand** — `cover` (`board-cover`)
- **Logo** — `logo-suite` (`board-logos`)
- **Color & Highlights** — `color-system` (`board-colors`)
- **Typography** — `type-specimen` (`board-type`)
- **Voice** — `voice` (`board-voice`)
- **Imagery** — `imagery` (`board-imagery`)

## Resources

- Tokens (JSON): /b/notion/tokens.json
- Tokens (CSS): /b/notion/brand.css
- This document: /b/notion/brand.md
- MCP endpoint (public read): mcp.brandsweets.com/notion/mcp
- Agent integration guide: /agents.md