---
name: Notion
description: "Document-first minimalism: warm off-black text, almost no chrome, and content blocks that do the layout."
website: https://www.notion.so
color: "#37352F"
category: Productivity
icon: notion
updated_at: "2026-10-29"
---

# Notion — DESIGN.md

> An independent summary of Notion's public design language, written by UI Skillbook for coding agents. Not affiliated with or endorsed by Notion. Color values are approximate.

## Overview

Notion's UI is a blank page with tools that appear when needed. Hover reveals handles and menus; otherwise the user's content is the interface.

## Color

| Role | Value | Use |
| --- | --- | --- |
| Text | `#37352F` | Body and headings |
| Background | `#FFFFFF` | Canvas |
| Hover | `#F1F1EF` | Hovered blocks, menus |
| Accent blue | `#2383E2` | Links, selection |

## Typography

A system/Inter-style sans by default with optional serif and mono page styles. Headings are bold and simple; body is 16px with comfortable line height.

## Spacing and layout

Narrow centered page with an optional full-width toggle. Blocks have small vertical gaps so documents read continuously.

## Components

- Slash command menu for inserting blocks.
- Drag handles that appear on hover beside each block.
- Callouts with an emoji icon and tinted background.
- Database views: table, board, gallery, calendar.

## Do

- Reveal controls on hover and focus, not by default.
- Keep color tints soft and optional.

## Don't

- Don't add permanent toolbars that compete with content.
- Don't use pure black for text.

## Prompt for your agent

```
Style this interface in the spirit of Notion's design language, without copying its logo or brand assets.
Document-first minimalism: warm off-black text, almost no chrome, and content blocks that do the layout.
Follow the color roles, type and component notes in this DESIGN.md.
```