Notion
The connected workspace where better, faster work happens.
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.
Color
The brand's core color — the black wordmark and 'N' mark; primary UI chrome.
Product accent — links, primary buttons, selection. Notion blue.
Background — pure white and the signature warm off-white (100).
The real brand color: warm near-black ink. Body + headings.
Highlight red / destructive actions — Notion red.
Highlight text/background — Notion brown.
Highlight/secondary text — Notion gray.
Typography
The connected workspace where better, faster work happens.
- Foundry:
- Rasmus Andersson
- Weights:
- 400, 500, 600
Inter (SIL OFL) — safe to self-host. Product UI also falls back to the native system sans stack.
The connected workspace where better, faster work happens.
- Foundry:
- Commercial Type
- Weights:
- 400, 600
Lyon by Commercial Type — licensed serif used for large marketing display/quotes. Reference by name only; never rehosted.
The connected workspace where better, faster work happens.
- Weights:
- 400, 600
System monospace used for code blocks; not a distributed brand font.
Gradient
Derived from the colour roles, interpolated perceptually. The same three tokens ship in brand.css and tokens.json.
linear-gradient(135deg in oklab, #191919 0%, #2383e2 100%)
Worst-case contrast — white 3.88:1 AA-large · black 1.19:1
linear-gradient(135deg in oklab, #111111 0%, #5d7899 100%)
Worst-case contrast — white 4.55:1 AA · black 1.11:1 · ink #ffffff
linear-gradient(180deg in oklch shorter hue, #222222 0%, #101010 100%)
Worst-case contrast — white 15.91:1 AA · black 1.10:1 · ink #ffffff
Voice & Tone
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
Get Notion free
This page is empty. Type '/' to add anything.
Write, plan, and get organized — all in one place.
Start from a template, then make it yours.
Logo Inventory
Marks from Simple Icons (CC0). Licences and attribution
Usage Rules
- MUSTMeet WCAG AAaccessibility
Warm near-black ink on warm white must clear 4.5:1; don't set body text in the lighter highlight steps.
- MAYUse the highlight palette for expressioncolor
The named highlight colors (gray, brown, red, and the rest) are for page personalization and callouts — not for primary UI chrome.
- MUSTGive the N roomlogo
Keep at least a quarter of the mark's width clear on all sides.
- SHOULDSound like a personvoice
Prefer warm, plain language. If it reads like a corporate brochure, rewrite it.
Point any MCP client at this brand and every session grounds itself in the real system — colors, type, voice, usage rules. Read-only.
https://mcp.brandsweets.com/notion/mcp{
"mcpServers": {
"brandsweets-notion": {
"type": "http",
"url": "https://mcp.brandsweets.com/notion/mcp"
}
}
}claude mcp add --transport http brandsweets-notion https://mcp.brandsweets.com/notion/mcpNotion trademarks and logos belong to their owner. Shown for identification (nominative use); not affiliated or endorsed. Owner of this brand? Request a correction or removal →