Visual language
Motion
How things move in SimplePark, and what never moves.
Principles
Motion in SimplePark helps you understand what just happened. It is never there to entertain.
- Quick. Parking is done in a hurry. Nothing makes you wait for an animation to finish.
- Calm. Things ease into place; they don't bounce, shake or spin.
- Meaningful. Movement shows cause and effect: a card that grows from the button you tapped, a timer that counts, a sheet that slides from where it comes from.
- What never moves: amounts, prices and the end time. Numbers that matter appear in place, they don't roll, count up or fly in. A running timer ticks, nothing more.
- Respect the setting. When reduce motion is on, transitions become fades and nothing slides.
Timing and easing
| Token | Duration | Use it for |
|---|---|---|
| Fast | 120 ms | Small state changes: a pressed button, a toggle, a selected chip. |
| Medium | 200 ms | Elements entering or leaving: a sheet, a toast, an expanding card. |
| Slow | 300 ms | Changes of screen and large layout changes. |
| Shimmer | 2000 ms per cycle | Loading placeholders. |
Ease out when something enters, ease in when it leaves, and ease in and out when it moves from one place to another. On the web the ease out is cubic-bezier(0.2, 0.7, 0.2, 1), the ease in is the same curve mirrored, cubic-bezier(0.8, 0, 0.8, 0.3), and the ease in and out is the even cubic-bezier(0.45, 0, 0.55, 1). No transition in the app takes longer than 300 ms. The shimmer is a loop, not a transition. The website has a few slower movements of its own (below), and marketing video and social may take more time, with the same calm character.
On the website
The website moves a little more than the app, because it has to tell a story without a tap. These are all the movements it uses: every block arriving as you reach it, the story in the hero and the home sections, and the page change, the menus and the answers on every page. Anything else stays still.
- Every block arrives on its own. The first time a part of the page comes into view, on arrival as well, it rises 24px into place in 800 ms. What comes into view together follows in reading order, 100 ms apart: the title, the sentence, the buttons, then the panel; a heading, then each card under it. A block of text arrives as one, never line by line.
- A page change is a fade, then the blocks. The old page fades out in 120 ms and the new page's blocks rise in on their own; the page never moves as a whole. The header stays where it is and the new page opens at its top. A link to a section of the page you are on scrolls there; a link to another page never scrolls you through it.
- Under the mouse, colour, borders and backgrounds change fast, and a card or a store button lifts 2px at medium speed. Nothing else moves on hover.
- The panel's tabs move on by themselves, so a visitor sees the whole parking action without clicking. A click stops that.
- One thing moves at a time in the same area: the panel rises, then the toast drops, then everything is still.
- Scrolling only ever brings a block up into place, once. Nothing flies in from the side, and nothing moves again when you scroll back.