Brand
simplepark.nl

Components

Parking card

The card on the map that starts and shows a parking action.

Anatomy

The parking card sits at the bottom of the map. It's where people start a parking action and come back to while they park. In the app it's SPMapDockCard.

PartValue
Cardwhite, radiusM (12px) corners, padding 24px left and right and 18px top and bottom
HeaderThe place in titleSm, then an optional tag and the zone code label on the right, 20px apart
Stripgrey 100, radiusM corners, 18 by 12px padding: the timer in titleMd on the left, the license plate with a pencil on the right
ButtonsFlush with the bottom of the card, no corners of their own, titleMd, 16px top and bottom. One button, or two side by side.

States

Before you startThe zone is chosen; the timer waits at zero in grey.
While you parkThe timer runs in navy; two buttons, a neutral one and Stop in red.
LoadingGrey bars where the text comes, the button disabled.
StateTimerButtons
Before you start00:00:00 in grey 700primary: Start parking
While you parkThe elapsed time in secondary 1000, ticking every secondinfo: Details, and danger: Stop
LoadingGray bars where the title and code comeThe button disabled
  • The timer on the card counts up from the start, in hours, minutes and seconds. It never counts down there; the end time is on the details screen. The lock screen is separate (see outside the app).
  • The plate has a pencil before you start, because you can still change the car.
  • Stop is always red and always on the right, so people find it without reading.