Foundations
Design system
The shared foundations and components of SimplePark interfaces.
What the design system covers
The design system is the set of named values and components that every SimplePark screen is built from. It turns the brand into parts you can use without deciding again: which blue, how round, how far apart.
| Layer | What it is | Where it's described |
|---|---|---|
| Tokens | Named values for color, type, spacing, radius, elevation and motion | Tokens, color, typography, motion |
| Components | The parts people recognize: buttons, the license plate, the zone sign, the parking card | The pages in this section |
| Patterns | How the parts come together on a channel | Website, email, social |
- Tokens before values. A component asks for
primaryorradiusM, never for a hex or a number. Change the token, and everything follows. - One component, every channel. The license plate looks the same in the app, on the website, in an email and on a poster.
- The app is the reference. When the app and a page here disagree, the app's
simplepark_designpackage wins, and this site gets fixed.
Where it is used
| Channel | Built with |
|---|---|
| App | simplepark_design for the tokens and theme, simplepark_components for the widgets, in the simplepark-mobile-v2 repo |
| Website | The tokens as CSS variables |
| The email parts, see email | |
| Marketing | The components drawn as they are in the app, see imagery |