$type: "duration" primitive

Duration Token

Duration tokens represent a length of time, used for animation and transition timing. The $value must be a string containing a number followed by a time unit — either ms (milliseconds) or s (seconds). These map directly to CSS animation-duration and transition-duration values.

Value Format

A string with a numeric value and a time unit (ms or s)

When to Use

Use duration tokens to establish your motion scale — from instant micro-interactions to longer reveals. A shared scale ensures animations feel consistent across your entire product and makes motion design changes easy to roll out.

Valid Example

Valid JSON .json

{
  "duration": {
    "instant": {
      "$value": "100ms",
      "$type": "duration"
    },
    "fast": {
      "$value": "200ms",
      "$type": "duration",
      "$description": "Quick feedback interactions"
    },
    "moderate": {
      "$value": "0.3s",
      "$type": "duration"
    }
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types