Digital
App
How the brand works in the SimplePark app.
The app in one look
The app is the product, and the brand at its most practical. Open it and the map shows where you are, your zone is already found, and the parking card at the bottom has one button. Everything else is a tap away, never in the way.
- The map is home. The app opens on the map, never on a menu, a news screen or an ad.
- One thing to do per screen, with one filled button. Everything else is outlined or text.
- The amount and the time are always visible while you park: in the card, on the lock screen, in the Dynamic Island.
- Calm by default. White and gray surfaces, navy text, blue for what you can do. Orange is never in the app.
Structure
Three tabs, always in this order. They are the only navigation at the top level.
| Tab | What it holds |
|---|---|
| Map | The map, search, the zone you're in and the parking card. Starting, extending and stopping happen here. |
| Activities | Every parking action and payment, newest first, with the invoice per month. |
| Settings | License plates, payment, notifications, your account and help. |
Activities is the name of the tab, not a word for one parking action: that is always a parking action (see the word list).
Deeper screens slide in from the right with a back arrow. Choices that belong to the current screen, like picking a car or an end time, open as a sheet from the bottom with 16px corners and a drag handle.
Building screens
Every screen is built from the design system: the tokens for color, type, spacing and radius, and components like the button, the license plate, the zone sign and the parking card.
| Part | Rule |
|---|---|
| Screen | white as surface, 24px margins (space2XL) |
| Cards and rows | surfaceContainer grey 100 or a white card with radiusM, 18 by 24px padding |
| Titles | headlineSm for a screen title, titleMd for a row, bodyMd for its second line |
| Text | secondary 1000 for everything you read, grey 700 for secondary lines, never lighter for something people need |
| Icons | Material Symbols Rounded, 20 or 24px, in the color of the text next to them |
| Feedback | A snackbar at the bottom for something that happened, a callout in the screen for something to do, a dialog only when a choice can't wait |
| Loading | Gray shimmer bars in the shape of the content, never a spinner on a whole screen |
Words in the app
The app speaks like the rest of SimplePark, only shorter. See tone of voice and the word list.
- Buttons are verbs: Start parking, Extend, Stop, Add a license plate.
- Titles are nouns: Map, Activities, License plates, Payment.
- Errors say what happened and what to do: We couldn't start your parking action. Try again; if it still doesn't work, send us a WhatsApp.
- Numbers as numerals: € 0.29, 15 minutes, 17:30.
Outside the app
The app also shows up where people don't open it. These parts follow the same rules, with even fewer words.
| Place | What it shows |
|---|---|
| Lock screen and Dynamic Island | The Live Activity: the zone, the time left or the end time, and Stop and Extend |
| Notifications | What happened or what's about to, in one line: Your parking action stops in 15 minutes. |
| App icon | The white pin on primary 500, centered at about 46% of the width, nothing else on it. |