Skip to guide content
Product

Operational clarity

Help people finish the work around the work.

Product patterns keep roles, objects, state, consequences, recovery, and human help easy to understand.

Working draft · September 2026
01

Product principles

Show what is true, what happens next, and who can help across web and mobile.

Start with the real object

Name the event, studio, order, schedule, or response—not an internal module.

Make state legible

Set up is not live. Sent is not delivered. Returning to a browser does not confirm payment.

Show the consequence

Use specific verbs and explain material effects before action.

Design recovery

Preserve work, provide a safe next step, and name who can help.

02

Components with states

Use familiar controls with complete interaction, system, content, and recovery states.

Working tool

Try the task in real conditions.

In testing

Change the width or remove a visual aid. Your form choices stay in place if the simulated handoff fails.

Specimen width
Stress the example

Measured component mode: inline

Current state: ReadyImplementation key: idle

Share only what feels useful. For direct help, email hello@withmotif.fyi.

What kind of detail is useful?

A recent example, the tools involved, and what you had to do by hand are all useful.

Optional ways to stay connected

Product components prioritize operational clarity. Expressive editorial treatments should settle down around money, consent, policy, status, schedules, errors, or recovery.

03

Design tokens

Share names for color, type, spacing, shape, and motion across every product.

Working tool

Follow a token to its source.

Candidate

Choose a component decision, then see the shared role and original value behind it. This is the chain product teams should preserve.

Density
Expression
standard densityPage gutter resolves to 32px
  1. Componentcomponent.action.container.color.default

    Primary action container color.

    Source: action-laboratoryCandidate
  2. Shared rolecolor.action.primary

    Primary action container color.

    Source: semantic-roleCandidate
  3. Sourcecolor.source.aubergine

    Motif's primary anchoring color.

    Source: working-rhythm.identity.colors.aubergineCandidate
Generated CSS variable
--motif-component-action-container-color-default
Resolved value
#2E0F3D
Permitted context
Use for the one primary next step in an invitation or task.
JSON · CandidateMotif design tokensCSS · CandidateMotif custom properties
04

Interactive examples

Test task patterns with realistic content, consequences, errors, and recovery.

  • ButtonVerb + object: “Publish event.”
  • ErrorImpact + preserved work + safe next step.
  • SuccessExact completed action + anything still pending.
  • Empty stateWhy it is empty + whether expected + useful action.
05

Product suite

See what is current, in development, and exploratory without confusing vision with availability.

Current

Ticketing and events

Motif’s active starting point and bounded service focus.

In development

Event operations

Tools and workflows being shaped through current event work.

Exploratory

Studio and festival support

Broader support for circus, aerial, movement, and small studios. No general offer yet.

Status describes availability, not importance. Product direction changes as Motif learns with studios, performers, organizers, and festivals.