Components
Zone sign
The P sign with the zone code.
Anatomy
The zone sign looks like the blue parking signs on Dutch streets, with the zone code people also see on the sign and the parking meter. In the app it's ParkingZoneBadge; the inline version is SPParkingCodeLabel.
12100
5174
12345
| Part | Value |
|---|---|
| Sign | 60 by 60px, primary 500, radiusS (8px) corners |
| Code | In a white band across the top 27px, with a 2px primary 500 border; labelMd in bold, primary 500, at most 6 characters |
| P | 24px in white, centered under the band |
| Code label | A 16px primary 500 tile with a white P and radiusXS corners, then the code in labelLg and primary 500, 4px apart |
Usage
- The code is the code on the street sign, without a city prefix: 12100, not AMS 12100. The place goes in the title next to it.
- The sign for the zone you're in or looking at; the code label inline, next to a title in a card or list.
- Always blue. The sign is never orange, navy or outlined, also not in marketing.
- One sign per view. Two zones next to each other are two rows with a code label each.