Shape & motion
Zero radius, lines before shadows, and motion that never makes anyone wait.
Radius
There is one radius: 0. Every rounded-* utility resolves to 0 (so third-party Tailwind code stays square too); only rounded-full is round, and it is reserved for the radio dot and the ripple.
Elevation
| Level | Utility | Use |
|---|---|---|
| 0 | none | The page |
| 1 | border (+ shadow-xs) | Cards, inputs, tables |
| 2 | shadow-md / shadow-lg | Menus, popovers, select, tooltips |
| 3 | shadow-xl | Dialogs, sheets, command palette |
Tailwind's shadow scale is mapped onto these three levels, so upstream components land on the right one automatically.
Motion
| Token | Duration | Use |
|---|---|---|
--zy-duration-fast | 120ms | Hover, press, color changes |
--zy-duration-base | 200ms | Toggles, tabs, accordion |
--zy-duration-slow | 320ms | Dialogs, sheets, popovers entering |
--zy-duration-ripple | 480ms | The ripple only |
Easing: ease-standard (cubic-bezier(.2,0,0,1)) for entering and state changes, ease-exit (cubic-bezier(.4,0,1,1)) for leaving. Under prefers-reduced-motion nothing travels or slides: overlays only fade, and states change at once.
Things draw along lines, slide and clip; they never bounce or zoom. The Signature page shows how that plays out in the components.
The ripple
Zynactra's one Material touch. Every Button ripples on press unless it's a link.
- currentColor at 16% opacity, clipped to the button;
- origin at the pointer, or the center for keyboard presses;
- grows to twice the longest side over 480ms, fades 200ms after release;
- off under reduced motion;
ripple={false}turns it off per button.
Use useRipple from @zynactra/ui/lib/ripple for other press targets: list rows, menu items, toggles.