Live surface
Floating navigation
Active context / grows
The active destination gets room, not a new screen.
Mobile-first UI
Make room for the next gesture.
A small-screen interaction reference for products that need to feel calm, direct and alive at 390px first. Navigation, input, selection and auth remain close to the content they change.
Pinky / today01 / 04
A quieter shell
The interface follows the hand.
A live lower bar, one clear reading surface and a next action within reach.
01 · Live signatures
The mobile surface should explain itself by responding.
These are actual interaction surfaces, not screenshots. The strongest patterns appear first; each one has a direct detail route for the implementation recipe.
Detail ↗
Live surface
Navigation becomes selection
Live surface
Search owns the header
Explore collection
Live surface
The keyboard changes the layout
Live surface
Commitment has a readable threshold
Archive projectSwipe →
Swipe right, or focus and press Enter.
Live surface
Selection arrives after selection
Live surface
Auth reveals one decision
Access / identity
01 / 04Start with your identity.
Only the next useful decision appears; your previous choice stays attached to this surface.
Live surface
Completion stays attached
Account / ready
Keep the welcome in place.
The same surface will acknowledge completion.
Mobile-first expansion
Small screens need their own interaction grammar.
These live surfaces use touch, thumb reach, press, drag and contained scroll as primary inputs. The full set stays compactly linked below.
Live mobile
Morphing bottom navigation
Live mobile
Focus rail mobile
Open recipe ↗
Live mobile
Bottom search sheet
Open recipe ↗
Live mobile
Fullscreen media morph
Live mobile
Detent sheet
Open recipe ↗
Live mobile
Bottom toast stack
Live mobile
Long-press selection
Tap or hold a row to select it.
Live mobile
Quick action sheet
Open recipe ↗
Live mobile · new
Long-press context menu
Hold me
Live mobile · new
Pinch zoom image
Two fingers zoom, one finger pans once zoomed, and a downward swipe at rest scale dismisses.
Browse the new mobile set · 30
Open full workflow catalogue ↗- Pull to Refresh
- Morphing Bottom Navigation
- Floating Dock Navigation
- Thumb-Reach Menu
- Bottom Search Sheet
- Search + Filter Morph
- Inline Search Reveal
- Detent Sheet
- Content-Aware Sheet
- Swipe-to-Dismiss Card Sheet
- Long-Press Selection
- Swipe Actions
- Focus Lift Field
- Mobile Validation Morph
- Progressive Mobile Form
- Card Stack Browse
- Expand-in-Place Card
- Focus Rail Mobile
- Fullscreen Media Morph
- Swipe Media Inspector
- Floating Media Controls
- Bottom Toast Stack
- Mobile Undo Bar
- Quick Action Sheet
- Hold-to-Reveal Actions
- Action Sheet
- Wheel Picker
- Long-Press Context Menu
- Pinch Zoom Image
- Swipe Back Gesture
02 · Layout studies
Small screens need composition, not a shrunken desktop.
Ten layout studies use rhythm, peek, focus and edge continuity to make mobile browsing feel intentional.
01 / mobile layout
Editorial Mobile Hero
A narrow opening with one clear reading gesture and room for the subject to breathe.
Field note / 01
A small screen can still open slowly.
One subject, one useful next gesture.
02 / mobile layout
Collapsing Editorial Header
The title yields to section context without losing the current place in the story.
Reading / 0203 / 06
The header yields.
Context stays; ornament recedes.
03 / mobile layout
Full-Bleed Media Header
Media reaches the edge while the reading title remains anchored below.
Still / moving image
Media reaches the edge.
The title stays in the reading flow.04 / mobile layout
Horizontal Peek Rail
The next item is intentionally visible so the collection explains itself without arrows.
Collection / 04
Swipe →Leave a little next.
First object
Next object
05 / mobile layout
Magazine Feed
Alternating lead stories make hierarchy visible before the reader opens anything.
Lead / 05
The lead gets a longer sentence.
The next story can be seen without competing.
Note / 06
A short companion story.
Note / 07
Another quiet entry.
06 / mobile layout
Mobile Mosaic Feed
An irregular rhythm keeps a small-screen collection from becoming a flat stack.
01
Large enough to lead.
02
Next read
03
Saved note
04
New
05
Quiet
07 / mobile layout
Focus Feed
One item owns the reading frame while nearby items stay as quiet wayfinding.
Queue
01
02
03
Focus / current
One thing gets the room.
08 / mobile layout
Layered Mobile Collection
Depth preserves relationship without turning every surface into a floating card.
Collection / depth
The stack preserves order.
09 / mobile layout
Edge-to-Edge Story
A story crosses the viewport edge while controls remain reachable in the flow.
Story / 09
The edge becomes part of the sentence.
01 — 04Continue reading
10 / mobile layout
Sticky Context Header
The active collection label stays close while the content below continues to move.
CollectionsContext / active
Editorial notes01
Saved surfaces02
Recent work03
03 · Reference screens
A screen is a composition of relationships.
These are reference arrangements, not new registry items: eight product moments where the interaction language has somewhere real to live.
Pinky UI01 / access
Welcome back
Make space for the work.
Minimal Login
One identity decision, no ornamental gate.
Pinky UI02 / quiet entry
A familiar return
Your work, close by.
Sign in to pick up the thread where you left it.
Bottom-Anchored Login
The next action stays within thumb reach.
Pinky UI03 / verify
A code is on its way
Check your inbox.
Verification
Code entry keeps recovery and resend nearby.
Pinky UI04 / begin
A first preference
What should feel closer?
Editorial Onboarding
A welcome story that asks one preference at a time.
Pinky UI05 / today
Featured note
Keep the surface quiet.
A feed can make one item legible before it asks for the next.
Home / Feed
A lead item and a local create action set the rhythm.
Browse
A room for work
Editorial study · 04 min
Surface notes
Product rhythm · 08 min
Search
Search takes the header only after intent.
Pinky UI06 / profile
F
Flora
18 saved studies
Saved surfaces 12
Reading history 06
Profile
Identity, state and next actions stay in one frame.
Pinky UI07 / settings
Keep the useful close.
Settings are grouped by the decision they change.
Settings
Grouped settings preserve a calm reading order.
04 · Mini flows
A flow is a sequence of surfaces that remember one another.
These four small studies are operable. Advance, go back and see how a mobile task can keep continuity without becoming a wizard.
Flow / Auth
Welcome
A short sign-in sequence that keeps the current decision visible.
Auth / surface
Welcome stays attached to the same task.
Flow / Onboarding
Welcome
Preferences arrive as a sequence of useful questions, not a wall of fields.
Onboarding / surface
Welcome stays attached to the same task.
Flow / Browse
Explore
Explore, search and filter stay in one reading relationship before detail.
Browse / surface
Explore stays attached to the same task.
Flow / Create
Feed
The create action grows into a composer, then resolves in place.
Create / surface
Feed stays attached to the same task.
05 · Existing foundations
New patterns sit beside the mobile systems already in the library.
Bottom Sheet, Swipeable Tabs, Pull to Refresh, Edge Swipe and Long Press remain canonical where their interaction concept is distinct. This shelf keeps those capabilities visible without duplicating them.
Existing surface / bottom sheet
A sheet can still be the right depth.
Use the established sheet when the task is a short local branch, not a new mobile-specific drawer variant.
Existing surface / swipeable tabs
Touch can change view without hiding the tab model.
Three updates stay readable with a native tab fallback.
Need the full catalogue?
Browse all mobile workflows ↗A small action surface
Keep the next useful action close.
The mobile page itself should be an interaction reference. Type a note, send it and watch the composer keep its place.
No note sent yet.
Mobile patterns live in the workflow family