Skip to guide content
Website

Responsive digital expression

Let the web feel alive without making it harder to use.

Website patterns translate Working Rhythm into responsive structure, complete states, useful motion, and accessible interaction.

Working draft · September 2026
01

Website principles

Orient first, express second, reveal progressively, and always leave a clear route to help.

01

Orient first

Name the place, purpose, and next useful action.

02

Reveal progressively

Keep optional detail close without making it compete.

03

Express with purpose

Use one memorable gesture after the structure works.

04

Leave a route to help

Make human support visible when the interface cannot resolve the issue.

02

Components and states

Document default, hover, focus, active, disabled, loading, success, warning, and error.

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
  • InteractionDefault · hover · focus-visible · active · disabled
  • SystemLoading · pending · success · warning · error · offline
  • ContentEmpty · long copy · localization · missing image · missing font
  • RecoveryPreserved input · safe retry · alternative route · owner · closure
03

Interactive examples

Try the controls and inspect how feedback, focus, recovery, and help work together.

Interaction should answer a question.

Hover previews possibility. Focus preserves keyboard orientation. Active acknowledges input. Pending protects against duplicate action. Success names exactly what completed.

Do

Give pointer, keyboard, and touch users a perceptible response.

Don’t

Don’t make hover the only way to discover content or rely on a subtle color shift alone.

04

Motion elements

Use motion for feedback, orientation, reveal, continuity, or one meaningful crossing.

Try the motion recipes

Each example begins settled. Choose Replay to see one recipe without moving the others.

All motion examples are settled.

Recipe

Settle

Preview Settle
Example: a control acknowledges a press, then returns to rest.
Use when
Acknowledge one direct press without delaying the result.
Reduced motion
The result appears immediately with no press travel.
Implementation details
Tokens
motion.action.pressmotion.ease.feedbackmotion.distance.press
Values
160mscubic-bezier(0.2, 0, 0, 1)1px
What changes
The action travels down by 1px and scales to 99%, then settles.
What stays
The label, meaning, layout, and announced result stay in place.
Recipe

Open with continuity

Preview Open with continuity
Ticket details
Doors open at 6:30 PMAccessible seating is available.
Use when
Reveal supporting content while keeping its trigger and reading position clear.
Reduced motion
The complete panel appears immediately in its final position.
Implementation details
Tokens
motion.disclosure.entermotion.ease.functionalmotion.distance.functional
Values
260mscubic-bezier(0.22, 0.75, 0.2, 1)8px
What changes
The supporting panel enters across 8px of vertical travel.
What stays
The trigger, heading, and complete panel content stay available.
Recipe

Arrive together

Preview Arrive together
Plan togetherWelcome clearlyMake room to create
Use when
Bring a small editorial group into view as one related thought.
Reduced motion
All three items appear together, with no fade, travel, or stagger.
Implementation details
Tokens
motion.editorial.arrivemotion.ease.editorialmotion.distance.revealmotion.delay.stagger-short
Values
520mscubic-bezier(0.22, 0.75, 0.2, 1)14px40ms
What changes
Three related items rise 14px with 0ms, 20ms, and 40ms delays.
What stays
Their order, copy, spacing, and final positions stay stable.
Recipe

Carry the thread

Preview Carry the thread
Chapter oneMake the plan clear.
Chapter twoBring the room together.
Use when
Mark one meaningful chapter crossing on an expressive surface.
Reduced motion
The static crossing and chapter appear together with no path drawing or travel.
Implementation details
Tokens
motion.chapter.crossingmotion.ease.signaturemotion.distance.signature
Values
1000mscubic-bezier(0.22, 0.75, 0.2, 1)12px
What changes
One ribbon draws across as the next chapter settles over 12px.
What stays
The chapter title, destination, and reading order stay fully visible.

Keep the Motif identity still. Motion belongs to relationships, feedback, disclosure, and chapter changes—not to the identifying artwork.

Do

Use motion for feedback, orientation, reveal, continuity, or one meaningful crossing. Show content before enhancement.

Don’t

Don’t scroll-jack, loop near tasks, animate the logo, or use motion as the only state message.

05

Responsive and accessible

Design for touch, keyboard, larger text, small screens, glare, distraction, and weak connections.

320px and up

No document-level horizontal overflow.

44 × 44

Minimum interactive target.

400% zoom

Content reflows without overlap or loss.

Less motion

Static paths remain complete and clear.

Also test keyboard order, visible focus, forced colors, text spacing, touch, glare, distraction, older devices, and weak connections.