Abhishek is a Seattle-based UX designer. design system designer. UX motion designer. plugin builder. player of golf. snowboarder. photographer. UX designer. Currently working on the Redwood Design System at Oracle

Agentic prototyping

Motion Tokens — Redwood Design System

Duration

duration.fast time.100 50ms

duration.medium time.300 150ms

duration.slow time.600 300ms

Easing

easing.enter → easing.enter 0.12, 0, 0.28, 1

easing.exit → easing.exit 0.42, 0, 0.86, 1

Position & opacity

position.rest percent.0 0%

position.offset percent.500 50%

opacity.hidden percent.0 0%

opacity.visible percent.1000 100%

{
  "motion.core": {
    "duration": {
      "fast": "{motion.ref.time.100}",
      "medium": "{motion.ref.time.300}",
      "slow": "{motion.ref.time.600}"
    },
    "easing": {
      "enter": "{motion.ref.easing.enter}",
      "exit": "{motion.ref.easing.exit}"
    },
    "position": {
      "rest": "{motion.ref.percent.0}",
      "offset": "{motion.ref.percent.500}"
    },
    "opacity": {
      "hidden": "{motion.ref.percent.0}",
      "visible": "{motion.ref.percent.1000}"
    }
  }
}

{
  "motion.pattern.slide.in.up.md": {
    "from": {
      "positionY": "{motion.core.position.offset}",
      "opacity": "{motion.core.opacity.hidden}"
    },
    "to": {
      "positionY": "{motion.core.position.rest}",
      "opacity": "{motion.core.opacity.visible}"
    },
    "duration": "{motion.core.duration.medium}",
    "easing": "{motion.core.easing.enter}"
  }
}