9:41
Notion iOS primary launch composition
A clean-room 299 × 648 launch composition for the first published Notion iOS asset, using a substituted identity mark and working launch feedback.
App profile
Notion
- Platform
- iOS
- References
- 230
- Category
- Interface research
Clean-room component kit
A reference-matched Notion iOS system
Twenty-eight clean-room React recreations matched against Notion’s archived iOS home, onboarding, editor, database-filter, search, and workspace flows. Complete screens and their reusable primitives are separated so each layer can be inspected and copied. The first ordered archive composition is included in active reference review.
ReactTailwind-readyResponsiveWorking interactions
29 components
The layout, spacing, hierarchy, and behavior are clean-room recreations reviewed against the linked archive screens. The examples use original UIAIdol content and code—not recovered Notion source.
9:41▮▮▮ ◔ ▰
Capture and summarize conversations in one place.
Mobile home composition
The complete Notion mobile home hierarchy with pill navigation, meeting-note promotion, page list, and floating Ask AI controls.
9:41▮▮▮ ◔ ▰
N
Your AI workspace.
Create your account
Existing user? Log in
By continuing, you agree to the Terms & Conditions and Privacy Policy.Sign-in composition
A reference-matched authentication screen with provider stack, email expansion, legal copy, and footer rhythm.
9:41▮▮▮ ◔ ▰
Product launch
- Review the product brief
- Prepare launch assets
- Share the timeline
Mobile editor composition
The page editor with top actions, document blocks, floating formatting toolbar, and block insertion grid.
9:41▮▮▮ ◔ ▰
Advanced filter composition
A structured advanced-filter surface with editable property, comparator, value, and nested rule actions.
9:41▮▮▮ ◔ ▰
Global search composition
The mobile search experience with recent pages, live query filtering, and a working filter sheet.
9:41▮▮▮ ◔ ▰
Workspace browser composition
The alternate workspace home with account identity, jump-back cards, grouped page trees, and collapsible sections.
9:41▮▮▮ ◔ ▰
How do you want to use the workspace?
Use-case selection composition
The onboarding use-case step with progress, selectable option cards, and an enabled-next state.
9:41▮▮▮ ◔ ▰
iOS status bar
A compact status row preserving the reference spacing above Notion mobile content.
Workspace account header
Workspace avatar, name, account metadata, and overflow action in one compact header.
Capture and summarize conversations in one place.
Meeting-note promotion
A dismissible elevated promotion with supporting copy and a blue full-width action.
Collapsible page section
A collapsible Private, Favorites, Shared, or Teamspaces group with page actions.
Nested page row
A touch-friendly page-tree row with disclosure, page icon, title, and new-child action.
Bottom tab bar
The persistent four-destination navigation used in the alternate mobile home.
Ask AI composer
The floating prompt capsule with Notion AI mark, editable prompt, and submit action.
Authentication provider button
A bordered provider action matching the Google, Apple, Microsoft, Passkey, SSO, and email stack.
Labeled text field
The compact labeled form field used during email and profile onboarding.
Blue primary action
Notion mobile’s full-width blue Continue, Next, and Get started action.
Onboarding progress bar
A restrained progress indicator for the multi-step setup sequence.
Use-case selection card
A selectable illustrated option card for work, personal, or school setup.
Floating formatting toolbar
The elevated editor control strip for insertion, formatting, attachments, and dismissal.
Block insertion grid
The two-column media and database block chooser revealed from the editor toolbar.
const launch = true;
console.log(launch);Mobile code block
A muted code surface with selectable programming language and syntax-oriented typography.
Rounded bottom sheet
A reference-matched iOS sheet with drag handle, centered title, rows, and selected radio state.
Database filter rule
A grouped property-and-comparator row matching the Advanced filter editor.
Search result row
A compact result row with page icon, title, location metadata, and expandable detail.