Foundations
Tokens
Color, type, spacing and radius as named values.
Color tokens
Components use tokens, never a hex or a scale step. A token is a role (surfaceContainer, onPrimary), and it points to a step on one of the scales on the color page. Change the step, and every component that uses the token follows.
The names follow Material 3. In the app they live in the simplepark_design package: the standard roles in SPColorScheme, the extra surfaces in SPColorExtension.
| Token | Points to | Use it for |
|---|---|---|
primary | primary 500 | The main action, the brand blue |
onPrimary | white | Text and icons on primary |
primaryContainer | primary 500 | Filled brand containers |
onPrimaryContainer | white | Text on a primary container |
secondary | secondary 1000 | Navy surfaces and secondary actions |
onSecondary | white | Text and icons on secondary |
tertiary | primary 100 | Light blue tints, selected states |
onTertiary | secondary 1000 | Text on tertiary |
surface | white | The background of a screen |
onSurface | secondary 1000 | Everything you read |
onSurfaceVariant | grey 500 | Hints and placeholders |
surfaceContainerLowest | white | A container that sits flat on the surface |
surfaceContainerLow | grey 50 | A quiet container |
surfaceContainer | grey 100 | The default card and field |
surfaceContainerHigh | grey 200 | A container that stands out |
surfaceContainerHighest | grey 300 | The most set-apart container |
onSurfaceContainerLowest to onSurfaceContainerHigh | grey 400 to grey 700 | Secondary text in the matching container. Grey 400 and 500 are below 4.5 : 1, so they never carry information (see text on color) |
onSurfaceContainerHighest | secondary 1000 | Text in the highest container |
primarySurface, primarySurfaceContainer | primary 500, info background | Brand blocks, strong and light |
secondarySurface, secondarySurfaceContainer | secondary 1000, secondary 1000 at 7% | Navy blocks, strong and light |
successSurface, successSurfaceContainer | success, success background | Success, strong and light |
warningSurface, warningSurfaceContainer | warning, warning background | Warnings, strong and light |
errorSurface, errorSurfaceContainer | error, error background | Errors, strong and light |
infoSurface, infoSurfaceContainer | grey 500, grey 100 | Neutral information |
disabledSurface, disabledSurfaceContainer | disabled, grey 50 | Disabled controls |
outline | grey 200 | Borders |
outlineVariant | grey 100 | Dividers |
scrim | black at 40% | Behind a sheet or dialog |
shadow | black at 12% | Elevation |
Every …Surface token has an …OnSurface partner for the text on it, and every …SurfaceContainer an …OnSurfaceContainer. Which pairs are readable is on the color page.
Type tokens
The type tokens are the eighteen styles of the type scale, from heroNumber to labelSm. heroNumber, displayXl and bodyXl are for the website only; the app uses the other fifteen. Each token sets the typeface, size, line height and weight together; never set one of them on its own.
| Group | Tokens | Typeface |
|---|---|---|
| Website display | heroNumber, displayXl | Poppins 600, website only |
| Display | displayLg, displayMd, displaySm | Poppins 600 |
| Headline | headlineLg, headlineMd, headlineSm | Poppins 600 |
| Title | titleLg, titleMd, titleSm | Poppins 500 |
| Body | bodyXl (website only), bodyLg, bodyMd, bodySm | Figtree 400 |
| Label | labelLg, labelMd | Poppins 500, for buttons |
| Label | labelSm | Figtree 500, for tags and chips |
Numbers use the body or label token of their place, with tabular figures on. In the app the tokens live in SPTypographyTokens in the simplepark_design package. Today the app sets every token in Poppins; body and labelSm still have to move to Figtree.
Spacing and radius
Spacing and radius come from SPSpacingTokens and SPRadiusTokens. Use the steps; never a number in between.
| Spacing token | Value | Use it for |
|---|---|---|
space4XS | 2 | Hairline gaps, between a label and its value |
space3XS | 4 | Between an icon and its text |
space2XS | 6 | Inside small parts: plate padding, tags |
spaceXS | 8 | Between related items in a row |
spaceM | 12 | Inside a field or a button, between list rows |
spaceML | 16 | Between blocks in a card |
spaceL | 18 | Card padding, top and bottom |
spaceXL | 20 | Between a title and what sits next to it |
space2XL | 24 | Card padding, left and right; screen margins |
space3XL | 30 | Between sections on a screen |
space4XL | 36 | Above a screen title |
space5XL and up | 48, 60, 72, 96, 120, 144, 192 | Empty states and large layouts |
| Radius token | Value | Use it for |
|---|---|---|
radiusXS | 4 | The license plate, small tiles, bars |
radiusS | 8 | The zone sign, callouts, small boxes |
radiusM | 12 | Buttons, cards, fields, the parking card |
radiusML | 16 | Sheets and large panels |
radiusLG | 48 | Round elements that need a fixed radius |
radiusFull | 9999 | Status tags, chips and segmented controls. Never buttons. |
In the app every radius is drawn as a smooth corner, a squircle, with SmoothRectangleBorder and .spSmooth. On the web and in email a plain border-radius is close enough. See shapes for how the corners nest.
Other tokens
| Group | Tokens | Values |
|---|---|---|
| Icon size | SPIconTokens xs, sm, md, lg, xl, xxl | 16, 18, 20, 24, 32, 36 |
| Line width | SPLineWidthTokens sm, smPlus, md, lg, xl | 1, 1.5, 2, 3, 4; dashes 4 on, 4 off |
| Elevation | SPElevationTokens none, low, med, high | 0, 1, 3, 6 |
| Shadow | SPShadowTokens.soft | Black at 4%, blur 12, no offset |
| Motion | SPAnimationTokens | See motion |