The Notion iOS app, dissected. White canvas, warm-black ink at #37352F. Hairline borders. Almost no color — except the six pastel tints reserved for callouts and highlights.
Notion's iOS app is almost monochrome on purpose. Six pastel tints exist to highlight a word or wrap a callout — never to brand a button. Hairline borders carry every structural beat.
Emoji icon over an H1 title, then a stream of mixed blocks: paragraphs, toggles, callouts, tables, checkboxes. Side padding stays at 18pt. Borders on blocks are 0 — only the table earns hairlines.
View tabs sit under the title like browser tabs — Board, Table, Calendar, Gallery. Kanban cards land at 4px radius, 1px border, no shadow. The active tab gets a single black underline.
Sidebar drawer over a #F7F6F3 warm background. Pages disclose with a tiny arrow. Emoji-as-icon by default. Notion AI sits at the bottom in pink, the one true colored row.
The most-used affordance in the app. Hitting "/" in any editable block lifts a floating sheet of block types — heading, toggle, callout, code, table, image — each with a 36×36 black-bordered icon tile that mirrors the desktop app pixel-for-pixel.
Arrow keys / drag select between rows on iPad with a hardware keyboard; touch select on iPhone scrolls a single column.
sheet radius: 6pt
row height: 44pt
icon tile: 36pt
fuzzy match
Every block on iPhone exposes a plus + six-dot drag handle at its left edge — invisible until tap-and-hold. Long-press lifts the block with a light haptic; the rest of the page reflows around it as you drag.
Tap-only on the handle opens the block action menu: duplicate, turn into, color, move to.
handle: 14×14pt
haptic: light
lift: scale 1.02
shadow: y4 b12
Notion AI introduces the only persistent non-neutral hue in the product — a pink sparkle. Triggered inline (space at the start of a new block) or via the sidebar entry, it presents a small bubble offering rewrite, summarize, continue, brainstorm.
Output streams character-by-character with a subtle pink underline that fades after 800ms.
accent: #AD1A72
bubble radius: 6pt
stream cursor: ▍
Every token Notion's iOS app reaches for — the warm-black ink ladder, the six tints reserved for highlights, the radius scale that almost never exceeds 6px. Hairlines do the structural work; color does not.
Warm black at #37352F. Pure white canvas. A whisper of warmth in surface grays. Six tint pairs (yellow, pink, blue, gray, green, orange) exist only inside highlight pills and callout backgrounds — never as button color.
Notion's UI uses a custom sans (Notion Sans) — substituted here with Inter. The page-title hierarchy goes h1 32 / h2 24 / body 16, all at 1.45–1.5 line-height. Italicized serif appears only in marketing or empty states.
| Token | Sample | Size | Weight | Tracking |
|---|---|---|---|---|
| --page-title | Project Roadmap | 30 / 1.88rem | 700 | -1.0px |
| --h1 | Goals | 26 / 1.63rem | 700 | -0.6px |
| --h2 | This week | 22 / 1.38rem | 700 | -0.4px |
| --h3 | Sprint board | 18 / 1.13rem | 700 | normal |
| --body | A canvas wide enough to think on. Quiet enough not to interrupt. | 16 / 1.00rem | 400 | normal |
| --caption | Add a comment | 14 / 0.88rem | 500 | normal |
| --meta | Edited 2h ago | 12 / 0.75rem | 500 | normal |
| --code | /toggle | 13 / 0.81rem | 400 | normal |
| --accent-serif | place | 18 / 1.13rem | 400 | normal |
Radii almost never exceed 6px. Cards land at 4. Inputs at 5. Buttons at 6. The only round corner of any size is the iOS sheet itself at 14, inherited from the system, not declared by Notion.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
Buttons stay rectangular. Tags are pastel. Inputs lean on hairline borders. Black is the only fill that carries primary affordance.