<!-- Generated by ExtractVibe — https://extractvibe.com/brand/notion.so -->
<!-- Extracted: 2026-04-26T13:10:45.821Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Notion"
description: "Notion projects a vibe of sophisticated efficiency and intelligent automation. It's a professional yet approachable platform designed to empower teams to achieve more with less effort, leveraging AI to streamline complex workflows."
colors:
  primary: "#455dd3"
  tertiary: "#ff8b7c"
  neutral: "#0075de"
  surface: "#ffffff"
  on-surface: "#040404"
  on-surface-secondary: "#0075de"
  border: "#000000"
  link: "#0075de"
  surface-dark: "#02093a"
  on-surface-dark: "#111111"
typography:
  display-lg:
    fontFamily: "NotionInter"
    fontSize: "64px"
    fontWeight: "700"
    lineHeight: "64px"
    letterSpacing: "-2.125px"
  headline-lg:
    fontFamily: "NotionInter"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "16px"
    letterSpacing: "0.125px"
  headline-md:
    fontFamily: "NotionInter"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
  body-md:
    fontFamily: "NotionInter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "8px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#455dd3"
    textColor: "#ffffff"
    rounded: "8px"
    padding: "4px 14px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "1px"
  button-ghost:
    textColor: "#ffffff"
    rounded: "50%"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#ffffff"
  button-outline:
    textColor: "#ffffff"
    rounded: "8px"
    padding: "6px 15px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#000000"
    textColor: "#000000"
    rounded: "9999px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#000000"
---

# Notion — Design System

## Overview

Notion's design system embodies sophisticated efficiency and intelligent automation. It positions the platform as a professional yet approachable tool, empowering teams to maximize productivity through streamlined workflows and integrated AI capabilities. This design language aligns with the Sage and Creator archetypes, reflecting a commitment to knowledge, innovation, and practical problem-solving. It draws inspiration from the clean, functional interfaces of comparable brands like Slack, Asana, and Coda, emphasizing clarity, utility, and a seamless user experience.

The design prioritizes intelligent functionality over decorative elements. It is not whimsical, overly playful, or overtly corporate in a rigid sense. Instead, it maintains a modern, understated aesthetic that supports focused work and collaborative intelligence. The visual identity consistently reinforces Notion's core promise: to provide a powerful, adaptable workspace that simplifies complex tasks and fosters creative output without unnecessary visual clutter or distraction. Every design decision serves the purpose of enhancing user productivity and facilitating efficient interaction with information and tools.

**Key characteristics:**

- Vibe — efficient, intelligent, productive, modern, streamlined, empowering
- Archetypes — The Sage, The Creator
- Comparable to — Slack, Asana, Coda, Monday.com
- Design era — contemporary-minimal
- Emotional tone — empowering-efficient
- Target audience — Teams and individuals seeking to optimize their workflows, automate repetitive tasks, and consolidate their digital workspace, particularly those open to AI-driven solutions.
- Visual energy — 6/10 (moderate)

## Colors

The Notion color palette is intentionally minimal, leveraging a single primary color, `#455dd3`, against a dominant surface color, `#ffffff`. This high-contrast scheme signals clarity, intelligence, and a clean, professional environment. The blue primary color conveys trust and reliability, while the expansive white surface promotes focus and reduces visual fatigue, reinforcing the brand's commitment to streamlined productivity and efficient information processing.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#455dd3` | Royal Blue |
| accent / tertiary | `#ff8b7c` | Salmon |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#040404` | Black |
| secondary text | `#0075de` | Dodger Blue |
| border | `#000000` | Black |
| link | `#0075de` | Dodger Blue |
| muted | `#0075de` | Dodger Blue |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#02093a` | Near-Black |
| background | `#191918` | Near-Black |
| text | `#111111` | Near-Black |

## Typography

