Skip to content
Pinky UI

Product systems · contextual layer

Real product structure, with a little more feeling.

Forms, data, overlays and workflows that preserve context, native semantics and a clear next action.

01 · Forms

Fields that keep their context.

Inline Edit Field

The value, help text and save path stay attached to one product field.

Workspace name

Shown to collaborators in the workspace switcher.

Click to edit

Validation Field

Invalid, correcting and valid are readable states with the field still in place.

A local example; no request is sent.

Not checked

Progressive Form

Completed sections condense into context while the next useful decision opens.

Section 1 of 3

Identity

Name the project.

In focus

Up next

AudienceChoose who sees it next.

04 · Composition & editing

Inputs that change shape as intent becomes clear.

These systems keep the original field, the next decision and the editing context close together.

Morphing Input

A compact value surface becomes a focused editor without losing its source identity.

Expandable Composer

A one-line prompt grows into a multiline editing surface with attached tools.

Token Field

Confirmed values wrap as real tokens while the next value remains ready to type.

Design
Motion

Press Enter or comma to keep a value. Backspace removes the previous token.

Multi-Value Builder

Property, operator and value stay coordinated as one compact condition authoring surface.

Build a view
Where
And

Smart Suggestion Field

Typed text stays raw until a visible suggestion is explicitly accepted.

A suggestion is proposed, never silently substituted.

Inline Command Field

Slash commands become removable content tokens instead of opening a navigation palette.

Commands become visible tokens inside the composition, separate from navigation commands.

05 · Context & validation

Reveal only the context the next decision needs.

Progressive Disclosure Field

Choosing shipping reveals the address fields in the same document flow.

Delivery

Shipping details are now part of this field.

Editable Property Rail

One property at a time becomes an editor while the object context remains stable.

NameNorth star
StatusIn review
PriorityHigh

Contextual Formatting Bar

Select a phrase in the note to reveal formatting tools attached to that selection.

Handoff note

Select a phrase to shape its emphasis.

Select text to reveal the attached tools. No floating editor is created outside the field.

06 · Adjustable values

Precision can still feel tactile.

Unit Scrubber

Drag the bounded surface or type a precise number; both paths update the same unit value.

Corner radius24 px
drag to adjust064 px
pxdirect value · arrows

Range Composer

Two endpoints share one track and remain ordered while either value changes.

Canvas width

320960 px · endpoints stay ordered.

Segmented Input Composer

One date value is entered through three labelled, keyboard-connected segments.

Release date
One value · three coordinated parts

02 · Data

Rows that remain useful while they move.

Filter Rail

Grouped choices, active chips and result count remain one navigable surface.

Status
Owner

16 results

Choose one option per filter group. Selected filters can be removed below.

Sortable Data Rows

A structured table keeps columns intact while pointer, keyboard and touch paths all reorder the same rows.

ItemOwnerStatusReorder

Project brief

Updated 4m ago

Flora
Ready

Interaction audit

Updated yesterday

Team
Review

Release notes

Updated Friday

Flora
Draft
Drag rows on desktop; use ↑ ↓ on touch.Focus ↕, press Space, then use arrows.

Expandable Data Row

The row opens its detail context in place instead of breaking the scan with a modal.

Keyboard path, reduced motion and touch fallback have all been checked for this handoff.

Expand row

Selection Tray

Batch actions enter the flow only after there is something selected.

No batch action yet

04 · Data visualization

Read the data without losing the surface.

A small chart language for reading, comparison, selection and context. Every surface has a direct value path, a keyboard path and a table-minded fallback.

quiet / precise / inspectable

Interactive Line Chart

A hairline crosshair snaps to the nearest point and keeps the value in a reading rail.

Sun26k
Weekly usage7 data points. Focus the chart and use the arrow keys to read each point.

Focus the plot, then use ← → to move through the reading points. Pointer and touch follow the same rail.

Range Brush Chart

Overview and focused reading share one selected window.

Usage history · Sat21k
Selected window
TueSat

Drag the selected window or adjust either labelled handle. The focused chart keeps its reading position.

Comparison Chart

Two series expose the gap directly instead of relying on a floating tooltip.

Sun
Studio 78Team 69
Difference -9
Studio and team comparisonTwo aligned series. Focus the chart and use arrow keys to compare values and their difference at each label.

The solid circle, outlined square and direct difference rail keep the comparison readable without relying on colour alone.

Annotated Timeline

Events explain the curve while remaining a small, traversable set of buttons.

Tue15k

Campaign. The first campaign widened the audience.

Launch timelineA trend with 3 contextual event markers. Use arrow keys for data points or tab to an event marker.

Threshold / Band Chart

State is carried by labelled bands, hairlines and the active marker—not colour alone.

Sun · Target94ms
Response time healthA trend over labelled normal, warning and target bands. Focus the chart and use arrow keys to read each value and band state.
  • Normal0ms60ms
  • Watch60ms80ms
  • Target80ms100ms

Hairline thresholds, direct band labels and the diamond marker keep state legible without colour-only meaning.

Interactive Bar Ranking

Metric changes and sorting preserve the identity of each row.

  1. 01
    Research12 notes
    84%
  2. 02
    Release15 notes
    76%
  3. 03
    Prototype9 notes
    68%

Change the metric or sort order. Rows keep their identity while the ranking changes.

Linked Small Multiples

Four metrics share one reading position without becoming four independent tooltips.

SunOne reading position, 4 metrics
Revenue$59kConversion5.4%Retention82%Sessions36k
Weekly metric comparisonFocus the collection and use arrow keys to move one shared reading position across every mini chart.

Revenue

Sun

$59k

Conversion

Sun

5.4%

Retention

Sun

82%

Sessions

Sun

36k

Pointer, touch and keyboard move one shared crosshair; each metric keeps its own direct value label.

Chart ↔ Table View

The same dataset remains available as a chart or a real semantic table.

Same data, two readings

Sun · 26k

Weekly usageThe same weekly usage data is available as a chart and a table.

The table is the same data source, not a hidden accessibility-only duplicate.

03 · Workflows

Progress that keeps its product context.

Progressive Step Workflow

Completed decisions become compact context while the active task and next decision remain visible.

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 stay on one spatial track, including retry.

Queued is active

04 · Overlays

Context that stays close to its source.

inspector

Anchored Inspector

Detail

A selected source keeps its readable properties in a nearby inspector instead of a detached modal.

popover

Adaptive Popover

Detail

A contextual surface measures its local boundary, flips when needed and stays attached to the trigger.

tooltip

Tooltip

Detail

A short, non-interactive label appears near a control on hover or focus, and nowhere else.

dialog

Dialog

Detail

A standard modal dialog — scrim, focus trap and Escape — with no shared-element continuity to its trigger.

Browse all · 73 systems

The full set of systems, 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

media

6 entries

forms

22 entries

data

18 entries

collections

12 entries

overlays

15 entries