Color eases over 300ms

Color changes take 300ms, so a state change reads as calm.

Timings measured on ramp.com; Ramp publishes no design.md.

Snap versus ease

Hover or tap a chip and watch the color.

Instant swapBad
transition: none
300ms easeGood
300ms cubic-bezier(0.4, 0, 0.2, 1)
/* measured on ramp.com */
color, background-color, border-color:
  300ms cubic-bezier(0.4, 0, 0.2, 1)

Why it matters, pros and cons

Why it matters

Measured on ramp.com: color, background and border ease over 300ms. The change reads as a fade, not a flash.

Pros

  • The eye follows the change instead of catching a flicker.
  • Hover feels soft, which suits a calm, confident brand page.
  • Color fades are safe under reduced motion: nothing moves.

Cons

  • 300ms is at this site's UI limit. It is a marketing timing.
  • Fine on a page people read once; slow on controls used all day.
  • Rapid hover across many items leaves several fades running.