Notion's typographic system utilizes 'NotionInter' for all textual elements. This choice ensures consistent readability and a modern, professional aesthetic across the platform. The type system prioritizes clear hierarchy through judicious use of weight and size variations rather than an abundance of different fonts. This approach communicates precision, organization, and ease of information consumption, directly supporting Notion's identity as an intelligent, productive, and streamlined workspace.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| NotionInter | body | self-hosted | 400, 500 |
| NotionInter | heading | self-hosted | 400, 500, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | NotionInter | 64px | 700 | 64px | -2.125px |
| Heading 2 | NotionInter | 12px | 500 | 16px | 0.125px |
| Heading 3 | NotionInter | 14px | 400 | 20px | — |
| Body | NotionInter | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.04) 0px 4px 18px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px` |
| modal | `rgba(0, 0, 0, 0.08) 0px 20px 50px 0px, rgba(0, 0, 0, 0.04) 0px 6px 16px 0px` |
| modal | `rgba(0, 0, 0, 0.03) 0px 3px 9px 0px, rgba(0, 0, 0, 0.016) 0px 0.7px 1.4625px 0px` |
| navigation | `rgba(0, 0, 0, 0) 0px 1px 0px 0px` |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255))`

## Shapes

Border-radius scale:

- `sm` — 8px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#455dd3`
- Text — `#ffffff`
- Radius — `8px`
- Padding — `4px 14px`
- Font size — `16px`
- Font weight — `500`
- Sample copy — "Get Notion free"

**Ghost**

- Text — `#ffffff`
- Radius — `50%`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #ffffff`
- Sample copy — "Pause"

**Outline**

- Text — `#ffffff`
- Radius — `8px`
- Padding — `6px 15px`
- Font size — `16px`
- Font weight — `500`

**Secondary**

- Background — `#000000`
- Text — `#000000`
- Radius — `9999px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #000000`

## Do's and Don'ts

### Do

- Utilize NotionInter font family exclusively, with weights 400 and 500 for body text and 400, 500, 700 for headings.
- Apply sentence-case for all headings, maintaining a professional yet accessible tone.
- Ensure body text has a line-height of 24px for readability.
- Primary CTA buttons must use a solid #455dd3 background with #ffffff text, 8px border-radius, and 4px 14px padding.
- Incorporate subtle, multi-layer shadows for depth on UI elements like dropdowns and modals, specifically rgba(0, 0, 0, 0.04) 0px 4px 18px 0px and rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px for dropdowns, and rgba(0, 0, 0, 0.08) 0px 20px 50px 0px for modals.
- Use a consistent base unit of 2px for all spacing and measurements to maintain visual harmony.
- Employ a limited color palette featuring #455dd3 as the primary accent and #ff8b7c as a secondary accent, against a clean #ffffff (light mode) or #191918 (dark mode) background.
- Apply an 8px border-radius for most interactive elements and a 9999px (pill-shaped) border-radius for specific secondary buttons or elements requiring a softer, more fluid appearance.

### Don't

- Avoid using title case or all caps for headings; adhere strictly to sentence-case.
- Do not incorporate emojis or exclamation points in marketing copy to maintain a serious and matter-of-fact tone.
- Refrain from using any font families other than NotionInter.
- Do not use gradients extensively; limit gradient usage to subtle background effects like linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)).
- Avoid overly playful or casual language; maintain a balance between technical accessibility and a slightly formal tone.
- Do not use sharp, 0px border-radii; all interactive elements should have at least an 8px radius.
- Do not use shadows on primary or ghost buttons; shadows are reserved for layered UI elements like dropdowns and modals.
- Avoid monochrome design; utilize the accent colors #455dd3 and #ff8b7c to highlight key information and actions.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 4/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 9 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs, often paired with benefit-focused phrases or direct calls to action
- Rhetorical devices — personification, repetition

### Sample copy

> Meet the night shift.

> Notion agents keep work moving 24/7. They capture knowledge, answer questions, and push projects forward—all while you sleep.

> Automate repetitive work for your team.

> Trusted by 98% of the Forbes Cloud 100

> Build Custom Agents, search across all your apps, and automate busywork.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/notion.so) | 100% |
| favicon | — | ico | [link](brands/notion.so/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/notion.so/logo-1.png) | 95% |
| primary | — | — | [link](brands/notion.so/logo-2.png) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-3.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-4.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-5.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-6.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-7.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-8.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-9.svg) | 85% |
| primary | color | svg | [link](brands/notion.so/logo-10.svg) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/notion.so
- Raw JSON — https://extractvibe.com/api/brand/notion.so
- DESIGN.md (this file) — https://extractvibe.com/api/brand/notion.so/design.md
- Extracted — 2026-04-26T13:10:45.821Z
- Generator — ExtractVibe vv1
- Quality score — 90/100