iOS Design Spec

# Every block knows
its place.

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.

View Design Tokens Explore Surfaces
9:41
📊 Sprint Tasks
Board Table Calendar Gallery
All Assigned Due + Filter
To Do 4
Design auth flow
Design
Wire up Stripe
Backend
User onboarding copy
Writing
In Progress 2
Dark mode tokens
Design
Calendar view fixes
Eng
Done 8
Sidebar drawer
Shipped
Home
Search
Inbox
New
Database · Board
9:41
🚀
Add cover
Add comment
Project Roadmap
⋮⋮The plan for Q3. Quiet, dense, no surprises.
Goals
Ship public beta
Hit 1k weekly actives
💡 Move fast on the auth flow — it blocks every other ticket below.
Sprint board
Task
Owner
Status
Auth flow
J. Shu
Doing
Onboarding copy
Lin
Todo
This week
Define metrics
Wire up Stripe
Pair on dark mode tokens
Page
9:41
🦊 Jiang's Workspace
Quick find...
PRIVATE
📝Daily Journal›
📊Project Roadmap›
🗂️Reading List›
📖Fiction
📑Papers
💡Ideas›
WORKSPACE
👥Team Wiki›
📋Sprint Tasks›
TEMPLATES
⚙️Engineering
🎨Design Specs
✨Ask Notion AI›
Home
Search
Inbox
New
Workspace Home
iOS Surface Anatomy

## Three surfaces. No color budget.

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.

📄

### Page

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.

🗂️

### Database

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.

🦊

### Workspace Home

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.

Slash Commands

### Type "/", get a vocabulary.

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`
BASIC BLOCKS
📝
Text
Just start writing with plain text.
📄
Page
Embed a sub-page inside this one.
☑
To-do
Track tasks with a checkbox.
H1
Heading 1
Big section heading.
▸
Toggle list
Toggles can hide and show content.
💡
Callout
Make writing stand out.
+⋮⋮ Mobile design is mostly about restraint.
+⋮⋮ Every block has a six-dot handle and a plus button. The plus opens slash commands; the handle drags or opens block actions.
+⋮⋮ On touch, long-press the handle to lift the block; light haptic on engage.
+⋮⋮ Releasing snaps into the closest gutter.
Block Handle

### Six dots, and the whole page rearranges.

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

### One sparkle. One color the brand never uses anywhere else.

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: ▍`
✦ NOTION AI
The plan for Q3 is to ship the public beta, hit 1k weekly actives, and quietly retire the legacy auth flow. No surprises.
Inline · pink underline fades 800ms
Design System Reference

## The least colorful system in the App Store.

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.

View Source ↗

### Color

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.

Ink Ladder
Warm Black
#37352F
Soft Ink
#605C56
Muted
#787774
Dim
#9B9A97
Canvas
#ffffff
Surface & Border
Warm Surface
#F7F6F3
Sidebar
#F1F1EF
Card Alt
#FBFAF9
Border
#EBECED
Border Strong
#D3D1CB
Highlight Tints
Yellow
#FBF3DB
Pink
#FAF1F5
Blue
#E7F3F8
Green
#EEF3ED
Orange
#FAEBDD
Tint Ink (text on tint)
Yellow Ink
#CB912F
Pink Ink (AI)
#AD1A72
Blue Ink
#2F80ED
Green Ink
#4C9C6B
Orange Ink
#D9730D

### Typography

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

### Radius

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.

Block
0px
Hairline
2px
Tag
3px
Card
4px
Input
5px
Button
6px
Modal
8px
System Sheet
14px

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Page padding
18pt
Block content stays at 18pt L/R. Cover bleeds edge-to-edge.
Block gap
4pt
Between sibling blocks. Headings get 8pt above.
Handle
14×14pt
Six-dot drag + plus button. Tap target expanded to 36pt.
Sidebar width
86%
Drawer overlay; dims trailing 14% at rgba(15,15,15,0.4).
Tab bar height
83pt
Including 34pt home-indicator safe area.
KB toolbar
44pt
Formatting strip above the keyboard. Background #F7F6F3.
Border hairline
1pt
Renders at 0.5pt @2x and @3x for crisp pixel alignment.
Animation
200ms
easeOut for blocks. 280ms easeInOut for drawer.

### Components

Buttons stay rectangular. Tags are pastel. Inputs lean on hairline borders. Black is the only fill that carries primary affordance.

##### Buttons

Get Notion free Add a block Share Add cover

##### Inputs & Tags

Backend Writing Design Done Todo

##### Blocks

💡A callout block — six pastel tints to choose from.
Wire up Stripe
Pair on dark mode tokens
Design auth flow
Design
View source ↗