MOTIV / Product language / 01

Built into the work.

Signature interactions and everyday controls, sharing one visual language. Explore the working examples below.

Try the workflows →

Recognizably MOTIV.

Move the work forward

Sample follow-ups

01Customer decisionsApproval is the next step

Elena’s 90,000-mile service estimate is ready for review.

Review the repair order →

02Today’s capacityMake room for the next visit

Choose an available time and prepare a sample appointment.

Open the schedule →

03Work in progressKeep the next action visible

Marcus’s maintenance visit is waiting for inspection.

Open the repair order →

Repair-order journey

One record. Every next step.

Check-inVehicle received
InspectionFindings recorded
ApprovalCustomer decision
RepairWork authorized
ReadyQuality check

A horizontal journey on larger screens becomes a vertical timeline on phones. Status is always written out.

Open a working record →

Precision, without friction.

Numbers that mean something

Explicit units. Clear limits. No automatic conversion of a blank value to zero.

A date, with context

Use the device calendar or a quick choice. Appointment times appear as a capacity strip.

Visit date

Calendar date · Store local time

Crossed-out times are unavailable in this example.

Vehicle and customer fields

VIN

17 characters · I, O and Q are not used

Odometer

Whole miles

Phone

Keep country codes when entered

Choices and actions

Assigned advisor

Customer requests a status update Show completed work

“Unavailable” demonstrates the disabled state.

In progressAwaiting approvalReady

Every state has a place.

Record list

One system underneath.

Surfaces and type

Workspace
--m-bg

Working surface
--m-panel

Primary action
--m-action

16px inputs · 14px regular labels · 44px minimum primary controls · 8px spacing base. Light and dark appearances share the same hierarchy.

Interaction rules

Stack behavior

One expanded metric, all labels visible. Tab and Enter work throughout; arrow keys move between metrics. Exact chart values remain available as a table.

Forms and saving

Keep typed values after errors. Explain the problem beside the field. Saving disables repeat submission. Leaving a changed estimate asks before discarding.

Mobile and motion

Drawers become full-screen views. Lists become readable record cards. Reduced-motion preferences remove animation without removing content.

Prototype boundary

Records and capacity are sample data. Changes last for this page session only. No appointments, approvals, messages, or payments are sent.