Skip to content
Pinky UI

Product utility · 88 systems

Workflows that answer the product task.

Feedback, search, loading, lists, reorder, onboarding, mobile and product-stage interactions with native alternatives, honest state and quiet motion.

01 · Feedback & Status

The smallest surface that tells the truth.

Morph Toast

A capped stack pauses on hover/focus and supports an action or swipe dismissal.

Try the action or hover the notification.

Status Pill

State and progress stay available to assistive technology.

Uploading42%ReadyFailed

Inline Feedback

Use local feedback for a local action instead of making every message global.

Changes are local until you save.

Action Undo Bar

Recovery remains next to the reversible action and exposes a clear keyboard button.

Use Undoable Action when the removed object must reflow and return to its original position.

Task archived

Empty State

A named absence with a clear next action instead of a blank region.

No projects yet

Create your first project to get started.

03 · Loading & Progress

Give time a shape, then get out of the way.

Skeleton Morph

The placeholder shares the card boundary with the real content.

Shimmer Surface

A low-contrast optional shimmer; reduced motion resolves it to a static surface.

Multi-Step Progress

Completed, current, upcoming and error are distinct states.

Use Progressive Step Workflow when completed decisions and the active task need to remain in one product surface.

  1. Cart
  2. Payment
  3. Review

Circular Progress Morph

The same compact surface can report active work, percentage or completion.

68%

Async Button

PressSpring answers the press while the label stays width-stable.

Use Async Action Control when the full lifecycle and recovery state need to stay visible.

04 · Lists & Tables

Make rows useful before making them clever.

Reorderable List

Drag the handle or focus it and use Arrow keys; announcements describe the new position.

  • Research interaction

    Today

  • Test keyboard path

    Tomorrow

  • Release quiet motion

    Friday

Expandable List Row

Secondary task detail appears in the row, not a modal detour.

Independent list/feed semantics; Expandable Data Row is the structured table pattern.

Design review and accessibility checks are attached to this invoice.

Swipe Action Row

Swipe on touch or use the visible actions button on every input method.

Team notes · updated 4m ago

Sticky Data Header

A small sticky header preserves context when the list becomes long.

ProjectOwnerStatus
Pinky UIFloraReady
WebsiteFloraReady
DocsFloraReady
SkillsFloraReady
RegistryFloraReady

Row Spotlight

Hover and keyboard focus provide the same relationship cue across a comparison row.

Starter$12Good
Studio$24Best fit

05 · Drag / Reorder

Pointer movement is an accelerator, never a requirement.

Drag Reorder Grid

Drop cards with a pointer, or focus a handle and use arrows to move by grid position.

Weekly pulse
Team inbox
Project notes
System health

Drop Indicator

The destination marker tells the user whether content will be inserted or placed inside.

Task A
Task B
Drop inside

Drag Ghost

A preview surface belongs to an active drag integration, not a decorative floating card.

Sortable Chips

Tags can be reordered, removed and extended without hiding the controls behind a gesture.

06 · Onboarding & Steps

Teach the next useful thing, then let people continue.

Stepper

A controlled workflow state in horizontal, vertical or compact form.

Use Progressive Step Workflow when completed decisions should remain editable context.

  1. Plan
  2. Build
  3. Review

Spotlight Tour

Three short steps with skip, back, next, Escape and target scrolling.

Coach Mark

A small, dismissible hint attached to one element, not a forced tour.

Saved views

Your saved filters will appear here.

Progressive Disclosure

Advanced controls reveal on demand and keep the basic workflow readable.

07 · Product Workflows

Let a product status move without losing its story.

Progressive Step Workflow

Completed decisions become compact context, the current decision stays open and the next one is previewed.

Active decision · 1 / 3

Draft

Shape the interaction brief.

Define the one decision this screen needs to make.

Next context

ReviewCheck keyboard and touch paths.

Status Pipeline

Queued, active, complete and failed states share one spatial track; retry stays with the failed stage.

Queued is active

07 · Mobile Interaction

Gestures are invitations with visible alternatives.

Bottom Sheet

