Foundations
Motion
Motion in Solace is calm and unhurried, easing things into place rather than snapping them there.
Principles
Motion supports the Thermasol experience of stillness. It should feel deliberate, never performative, and should fall away the moment it stops being useful.
- Calm. Transitions settle gently. Nothing jumps, bounces, or overshoots.
- Purposeful. Every animation explains a change of state or directs attention. If it does neither, it does not belong.
- Restrained. Fewer, slower movements read as composed. Reach for the shortest duration that still feels smooth.
Duration tokens
Durations climb in even, perceptible steps. Use shorter values for small, local changes and longer values for larger surfaces entering or leaving.
| Token | Value | Use |
|---|---|---|
--duration-instant | 80ms | Immediate feedback such as a press or active state. |
--duration-fast | 160ms | Hover and focus changes on small elements. |
--duration-base | 240ms | The default for most component transitions. |
--duration-slow | 360ms | Larger surfaces like menus, sheets, and panels. |
--duration-deliberate | 560ms | Full-screen or page-level transitions where calm matters most. |
Easing tokens
Easing shapes how a movement begins and ends. The standard curve covers most cases; entrance and exit pair with elements appearing or leaving.
| Token | Curve | Use |
|---|---|---|
--easing-standard | cubic-bezier(0.2, 0, 0, 1) | General-purpose transitions that move between two visible states. |
--easing-entrance | cubic-bezier(0, 0, 0, 1) | Elements arriving on screen — decelerating into place. |
--easing-exit | cubic-bezier(0.3, 0, 1, 1) | Elements leaving the screen — accelerating away. |
A typical transition combines one duration and one easing token, for example transition: opacity var(--duration-base) var(--easing-standard).
What to animate
Animate properties that are cheap to render and that read as soft.
| Animate | Avoid animating |
|---|---|
| Color and background | Width and height |
| Opacity | Top, left, and other layout offsets |
| Transform — translate, scale, rotate | Margin and padding |
Compositing color, opacity, and transform keeps motion smooth and avoids the jitter caused by animating layout. Move elements with transform rather than position offsets.
Reduced motion
Respect the user's settings. When a person enables prefers-reduced-motion, remove or strongly reduce non-essential movement: skip transforms and large transitions, and let state changes happen with minimal or no animation. Brief opacity changes are acceptable when they aid orientation, but nothing should slide, scale, or travel across the screen. The interface must remain fully usable and legible with all motion disabled.