Motion Tokens

Transition durations and easing curves across all three design systems. Each DS has its own rhythm — brutalist is snappy, editorial is smooth.

Transition Durations

Hover the boxes below to feel the speed difference between design systems.

--transition-fast150ms

--transition-base250ms

--transition-slow400ms

Token	ds-editorial	ds-brutalist	ds-clean
`--transition-fast`	150ms	80ms	120ms
`--transition-base`	250ms	150ms	200ms
`--transition-slow`	400ms	250ms	300ms

Easing Curves

All design systems share the same base easing curves, but --easing-spring varies per DS personality.

Token	Label	Value
`--easing-default`	Standard	`cubic-bezier(0.4, 0, 0.2, 1)`
`--easing-in`	Accelerate	`cubic-bezier(0.4, 0, 1, 1)`
`--easing-out`	Decelerate	`cubic-bezier(0, 0, 0.2, 1)`
`--easing-spring`	Spring	editorial: `cubic-bezier(0.25, 1.25, 0.5, 1)` brutalist: `cubic-bezier(0.5, 2, 0.5, 1)` clean: `cubic-bezier(0.34, 1.56, 0.64, 1)`

Usage

Apply motion tokens directly in your CSS Modules:

.button {
  transition: background var(--transition-fast) var(--easing-default),
              transform  var(--transition-fast) var(--easing-spring);
}