Snap, drag, backdrop, Escape and a close button coexist with nested scroll content.

Swipeable Tabs

Tap or swipe on touch; desktop users get tab semantics and arrow keys.

Three updates this week.

Pull to Refresh

Release settles on Jelly's elastic spring; the callback owns data fetching.

Pull to reveal refreshresistance / threshold / release

Pull from the top on a touch device.

Refreshed 0 times.

Edge Swipe Panel

The edge gesture is touch-only and the button remains visible for keyboard and desktop users.

Long Press Action

Hold the row or use click/right-click/keyboard; cancellation never loses the item.

Action Sheet

One flat list of choices for a single object, with an explicit Cancel.

Wheel Picker

Momentum is native scroll-snap; keyboard Arrow/Home/End work without a gesture.

1
2
3
4
5
6
7
8
9
10
11
12

Swipe Back Gesture

Swipe from the left edge; the previous screen trails in behind at a slower rate.

Swipe from the left edge to go back

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

active geometry
Open recipe ↗

Live mobile

Focus rail mobile

center → next
Open recipe ↗

Live mobile

Bottom search sheet

thumb → workspace
Open recipe ↗

Live mobile

Fullscreen media morph

source → inspection
Open recipe ↗

Live mobile

Bottom toast stack

stack → compress
Open recipe ↗

Live mobile

Long-press selection

hold → batch mode

Tap or hold a row to select it.

Open recipe ↗

08 · Action response

Let the system answer the action it owns.

These surfaces cover pending, recovery, background work and completion without turning every state into a toast or a spinner.

Action ownership

Optimistic Action

The visible state leads; confirmation can still roll it back.

Ready.

Undoable Action

The item reflows immediately while its exact recovery remains close by.

  • Project briefReady to archive
  • Release notesDraft

Removing an item closes the gap before the Undo surface arrives.

Inline Save State

Edited, saving, saved and failed remain attached to the field.

SavedNo pending changes.

Async Action Control

The control owns intent, pending, success and retry as one stable surface.

Ready to publish.

Retry Surface

A failed region keeps its context and offers a local recovery path.

Preview unavailable

Completion Morph

The working surface becomes the result instead of disappearing into a detached message.

Upload brief

Start the action to see the surface transform.

Progress, recovery & continuity

Progressive Status

Operational detail appears only after the work earns it.

Processing

1 of 3 operational updates

Processing

Multi-Stage Progress

System execution stages remain named, current and recoverable; this is not a user wizard.

System execution

Process

2 / 4
  1. Upload
    Accepting the source file
  2. Process
    Preparing the working result
  3. Review
    Checking the output
  4. Complete
    Ready for the next product action

Preparing the working result

Background Task Row

Long work stays visible without blocking the surface where it began.

Generating preview

Running · 42%

running

Queued Action

Acceptance, waiting and active work are different states with different next actions.

Export report

Queued · #2 · waiting for capacity

queued

Partial Success Summary

Successful items stay successful while only failed items enter retry.

Batch result

2 succeeded · 1 need attention

  • Cover imageCompletesuccess
  • Gallery imagesCompletesuccess
  • Archive copyUnsupported formatfailed

Successful items are kept; only failed items enter recovery.

Conflict Resolution

Local and external values stay visible until a deliberate choice resolves them.

This item changed elsewhere

Choose which value should continue in this surface.

Your version

North star refresh

Latest version

North star refresh · updated elsewhere

Connection State

Offline and restored states remain actionable without forcing a refresh.

Offline · local work stays available.

offline

Resumable Progress

An interrupted long operation resumes from its known position.

Importing archive

Paused at 56% · resume keeps the work

paused

Delayed Feedback Escalation

Fast work stays quiet; longer work earns a more detailed status.

Save changes

Fast work stays quiet.

idle

Browse all · 88 workflows

The full set of workflows, easy to reach.

Live studies stay above. This compact catalogue keeps the full family visible, with canonical patterns first and quieter variations kept in context.

name / relationship / detail

feedback

16 entries

search

3 entries

loading

10 entries

lists

5 entries

drag

4 entries

onboarding

5 entries

mobile

45 entries