foundations / motion

Motion

DK motion is seeded, preset-driven, and intentionally restrained so system character changes without degrading usability.

Representative components
4
Tool routes
2
Token notes
2

Principles

Core principles

These are the design-system rules this foundation should reinforce.

  • Motion should reinforce causality and hierarchy, not add noise.
  • A calm system and a snappy system should feel related, not like different libraries.
  • Short interactive motion beats theatrical page choreography in a component system.

Model

How DK models it

This section connects the concept to the actual DK math and token pipeline.

  • Theme seeds include motion presets that compile into timing and easing variables.
  • Motion tooling uses spring and minimum-jerk math rather than arbitrary easings.
  • Interactive components consume motion tokens instead of authoring bespoke transitions.

Practice

How to use it in product work

These are the decisions designers and engineers should make with this foundation in mind.

  • Use motion for open/close, emphasis shifts, and state clarification.
  • Keep button pressed states subtle and fast.
  • Reserve stronger movement for drawers, dialogs, and toasts where hierarchy matters.

Interactive route

ease

Use the interactive route to explore this foundation live.

Interactive route

jerk

Use the interactive route to explore this foundation live.

Proofs

What the proof layer guarantees

These are the reliability claims DK makes about this foundation today.

  • Proof fixtures can fail if timing exceeds the intended bounds for a component family.
  • Preset comparison highlights how motion character changes across systems.
  • Motion remains inspectable even when it is not the hero of a page.

Token notes

  • Motion tokens feed transitions, overlays, and some emphasis affordances.
  • Calm, smooth, and snappy presets intentionally change the personality of the same components.