Foundations

Surface & motion

Radii, shadows, and motion. The small physical-feeling values that determine how PRIZM components round their corners, lift off the page, and move.

Radii

Five corner radii covering everything from inline pills to floating panels. Used by every component that has a corner — buttons, inputs, cards, dialogs, popovers.

Shadows

Three elevation tiers. Match them to how prominently an element sits over its background — a row in a table sits at sm, a popover at md, a modal at lg.

Motion

PRIZM does not define its own duration or easing tokens. Components animate using Tailwind’s default duration-* and ease-* utilities, which give a coherent enough tempo for the current component set. If motion becomes load-bearing for a future template or design call, we’ll re-introduce a tempo system sized to that concrete need rather than guess at one now.

When animating in a custom component, reach for transition-colors duration-150 for hover-style micro-interactions, duration-200 ease-out for entrance transitions, and duration-300 for larger reveals like modal opens. Always honour prefers-reduced-motion.