# Notion

> `notion@1.0.0`

Notion is a connected workspace for notes, docs, knowledge bases, and project management — "the AI workspace that works for you." The brand voice is calm, typographic, and disciplined: black ink on warm-white paper, a tiny rounded sans wordmark, generous whitespace, and a deliberate refusal of decorative color at the institutional level. Where competing productivity brands lead with hue, Notion leads with surface and type.


**Tags:** `saas`, `productivity`, `notion`, `monochrome`, `minimal`, `ai`

## Atoms

### Palette

**Notion** · `notion@1.0.0` · Proprietary — All Rights Reserved

> Notion's brand palette — radically near-monochrome. The institutional voice is black-on-white (or white-on-black in dark mode); the brand reads as restrained, typographic, and surface-driven. Where competing productivity brands lead with color, Notion leads with whitespace and type. This atom captures only the verified mark and surface tones; in the product, additional accent colors exist for callouts and tags but those are not published as brand-level hex values and are not catalogued here to avoid fabrication. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `notion-black` | Notion Black | `#000000` |
| `notion-white` | Notion White | `#FFFFFF` |
| `notion-canvas-dark` | Notion Canvas Dark | `#191919` |
| `notion-surface-dark` | Notion Surface Dark | `#2F2F2F` |
| `notion-text-secondary-light` | Notion Text Secondary (Light) | `#787878` |
| `notion-text-tertiary-light` | Notion Text Tertiary (Light) | `#A0A0A0` |
| `notion-text-secondary-dark` | Notion Text Secondary (Dark) | `#A0A0A0` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `notion-white` | `#FFFFFF` |
| `surface` | `notion-white` | `#FFFFFF` |
| `surface-elevated` | `notion-white` | `#FFFFFF` |
| `text-primary` | `notion-black` | `#000000` |
| `text-secondary` | `notion-text-secondary-light` | `#787878` |
| `text-tertiary` | `notion-text-tertiary-light` | `#A0A0A0` |
| `primary` | `notion-black` | `#000000` |
| `primary-hover` | `notion-text-secondary-light` | `#787878` |
| `accent` | `notion-black` | `#000000` |
| `accent-hover` | `notion-text-secondary-light` | `#787878` |
| `warning` | `notion-black` | `#000000` |
| `warning-hover` | `notion-text-secondary-light` | `#787878` |
| `error` | `notion-black` | `#000000` |
| `success` | `notion-black` | `#000000` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `notion-canvas-dark` | `#191919` |
| `surface` | `notion-surface-dark` | `#2F2F2F` |
| `surface-elevated` | `notion-surface-dark` | `#2F2F2F` |
| `text-primary` | `notion-white` | `#FFFFFF` |
| `text-secondary` | `notion-text-secondary-dark` | `#A0A0A0` |
| `text-tertiary` | `notion-text-tertiary-light` | `#A0A0A0` |
| `primary` | `notion-white` | `#FFFFFF` |
| `primary-hover` | `notion-text-secondary-dark` | `#A0A0A0` |
| `accent` | `notion-white` | `#FFFFFF` |
| `accent-hover` | `notion-text-secondary-dark` | `#A0A0A0` |
| `warning` | `notion-white` | `#FFFFFF` |
| `warning-hover` | `notion-text-secondary-dark` | `#A0A0A0` |
| `error` | `notion-white` | `#FFFFFF` |
| `success` | `notion-white` | `#FFFFFF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `notion-black` | `#000000` |
| `on-identity` | `notion-white` | `#FFFFFF` |
| `primary` | `notion-black` | `#000000` |
| `primary-hover` | `notion-text-secondary-light` | `#787878` |
| `accent` | `notion-black` | `#000000` |
| `accent-hover` | `notion-text-secondary-light` | `#787878` |
| `success` | `notion-black` | `#000000` |
| `warning` | `notion-black` | `#000000` |
| `error` | `notion-black` | `#000000` |
| `background-light` | `notion-white` | `#FFFFFF` |
| `background-dark` | `notion-canvas-dark` | `#191919` |
| `surface-light` | `notion-white` | `#FFFFFF` |
| `surface-dark` | `notion-surface-dark` | `#2F2F2F` |
| `text-primary-light` | `notion-black` | `#000000` |
| `text-primary-dark` | `notion-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.mark`

- **allowed:** notion-black, notion-white
- **forbidden:** any-non-brand-color

> The Notion mark is monochrome by definition. Use black on light surfaces or white on dark surfaces — never a colored variant. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> The Notion mark's reading depends on clean black/white contrast against a quiet surface. Effects, recoloring, and busy backgrounds break the mark's institutional voice. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text — the floor below which the surface no longer reads as Notion. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** decorative-only, product-of-competitor, endorsement-implication

> Notion's trademark and brand guidance restrict use of the mark in ways that imply endorsement or appear on competing-product surfaces without explicit license. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Notion's pure-black-on-white default starts well above AA; Notion-skinned surfaces must hold that floor. 

### ⚠️ warning (1)

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `7`
- **standard:** `WCAG-AAA`

> Notion's pure-black-on-white identity sits at 21:1 contrast — well above AAA's 7:1 floor. Skinning that drops below AAA on body text would betray the brand's documented commitment to legibility. 

### 💡 recommendation (1)

#### `numericRatio` → `typography.body.lineHeight`

- **min:** `1.5`
- **max:** `1.7`

> Notion's product surface reads with generous line-height — typically in the 1.5–1.7 band. Tighter values break the calm typographic rhythm; looser values feel decorative. 

## Provenance

- **Source:** <https://www.notion.com>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Notion and the Notion mark are trademarks of Notion Labs, Inc. The signature mark color (pure black, #000000) is verified via the simple-icons brand database, which cites notion.so as the source. The near-monochrome institutional identity is uniformly documented across notion.com. 
- **Imported:** `2026-05-17`
- **Notes:** Notion's brand reads heavily on typography. Inter is widely used on notion.com (verified by inspecting the rendered site) and is referenced here as the primary face. In-product accent colors (callout / tag colors) exist but are not published as brand-level hex values; brand-atoms therefore catalogues the near-monochrome identity only and intentionally omits accent hex values to satisfy the no-fabrication rule. 

---

*Generated by the brand-atoms converter. Source: `notion@1.0.0` from the encyclopedia.*