Tokens

The token file format, including the custom spring type.

Format

The token file follows the W3C Design Tokens (DTCG) format. Each token has a $type and a $value. DTCG already defines duration, cubicBezier, dimension, and number.

DTCG has no spring type, so Motif adds one: "$type": "spring". Springs are stored as physical params, because every platform can convert from them.

Token groups

| Group | Tokens | Used for | | --- | --- | --- | | spring | fast, default, slow | Movement: position, scale, size | | duration | instant, fast, base, slow, move | Tweens: opacity, color, blur. move times the glide and crisp curves | | easing | standard, enter, exit, glide, crisp | Tween curves, and the 2 tween movement curves | | distance | xs, sm, md, lg | How far things travel on enter and exit; xs is a sinking press | | scale | press, enter, pop, stretch | Press feedback, enter and pop start sizes, the squish stretch | | blur | sm, md | The blur entrance (start) and exit | | stagger | list, cap | Delay between children, how many children stagger |

The file also records the style in $extensions["dev.motif"].style: entrance, curve, groups, and press. See Knobs.

The spring type

A spring token holds mass, stiffness, and damping:

"default": {
  "$type": "spring",
  "$value": { "mass": 1, "stiffness": 511, "damping": 40 },
  "$extensions": {
    "dev.motif": {
      "fallback": { "duration": "218ms", "cubicBezier": [0.28, 0.19, 0.32, 0.94] }
    }
  }
}

• Damping ratio = damping / (2 × √(stiffness × mass)). At 1 or more, the spring never overshoots. Under 1, it overshoots and settles.
• Fallback. Tools that do not understand springs read $extensions.dev.motif.fallback: a duration and a cubic-bezier fitted to the spring's shape.
• CSS. The CSS export samples each spring into a linear() easing, with the settle time as its duration.
• SwiftUI. response = 2π√(m/k), dampingFraction = c / (2√(km)). Native exports come after v0.

Rules

• No recipe or component holds a raw duration, easing, or spring value. Everything refers to a token.
• Movement (x, y, scale, width) uses springs. Opacity and color use tweens. Never spring an opacity.
• Values are rounded: stiffness and damping to integers, durations to whole ms, distances to whole px.

To see a full token file, open the playground, then the JSON tab of the Export panel.