Notion
notion.soDocument-first minimalism: warm off-black text, almost no chrome, and content blocks that do the layout.
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.