CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

:root {
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Usage */
.card { transition: transform 0.2s var(--ease-spring); }
.card:hover { transform: translateY(-4px); }