Color

How our colors work

Our colors come in two layers, the same two the app and the Figma library use.

• Scales are the raw colors: a primary (blue) scale, an accent (orange) scale, a secondary (navy) scale, a gray scale and the status colors. A scale step has a number, like primary 500, never a name of its own.
• Tokens are roles. A component never asks for grey 100; it asks for surfaceContainer, and the token points to a step on a scale. Change the step a token points to, and everything that uses the token follows.

The token names follow Material 3, which the app is built on: primary, surface, surfaceContainerLow, onSurface and so on. On means the color of text and icons that sit on top of the color with the same name.

Brand colors

* A starting point, not a proofed build. Confirm with a printer proof before the first print job.

Blue is SimplePark. The logo, the app icon, the main button and the big surfaces that say "this is us" are blue. It is the color of the parking sign that every Dutch driver already looks for. Navy does the reading, and orange is the spark on the website, never in the app. Click a hex to copy it.

Scales

Each scale runs from light to dark. Primary and accent have the brand color in the middle, at 500, with two lighter and two darker steps around it. Secondary is the ink and only gets lighter. The outlined step is the brand color; click a step to copy its hex.

Surfaces

A screen is built in layers. The surface is the background; cards, sheets, list rows and fields sit on it in containers. The five container levels go from the same white as the surface to the most set-apart gray, and each level has its own text color. Not all of them are readable text: grey 400 and grey 500 on the first two levels measure 1.9 : 1 and 2.6 : 1, so they are for hints, placeholders and disabled text, never for information, and grey 600 on grey 100 measures 4.2 : 1, which is large text only (see text on color).

Brand roles

Where the brand shows in the interface: the main action, navy blocks and light blue tints. The sample text in each swatch is the token's on partner.

Status

Every status comes in two forms: a strong surface, for a dot, a bar or the shape of a badge, and a light container for a message. Each example shows its measured contrast. Text on a strong surface is navy, not white: white measures 1.4 to 3.1 : 1 on them, navy 5.0 : 1 or more.

The status colors themselves are too light for text. That's what the text steps are for: success text, warning text and error text are readable on their own light container, at 4.5 : 1 or more. Use them for the words in a status tag or message; the status color itself goes to icons, dots and bars. Neutral and blue tags use grey 700 on grey 100 and primary 700 on primary 100, which is why the Info and Disabled messages above are set in grey 700: grey 500 and the disabled color are too light for words. A disabled control itself is exempt from the contrast rules; a message about it is not.

Product colors

Colors with one job in the app.

The app has no dark mode yet: the tokens point to the same steps in light and dark. Dark values exist only where a surface needs them today: email and the highlights under text gradients.

Text on color

Which text color goes on which surface, measured against WCAG AA: 4.5 : 1 for small text, 3 : 1 for large text. Every pair names the tokens, so the answer holds wherever the tokens are used.

• White on primary is just under AA for small text. Buttons are the one place we accept that: short, semibold labels in a shape everyone recognizes. Anywhere else, white on blue is large text only.
• Gray text is for what can be missed: hints, placeholders, timestamps. Only grey 600 and darker pass AA on white; grey 400 and grey 500 are for hints, placeholders and disabled text, never for information. Anything a customer needs to act on is onSurface.
• Running text on the website is navy softened (#4A536A, secondary 1000 at 78% on white). A page of full navy reads hard; the softened navy keeps the same hue and stays well above AA. Headings, prices and labels stay full navy, so what matters still stands out. On the web it is the --sp-text token.

Proportions

Most of what we make is white and light blue, with blue doing the talking and navy doing the reading. Orange is the spark on the website, not the fire.

Orange

Orange is the one thing we want you to read first. Our idea is parking you don't have to think about, at a price you already know. In marketing and motion, orange marks that price: the amount in a headline, the number that stays when the screen calms down, the one word that tells you what you need to know.

• One orange thing per view. If two things are orange, neither is the thing to read first.
• In marketing, orange may mark a price. That is what it is for.
• In the product, orange stays away from amounts and status. There, orange-ish means warning, and a price must never look like a problem. Amounts in the app are navy.
• Text on orange is navy, never white.
• Not for the logo. The logo is always blue or white.
• No orange on the business pages. That part of the website is navy, so it reads as the serious part at a glance (see website).

Orange sits close to the product's warning color (#F9A037). Until warning moves towards amber, keep the two apart: never orange and warning in the same view.

Gradients

Our website uses gradients to add warmth: blue that runs into orange, the two colors of the brand meeting. They are for marketing, never for the product UI, the logo or anything a customer must read to act.

Click Copy css to copy a gradient.

Text gradients

For one phrase in a headline or a quote, the words we want you to remember. One per view, and only on large text.

Mesh surfaces

Soft color fields for panels, feature cards, banners and calls to action. Each is a few radial glows over a base gradient, with a film grain on top: an SVG noise texture at 42% opacity, blend mode overlay. Text on a mesh is white or navy, and large. They use only primary, accent and navy, lightened with white or mixed with each other; a hex that is not on a scale is one of those mixes. Why we use a mesh at all, and what each color in it says, is on the graphic elements page.

Accents

• Gradients run from blue to orange, never the other way round and never in other colors.
• One gradient element per view, next to flat color everywhere else.
• Not in the product. The app stays flat: blue, navy and the functional colors.
• Not on the logo, and not behind small text.

Print

Use the CMYK builds of the brand colors for anything printed, and send the _cmyk.ai logo files to the printer. The logo README explains why the printed blue looks duller than the screen blue, and what to ask a printer when it has to match.

• Never pick a print color from the screen hex, and never use a screen hex taken from a printed sample. The print swatch above is a simulation of the ink, not a color to use.
• Tokens, tints and grays are screen colors. In print, use primary, secondary and the accent, and tints of them.